[TR] A11y: Screen reader: some UI elements are not announced by screen reader

modules/ui/src/app/app-routing.module.ts

@@ -73,5 +73,6 @@ export const routes: Routes = [
     path: '',
     canActivate: [CanActivateGuard],
     component: DevicesComponent,
+    title: 'Testrun - Devices',
   },
 ];

modules/ui/src/app/app.component.html

@@ -80,8 +80,7 @@
         <a
           class="logo-link"
           routerLink="{{ Routes.Testing }}"
-          aria-label="Testrun ui logo"
-          (keydown.enter)="onNavigationClick()">
+          aria-label="Testrun ui logo">
           <mat-icon svgIcon="testrun_logo_color"></mat-icon>
           <h1 class="main-heading">Testrun</h1>
         </a>
@@ -102,8 +101,7 @@ <h1 class="main-heading">Testrun</h1>
             aria-label="System settings"
             matTooltip="Settings"
             routerLink="{{ Routes.Settings }}"
-            routerLinkActive="app-sidebar-button-active"
-            (keydown.enter)="onNavigationClick()">
+            routerLinkActive="app-sidebar-button-active">
             <mat-icon>tune</mat-icon>
           </button>
           <app-wifi
@@ -166,8 +164,7 @@ <h1 class="main-heading">Testrun</h1>
     mat-button
     routerLink="{{ route }}"
     routerLinkActive="app-sidebar-button-active"
-    (keydown.space)="onNavigationClick()"
-    (keydown.enter)="onNavigationClick()">
+    ariaCurrentWhenActive="page">
     @if (svgIcon) {
       <mat-icon svgIcon="{{ svgIcon }}"></mat-icon>
     }

modules/ui/src/app/app.component.spec.ts

@@ -213,6 +213,7 @@ describe('AppComponent', () => {
     compiled = fixture.nativeElement as HTMLElement;
     spyOn(store, 'dispatch').and.callThrough();
     component.appStore.updateSettingMissedError(null);
+    mockLiveAnnouncer.announce.and.resolveTo();
   });
 
   it('should create the app', () => {

modules/ui/src/app/app.component.ts

@@ -16,9 +16,7 @@
 import {
   AfterViewInit,
   Component,
-  effect,
   ElementRef,
-  viewChild,
   inject,
   ViewChild,
   ChangeDetectorRef,
@@ -64,6 +62,8 @@ import { HelpTipComponent } from './components/help-tip/help-tip.component';
 import { HelpTips } from './model/tip-config';
 import { BypassContentComponent } from './components/bypass-content/bypass-content.component';
 import { BypassNavigationComponent } from './components/bypass-navigation/bypass-navigation.component';
+import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
+import { delay } from 'rxjs/internal/operators/delay';
 
 export interface AddMenuItem {
   icon?: string;
@@ -101,6 +101,7 @@ const navKeys = [
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   imports: [
+    A11yModule,
     MatButtonModule,
     MatIconModule,
     MatToolbarModule,
@@ -139,15 +140,14 @@ export class AppComponent implements AfterViewInit {
   appStore = inject(AppStore);
   private renderer = inject(Renderer2);
   private el = inject(ElementRef);
+  private liveAnnouncer = inject(LiveAnnouncer);
 
   public readonly CalloutType = CalloutType;
   public readonly StatusOfTestrun = StatusOfTestrun;
   public readonly HelpTips = HelpTips;
   public readonly Routes = Routes;
   viewModel$ = this.appStore.viewModel$;
 
-  readonly riskAssessmentLink = viewChild<ElementRef>('riskAssessmentLink');
-  private skipCount = 0;
   @ViewChild('settingButton', { static: false }) settingButton!: MatButton;
   settingTipTarget!: HTMLElement;
   deviceTipTarget!: HTMLElement;
@@ -205,6 +205,7 @@ export class AppComponent implements AfterViewInit {
   ];
 
   constructor() {
+    this.subscribeToNavigation();
     this.appStore.getDevices();
     this.appStore.getRiskProfiles();
     this.appStore.getSystemStatus();
@@ -241,13 +242,6 @@ export class AppComponent implements AfterViewInit {
       'qualification',
       this.domSanitizer.bypassSecurityTrustResourceUrl(QUALIFICATION_URL)
     );
-    effect(() => {
-      if (this.skipCount === 0 && this.riskAssessmentLink()) {
-        this.riskAssessmentLink()?.nativeElement.focus();
-      } else if (this.skipCount > 0) {
-        this.skipCount--;
-      }
-    });
   }
 
   ngAfterViewInit() {
@@ -263,18 +257,6 @@ export class AppComponent implements AfterViewInit {
       '.app-sidebar-button.app-sidebar-button-risk-assessment'
     ) as HTMLElement;
 
-    this.viewModel$
-      .pipe(
-        filter(({ isStatusLoaded }) => isStatusLoaded === true),
-        take(1)
-      )
-      .subscribe(({ systemStatus }) => {
-        if (systemStatus === StatusOfTestrun.InProgress) {
-          // link should not be focused after page is just loaded
-          this.skipCount = 1;
-        }
-      });
-
     this.cdr.detectChanges();
   }
 
@@ -341,4 +323,18 @@ export class AppComponent implements AfterViewInit {
       });
     }
   }
+
+  private subscribeToNavigation() {
+    this.route.events
+      .pipe(
+        filter(e => e instanceof NavigationEnd),
+        delay(10)
+      )
+      .subscribe(() => {
+        this.liveAnnouncer.announce(document.title, 'polite').then(() => {
+          const mainContainer = window.document.querySelector('#main');
+          this.appStore.setFocusOnPage(mainContainer);
+        });
+      });
+  }
 }

modules/ui/src/app/app.store.spec.ts

@@ -272,7 +272,7 @@ describe('AppStore', () => {
       it('should call focusFirstElementInContainer', fakeAsync(() => {
         appStore.setFocusOnPage(null);
 
-        tick(101);
+        tick(2001);
 
         expect(
           mockFocusManagerService.focusFirstElementInContainer

modules/ui/src/app/app.store.ts

@@ -265,7 +265,7 @@ export class AppStore extends ComponentStore<AppComponentState> {
   setFocusOnPage = this.effect<Document | Element | null | undefined>(
     trigger$ => {
       return trigger$.pipe(
-        delay(100),
+        delay(2000),
         tap(element => {
           this.focusManagerService.focusFirstElementInContainer(element);
         })

modules/ui/src/app/components/bypass/bypass.component.html

@@ -13,14 +13,12 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<div class="navigation-bypass-container" tabindex="-1">
+<div class="navigation-bypass-container">
   <button
     tabindex="0"
     mat-button
-    class="navigation-bypass-button"
-    (click)="onClick($event)"
-    (keydown.enter)="onClick($event)"
-    (keydown.space)="onClick($event)">
+    class="js-accessnav navigation-bypass-button"
+    (click)="onClick($event)">
     {{ label() }}
   </button>
 </div>

modules/ui/src/app/components/list-item/list-item.component.html

@@ -36,7 +36,8 @@
     <button
       class="list-item-menu-item"
       mat-menu-item
-      (click)="menuItemClicked.emit(action.action)">
+      (click)="menuItemClicked.emit(action.action)"
+      [attr.aria-label]="action.action">
       @if (action.icon) {
         <mat-icon fontSet="material-symbols-outlined">{{
           action.icon

modules/ui/src/app/components/list-layout/list-layout.component.html

@@ -39,6 +39,7 @@
         <mat-toolbar-row>
           <div class="search-field">
             <input
+              aria-label="Search"
               [value]="searchText()"
               (input)="updateQuery($event)"
               placeholder="Search" />