From 40b6984ffb5f8466425b06e95600fce1fae1e1d3 Mon Sep 17 00:00:00 2001
From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:46:25 -0500
Subject: [PATCH] Improve console screen reader interaction (#2656)

---
 console-webapp/src/app/app.module.ts          |  2 +
 .../billingInfo/billingInfo.component.html    |  2 +-
 .../src/app/domains/domainList.component.html |  3 +-
 .../registrar/registrarsTable.component.html  |  2 +-
 .../app/resources/resources.component.html    |  2 +-
 .../src/app/settings/settings.component.html  |  2 +-
 .../shared/directives/forceFocus.directive.ts | 30 ++++++++++++++
 .../src/app/users/users.component.html        | 40 +++++++++++--------
 8 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 console-webapp/src/app/shared/directives/forceFocus.directive.ts

diff --git a/console-webapp/src/app/app.module.ts b/console-webapp/src/app/app.module.ts
index b0776a2d1..d7256064d 100644
--- a/console-webapp/src/app/app.module.ts
+++ b/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,
diff --git a/console-webapp/src/app/billingInfo/billingInfo.component.html b/console-webapp/src/app/billingInfo/billingInfo.component.html
index 708ce45ae..4d08d47f4 100644
--- a/console-webapp/src/app/billingInfo/billingInfo.component.html
+++ b/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">
diff --git a/console-webapp/src/app/domains/domainList.component.html b/console-webapp/src/app/domains/domainList.component.html
index 430b88dba..4961d4601 100644
--- a/console-webapp/src/app/domains/domainList.component.html
+++ b/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
diff --git a/console-webapp/src/app/registrar/registrarsTable.component.html b/console-webapp/src/app/registrar/registrarsTable.component.html
index 42164f91c..5b2862e75 100644
--- a/console-webapp/src/app/registrar/registrarsTable.component.html
+++ b/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
diff --git a/console-webapp/src/app/resources/resources.component.html b/console-webapp/src/app/resources/resources.component.html
index 0648c1bd4..3c279dd4d 100644
--- a/console-webapp/src/app/resources/resources.component.html
+++ b/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>
diff --git a/console-webapp/src/app/settings/settings.component.html b/console-webapp/src/app/settings/settings.component.html
index 1750acc3e..80b839883 100644
--- a/console-webapp/src/app/settings/settings.component.html
+++ b/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"
diff --git a/console-webapp/src/app/shared/directives/forceFocus.directive.ts b/console-webapp/src/app/shared/directives/forceFocus.directive.ts
new file mode 100644
index 000000000..ea83ae767
--- /dev/null
+++ b/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';
+  }
+}
diff --git a/console-webapp/src/app/users/users.component.html b/console-webapp/src/app/users/users.component.html
index 8383f7f46..de1dcef3e 100644
--- a/console-webapp/src/app/users/users.component.html
+++ b/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