Improve console accessibility (#2649)

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

@@ -7,6 +7,11 @@
     ></mat-progress-bar>
   </div>
   <mat-sidenav-container class="console-app__container">
+    <mat-sidenav-content class="console-app__content-wrapper">
+      <div class="console-app__content" role="main">
+        <router-outlet></router-outlet>
+      </div>
+    </mat-sidenav-content>
     <mat-sidenav
       [mode]="breakpointObserver.isMobileView() ? 'over' : 'side'"
       [opened]="!breakpointObserver.isMobileView()"
@@ -15,10 +20,5 @@
     >
       <app-navigation />
     </mat-sidenav>
-    <mat-sidenav-content class="console-app__content-wrapper">
-      <div class="console-app__content">
-        <router-outlet></router-outlet>
-      </div>
-    </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

console-webapp/src/app/app.component.spec.ts

@@ -20,12 +20,18 @@ import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { BackendService } from './shared/services/backend.service';
 import { AppRoutingModule } from './app-routing.module';
+import { AppModule } from './app.module';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AppComponent],
-      imports: [MaterialModule, BrowserAnimationsModule, AppRoutingModule],
+      imports: [
+        MaterialModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
       providers: [
         BackendService,
         provideHttpClient(),
@@ -36,6 +42,7 @@ describe('AppComponent', () => {
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });

console-webapp/src/app/domains/domainList.component.spec.ts

@@ -21,6 +21,7 @@ import { MaterialModule } from '../material.module';
 import { BackendService } from '../shared/services/backend.service';
 import { DomainListComponent } from './domainList.component';
 import { FormsModule } from '@angular/forms';
+import { AppModule } from '../app.module';
 
 describe('DomainListComponent', () => {
   let component: DomainListComponent;
@@ -29,7 +30,12 @@ describe('DomainListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DomainListComponent],
-      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
+      imports: [
+        MaterialModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        AppModule,
+      ],
       providers: [
         BackendService,
         provideHttpClient(),

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

@@ -12,6 +12,7 @@
     <a
       [routerLink]="'/home'"
       routerLinkActive="active"
+      aria-label="Google Registry logo"
       class="console-app__logo"
     >
       <svg

console-webapp/src/app/header/header.component.spec.ts

@@ -17,6 +17,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HeaderComponent } from './header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
+import { ActivatedRoute } from '@angular/router';
+import { AppModule, SelectedRegistrarModule } from '../app.module';
+import { AppRoutingModule } from '../app-routing.module';
+import { BackendService } from '../shared/services/backend.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -24,7 +30,19 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [
+        SelectedRegistrarModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
       declarations: [HeaderComponent],
     }).compileComponents();
 

console-webapp/src/app/home/home.component.spec.ts

@@ -16,6 +16,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 import { MaterialModule } from '../material.module';
+import { AppModule } from '../app.module';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -23,7 +24,7 @@ describe('HomeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [MaterialModule, AppModule],
       declarations: [HomeComponent],
     }).compileComponents();
 

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

@@ -6,7 +6,9 @@
   <mat-tree-node
     *matTreeNodeDef="let node"
     matTreeNodeToggle
+    tabindex="0"
     (click)="onClick(node)"
+    (keyup.enter)="onClick(node)"
     [class.active]="router.url.includes(node.path)"
     [elementId]="getElementId(node)"
   >

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

@@ -1,4 +1,8 @@
-<div class="console-app__registrar-view">
+<div
+  class="console-app__registrar-view"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <h1 class="mat-headline-4">Registrars</h1>
   <mat-divider></mat-divider>
   <div class="console-app__registrar-view-content">

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

@@ -59,6 +59,8 @@
         <mat-row
           *matRowDef="let row; columns: displayedColumns"
           (click)="openDetails(row.registrarId)"
+          tabindex="0"
+          (keyup.enter)="openDetails(row.registrarId)"
         ></mat-row>
       </mat-table>
 

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

@@ -32,7 +32,9 @@
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row
       *matRowDef="let row; columns: displayedColumns"
+      tabindex="0"
       (click)="openDetails(row)"
+      (keyup.enter)="openDetails(row)"
     ></mat-row>
   </mat-table>
   }

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

@@ -1,4 +1,9 @@
-<div class="console-app__contact" *ngIf="contactService.contactInEdit">
+<div
+  class="console-app__contact"
+  *ngIf="contactService.contactInEdit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <div class="console-app__contact-controls">
     <button
       mat-icon-button

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

@@ -1,4 +1,8 @@
-<div class="settings-security__edit-password">
+<div
+  class="settings-security__edit-password"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <p>
     <button
       mat-icon-button

console-webapp/src/app/settings/security/security.component.spec.ts

@@ -42,7 +42,7 @@ describe('SecurityComponent', () => {
     fetchSecurityDetailsSpy =
       securityServiceSpy.fetchSecurityDetails.and.returnValue(of());
 
-    saveSpy = securityServiceSpy.saveChanges;
+    saveSpy = securityServiceSpy.saveChanges.and.returnValue(of());
 
     await TestBed.configureTestingModule({
       declarations: [SecurityEditComponent, SecurityComponent],

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

@@ -1,4 +1,8 @@
-<div class="settings-security__edit">
+<div
+  class="settings-security__edit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <h1>IP Allowlist</h1>
   <p>
     Restrict access to EPP production servers to the following IP/IPv6

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

@@ -10,22 +10,28 @@
       <a
         mat-tab-link
         routerLink="contact"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla="routerLinkActive"
+        [active]="rla.isActive"
         >Contacts</a
       >
       <a
         mat-tab-link
         routerLink="whois"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla2="routerLinkActive"
+        [active]="rla2.isActive"
         >WHOIS Info</a
       >
       <a
         mat-tab-link
         routerLink="security"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla3="routerLinkActive"
+        [active]="rla3.isActive"
         >Security</a
       >
     </nav>

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

@@ -13,14 +13,6 @@
 // limitations under the License.
 
 .console-settings {
-  .mdc-tab {
-    &.active-link {
-      border-bottom: 2px solid var(--primary);
-      .mdc-tab__text-label {
-        color: var(--primary);
-      }
-    }
-  }
   nav {
     margin-bottom: 40px;
   }

console-webapp/src/app/settings/settings.component.spec.ts

@@ -17,6 +17,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SettingsComponent } from './settings.component';
 import { MaterialModule } from '../material.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { AppModule, SelectedRegistrarModule } from '../app.module';
+import { BackendService } from '../shared/services/backend.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { AppRoutingModule } from '../app-routing.module';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
@@ -24,7 +30,19 @@ describe('SettingsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [
+        SelectedRegistrarModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
       declarations: [SettingsComponent],
     }).compileComponents();
 

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

@@ -1,4 +1,9 @@
-<div class="console-app__whois-edit" *ngIf="registrarInEdit">
+<div
+  class="console-app__whois-edit"
+  *ngIf="registrarInEdit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <button
     mat-icon-button
     class="console-app__whois-edit-back"

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

@@ -1,4 +1,8 @@
-<div class="console-app__user-details">
+<div
+  class="console-app__user-details"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   @if(isEditing) {
   <h1 class="mat-headline-4">Editing {{ userDetails().emailAddress }}</h1>
   <mat-divider></mat-divider>

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

@@ -1,4 +1,4 @@
-<app-selected-registrar-wrapper>
+<app-selected-registrar-wrapper cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
   @if(isLoading) {
   <div class="console-app__users-spinner">
     <mat-spinner />

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

@@ -19,6 +19,8 @@
       *matRowDef="let row; columns: displayedColumns"
       [class.rowSelected]="isRowSelected(row)"
       (click)="onClick(row)"
+      (keyup.enter)="onClick(row)"
+      tabindex="0"
     ></mat-row>
   </mat-table>
 </div>

console-webapp/src/theme.scss

@@ -112,7 +112,7 @@ mat-row:hover {
 
 // Access and define a class with secondary color exposed
 .secondary-text {
-  color: $secondary-color;
+  color: #575757;
 }
 
 .primary-text {