client: improve a11y focus (#727)

avine · web-flow · commit 5a8ed9b60dbd · 2024-12-10T11:35:19.000+01:00
- focus top page on router navigation
- Announce page title after navigation
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
@@ -42,7 +42,7 @@
   <a
     routerLink="/home"
     routerLinkActive
-    appFocusContentOnRouting
+    appFocusTopTrigger
     ariaCurrentWhenActive="page"
     aria-label="Accueil"
     i18n-aria-label="@@Component.Header.HomeLink"
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
@@ -4,7 +4,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
 import { delay, filter } from 'rxjs';
 import { AuthService } from '../shared/auth';
-import { FocusContentOnRoutingDirective } from '../shared/focus-content';
+import { FocusTopTriggerDirective } from '../shared/focus';
 import { BurgerComponent } from './burger/burger.component';
 import { MenuComponent } from './menu/menu.component';
 import { NavComponent } from './nav/nav.component';
@@ -16,7 +16,7 @@ import { NavComponent } from './nav/nav.component';
     NgTemplateOutlet,
     RouterLinkActive,
     RouterLinkWithHref,
-    FocusContentOnRoutingDirective,
+    FocusTopTriggerDirective,
     BurgerComponent,
     MenuComponent,
     NavComponent,
diff --git a/client/src/app/header/menu/menu.component.html b/client/src/app/header/menu/menu.component.html
@@ -41,7 +41,7 @@
   </button>
 
   @if (userStatus().authenticated) {
-    <button mat-menu-item routerLink="/settings" appFocusContentOnRouting>
+    <button mat-menu-item routerLink="/settings" appFocusTopTrigger>
       <mat-icon class="gbl-sys-primary">settings</mat-icon>
       <ng-container i18n="@@Title.Settings">Paramètres</ng-container>
     </button>
diff --git a/client/src/app/header/menu/menu.component.ts b/client/src/app/header/menu/menu.component.ts
@@ -5,13 +5,13 @@ import { MatMenuModule } from '@angular/material/menu';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '../../shared/auth/auth.service';
 import { AvatarComponent } from '../../shared/avatar';
-import { FocusContentOnRoutingDirective } from '../../shared/focus-content';
+import { FocusTopTriggerDirective } from '../../shared/focus';
 import { LanguageService } from '../../shared/i18n/language';
 import { ThemeService } from '../../shared/theme';
 
 @Component({
   selector: 'app-menu',
-  imports: [RouterLink, MatButtonModule, MatIconModule, MatMenuModule, AvatarComponent, FocusContentOnRoutingDirective],
+  imports: [RouterLink, MatButtonModule, MatIconModule, MatMenuModule, AvatarComponent, FocusTopTriggerDirective],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.scss',
   encapsulation: ViewEncapsulation.None,
diff --git a/client/src/app/header/nav/nav.component.html b/client/src/app/header/nav/nav.component.html
@@ -2,7 +2,7 @@
   class="app-nav__item"
   routerLinkActive="app-nav__item--active"
   routerLink="/request"
-  appFocusContentOnRouting
+  appFocusTopTrigger
   ariaCurrentWhenActive="page"
 >
   <ng-container i18n="@@Feedback.Request"> Demander </ng-container>
@@ -12,7 +12,7 @@
   class="app-nav__item"
   routerLinkActive="app-nav__item--active"
   routerLink="/give"
-  appFocusContentOnRouting
+  appFocusTopTrigger
   ariaCurrentWhenActive="page"
 >
   <ng-container i18n="@@Feedback.Give"> Donner </ng-container>
@@ -22,7 +22,7 @@
   class="app-nav__item"
   routerLinkActive="app-nav__item--active"
   routerLink="/give-requested"
-  appFocusContentOnRouting
+  appFocusTopTrigger
   ariaCurrentWhenActive="page"
   [matBadge]="receivedRequestLength()"
 >
@@ -33,7 +33,7 @@
   class="app-nav__item"
   routerLinkActive="app-nav__item--active"
   routerLink="/history"
-  appFocusContentOnRouting
+  appFocusTopTrigger
   ariaCurrentWhenActive="page"
   i18n="@@Action.History"
   >Mes feedZbacks</a
@@ -45,7 +45,7 @@
     class="app-nav__item"
     routerLinkActive="app-nav__item--active"
     routerLink="/manager"
-    appFocusContentOnRouting
+    appFocusTopTrigger
     ariaCurrentWhenActive="page"
     i18n="@@Action.Manager"
   >
diff --git a/client/src/app/header/nav/nav.component.ts b/client/src/app/header/nav/nav.component.ts
@@ -5,13 +5,13 @@ import { RouterLinkActive, RouterLinkWithHref } from '@angular/router';
 import { GiveRequestedFeedbackListService } from '../../give-feedback/give-requested-feedback-list/give-requested-feedback-list.service';
 import { BreakpointService } from '../../shared/breakpoint';
 import { EmployeeService } from '../../shared/employee';
-import { FocusContentOnRoutingDirective } from '../../shared/focus-content';
+import { FocusTopTriggerDirective } from '../../shared/focus';
 import { navAnimation } from './nav.animation';
 
 @Component({
   selector: 'app-nav',
   host: { class: 'app-nav' },
-  imports: [RouterLinkActive, RouterLinkWithHref, MatBadgeModule, FocusContentOnRoutingDirective],
+  imports: [RouterLinkActive, RouterLinkWithHref, MatBadgeModule, FocusTopTriggerDirective],
   animations: [navAnimation],
   templateUrl: './nav.component.html',
   styleUrl: './nav.component.scss',
diff --git a/client/src/app/layout/layout.component.html b/client/src/app/layout/layout.component.html
@@ -1,12 +1,12 @@
-<app-focus-content-skip-links class="app-layout__container" />
+<app-focus class="app-layout__container" />
 
 <header class="app-layout__header">
   <div class="app-layout__container">
     <ng-content select="[appLayoutHeader]" />
   </div>
 </header>
 
-<main class="app-layout__main app-layout__container" appFocusContentTarget>
+<main class="app-layout__main app-layout__container" appFocusMainTarget>
   <ng-content select="[appLayoutMain]" />
 
   <app-loading />
diff --git a/client/src/app/layout/layout.component.ts b/client/src/app/layout/layout.component.ts
@@ -1,11 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { FocusContentSkipLinksComponent, FocusContentTargetDirective } from '../shared/focus-content';
+import { FocusComponent, FocusMainDirective } from '../shared/focus';
 import { LoadingComponent } from '../shared/loading';
 
 @Component({
   selector: 'app-layout',
   host: { class: 'app-layout' },
-  imports: [FocusContentSkipLinksComponent, FocusContentTargetDirective, LoadingComponent],
+  imports: [FocusComponent, FocusMainDirective, LoadingComponent],
   templateUrl: './layout.component.html',
   styleUrl: './layout.component.scss',
   encapsulation: ViewEncapsulation.None,
diff --git a/client/src/app/shared/focus-content/focus-content-skip-links.component.html b/client/src/app/shared/focus-content/focus-content-skip-links.component.html
diff --git a/client/src/app/shared/focus-content/focus-content-skip-links.component.ts b/client/src/app/shared/focus-content/focus-content-skip-links.component.ts
diff --git a/client/src/app/shared/focus-content/focus-content-target.directive.ts b/client/src/app/shared/focus-content/focus-content-target.directive.ts
diff --git a/client/src/app/shared/focus-content/focus-content.service.ts b/client/src/app/shared/focus-content/focus-content.service.ts
diff --git a/client/src/app/shared/focus-content/index.ts b/client/src/app/shared/focus-content/index.ts
diff --git a/client/src/app/shared/focus/focus-main-target.directive.ts b/client/src/app/shared/focus/focus-main-target.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+import { FocusService } from './focus.service';
+
+@Directive({
+  selector: '[appFocusMainTarget]',
+  host: { '[tabIndex]': '-1' },
+})
+export class FocusMainDirective {
+  constructor() {
+    inject(FocusService).mainTarget = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  }
+}
diff --git a/client/src/app/shared/focus/focus-top-target.directive.ts b/client/src/app/shared/focus/focus-top-target.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+import { FocusService } from './focus.service';
+
+@Directive({
+  selector: '[appFocusTopTarget]',
+  host: { '[tabIndex]': '-1' },
+})
+export class FocusTopDirective {
+  constructor() {
+    inject(FocusService).topTarget = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  }
+}
diff --git a/client/src/app/shared/focus/focus-top-trigger.directive.ts b/client/src/app/shared/focus/focus-top-trigger.directive.ts
@@ -1,27 +1,27 @@
 import { Directive, inject } from '@angular/core';
 import { NavigationCancel, NavigationEnd, NavigationError, NavigationSkipped, Router } from '@angular/router';
-import { FocusContentService } from './focus-content.service';
+import { FocusService } from './focus.service';
 
 @Directive({
-  selector: '[appFocusContentOnRouting]',
+  selector: '[appFocusTopTrigger]',
   host: {
-    '(click)': 'focus()',
+    '(click)': 'focusTop()',
   },
 })
-export class FocusContentOnRoutingDirective {
+export class FocusTopTriggerDirective {
   private router = inject(Router);
 
   private navigationEndLikeEvents = [NavigationCancel, NavigationEnd, NavigationError, NavigationSkipped];
 
-  private focusContentService = inject(FocusContentService);
+  private focusService = inject(FocusService);
 
-  focus() {
+  focusTop() {
     const subscription = this.router.events.subscribe((event) => {
       if (this.navigationEndLikeEvents.some((navigationEndLikeEvent) => event instanceof navigationEndLikeEvent)) {
         subscription.unsubscribe();
       }
       if (event instanceof NavigationEnd) {
-        this.focusContentService.focusTarget();
+        this.focusService.focusTop();
       }
     });
   }
diff --git a/client/src/app/shared/focus/focus.component.html b/client/src/app/shared/focus/focus.component.html
@@ -0,0 +1,6 @@
+<span appFocusTopTarget class="sr-only">{{ routeTitle() }}</span>
+
+<a (click)="focusMain()" (keydown.enter)="focusMain()" tabindex="0" class="app-focus__skip-links">
+  <ng-container i18n="@@Component.SkipLinks.Link">Accéder au contenu principal</ng-container>
+  <mat-icon class="app-focus__skip-links-icon">step_over</mat-icon>
+</a>
diff --git a/client/src/app/shared/focus/focus.component.scss b/client/src/app/shared/focus/focus.component.scss
@@ -1,5 +1,5 @@
-.app-focus-content-skip-links {
-  &__link {
+.app-focus {
+  &__skip-links {
     position: fixed;
     z-index: 9999;
     padding: 1rem;
@@ -20,7 +20,7 @@
     }
   }
 
-  &__icon {
+  &__skip-links-icon {
     margin-left: 0.5rem;
     vertical-align: bottom;
   }
diff --git a/client/src/app/shared/focus/focus.component.ts b/client/src/app/shared/focus/focus.component.ts
@@ -0,0 +1,21 @@
+import { Component, inject, ViewEncapsulation } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { FocusTopDirective } from './focus-top-target.directive';
+import { FocusService } from './focus.service';
+
+@Component({
+  selector: 'app-focus',
+  imports: [MatIconModule, FocusTopDirective],
+  templateUrl: './focus.component.html',
+  styleUrl: './focus.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class FocusComponent {
+  private focusService = inject(FocusService);
+
+  protected routeTitle = this.focusService.routeTitle;
+
+  protected focusMain() {
+    this.focusService.focusMain();
+  }
+}
diff --git a/client/src/app/shared/focus/focus.service.ts b/client/src/app/shared/focus/focus.service.ts
@@ -0,0 +1,40 @@
+import { inject, Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { filter, map } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FocusService {
+  private router = inject(Router);
+
+  routeTitle = toSignal(
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map(() => {
+        let routeTitle: string | undefined;
+        let routeSnapshot: ActivatedRouteSnapshot | undefined = this.router.routerState.snapshot.root;
+        while (routeSnapshot) {
+          if (routeSnapshot.title) {
+            routeTitle = routeSnapshot.title;
+          }
+          routeSnapshot = routeSnapshot.children.find(({ outlet }) => outlet === 'primary');
+        }
+        return routeTitle;
+      }),
+    ),
+  );
+
+  topTarget?: HTMLElement;
+
+  mainTarget?: HTMLElement;
+
+  focusTop() {
+    this.topTarget?.focus();
+  }
+
+  focusMain() {
+    this.mainTarget?.focus();
+  }
+}
diff --git a/client/src/app/shared/focus/index.ts b/client/src/app/shared/focus/index.ts
@@ -0,0 +1,5 @@
+export * from './focus-main-target.directive';
+export * from './focus-top-target.directive';
+export * from './focus-top-trigger.directive';
+export * from './focus.component';
+export * from './focus.service';
