Improve console screen reader interaction (#2656)

console-webapp/src/app/app.module.ts

@@ -59,6 +59,7 @@ import { UserDataService } from './shared/services/userData.service';
 import { SnackBarModule } from './snackbar.module';
 import { SupportComponent } from './support/support.component';
 import { TldsComponent } from './tlds/tlds.component';
+import { ForceFocusDirective } from './shared/directives/forceFocus.directive';
 
 @NgModule({
   declarations: [SelectedRegistrarWrapper],
@@ -78,6 +79,7 @@ export class SelectedRegistrarModule {}
     HeaderComponent,
     HomeComponent,
     LocationBackDirective,
+    ForceFocusDirective,
     UserLevelVisibility,
     NavigationComponent,
     NewRegistrarComponent,

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

@@ -1,5 +1,5 @@
 <app-selected-registrar-wrapper>
-  <h1 class="mat-headline-4">Billing Info</h1>
+  <h1 class="mat-headline-4" forceFocus>Billing Info</h1>
   <div class="console-app__billing">
     <div>
       <div class="console-app__billing-subhead">

console-webapp/src/app/domains/domainList.component.html

@@ -1,6 +1,6 @@
 <app-selected-registrar-wrapper>
   <div class="console-app-domains">
-    <h1 class="mat-headline-4">Domains</h1>
+    <h1 class="mat-headline-4" forceFocus>Domains</h1>
 
     <div
       class="console-app-domains__actions-wrapper"
@@ -81,6 +81,7 @@
               <button
                 mat-flat-button
                 aria-label="Delete Selected Domains"
+                [attr.aria-hidden]="!selection.hasValue()"
                 (click)="deleteSelectedDomains()"
               >
                 Delete Selected Domains

console-webapp/src/app/registrar/registrarsTable.component.html

@@ -3,7 +3,7 @@
 } @else {
 <div class="console-app__registrars">
   <div class="console-app__registrars-header">
-    <h1 class="mat-headline-4">Registrars</h1>
+    <h1 class="mat-headline-4" forceFocus>Registrars</h1>
     <div class="spacer"></div>
     <button
       mat-stroked-button

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

@@ -1,4 +1,4 @@
-<h1 class="mat-headline-4">Resources</h1>
+<h1 class="mat-headline-4" forceFocus>Resources</h1>
 <div class="console-app__resources">
   <div>
     <div class="console-app__resources-subhead">Technical resources</div>

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

@@ -1,6 +1,6 @@
 <app-selected-registrar-wrapper>
   <div class="console-settings">
-    <h1 class="mat-headline-4">Settings</h1>
+    <h1 class="mat-headline-4" forceFocus>Settings</h1>
     <nav
       mat-tab-nav-bar
       mat-stretch-tabs="false"

console-webapp/src/app/shared/directives/forceFocus.directive.ts

@@ -0,0 +1,30 @@
+// Copyright 2025 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Directive, ElementRef, effect } from '@angular/core';
+
+@Directive({
+  selector: '[forceFocus]',
+})
+export class ForceFocusDirective {
+  constructor(private el: ElementRef) {
+    effect(this.processElement.bind(this));
+  }
+
+  processElement() {
+    this.el.nativeElement.tabIndex = '1';
+    this.el.nativeElement.focus();
+    this.el.nativeElement.tabIndex = '-1';
+  }
+}

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,8 +58,12 @@
     }
   </div>
   } @else if(usersService.currentlyOpenUserEmail()) {
+  <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
     <app-user-edit></app-user-edit>
+  </div>
+
   } @else if(isNew) {
+  <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
     <h1 class="mat-headline-4">New User Form</h1>
     <div class="spacer"></div>
     <p>
@@ -71,11 +75,15 @@
         <mat-icon>arrow_back</mat-icon>
       </button>
     </p>
-  <app-user-edit-form [isNew]="true" (onEditComplete)="createNewUser($event)" />
+    <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