Improve console accessibility (#2649)

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"