Improve console screen reader interaction (#2656)

console-webapp/src/app/users/users.component.html

@@ -1,10 +1,10 @@
-<app-selected-registrar-wrapper cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+<app-selected-registrar-wrapper>
   @if(isLoading) {
   <div class="console-app__users-spinner">
     <mat-spinner />
   </div>
   } @else if(selectingExistingUser) {
-  <div class="console-app__users">
+  <div class="console-app__users" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
     <h1 class="mat-headline-4">Add existing user</h1>
     <p>
       <button
@@ -58,24 +58,32 @@
     }
   </div>
   } @else if(usersService.currentlyOpenUserEmail()) {
-  <app-user-edit></app-user-edit>
+  <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+    <app-user-edit></app-user-edit>
+  </div>
+
   } @else if(isNew) {
-  <h1 class="mat-headline-4">New User Form</h1>
-  <div class="spacer"></div>
-  <p>
-    <button
-      mat-icon-button
-      aria-label="Back to users list"
-      (click)="isNew = false"
-    >
-      <mat-icon>arrow_back</mat-icon>
-    </button>
-  </p>
-  <app-user-edit-form [isNew]="true" (onEditComplete)="createNewUser($event)" />
+  <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+    <h1 class="mat-headline-4">New User Form</h1>
+    <div class="spacer"></div>
+    <p>
+      <button
+        mat-icon-button
+        aria-label="Back to users list"
+        (click)="isNew = false"
+      >
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+    </p>
+    <app-user-edit-form
+      [isNew]="true"
+      (onEditComplete)="createNewUser($event)"
+    />
+  </div>
   } @else {
   <div class="console-app__users">
     <div class="console-app__users-header">
-      <h1 class="mat-headline-4">Users</h1>
+      <h1 class="mat-headline-4" forceFocus>Users</h1>
       <div class="spacer"></div>
       <div class="console-app__users-header-buttons">
         <button