client: improve accessibility (#623)

- adding CSS `:focus-visible` - fixing the account-menu accessibility (using tab and arrow keys)
Zenika · Jul 18, 2024 · 5fbf50b · 5fbf50b
1 parent 768609d
commit 5fbf50b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 29 deletions.
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
@@ -66,20 +66,23 @@
 <div class="app-header__account">
   @if (!userState().guest) {
     @if (userInfo(); as userInfo) {
-      <app-avatar
-        class="app-header__account-photo"
-        [photoUrl]="userInfo.photoURL"
-        [name]="userInfo.displayName"
-        [matMenuTriggerFor]="accountMenu"
-      />
+      <button class="gbl-button-less" [matMenuTriggerFor]="accountMenu">
+        <app-avatar class="app-header__account-photo" [photoUrl]="userInfo.photoURL" [name]="userInfo.displayName" />
+      </button>
     } @else {
       <button mat-icon-button [matMenuTriggerFor]="accountMenu">
         <mat-icon class="gbl-sys-primary">more_vert</mat-icon>
       </button>
     }
 
     <mat-menu #accountMenu="matMenu" xPosition="before" class="gbl-overlay-menu">
-      <ng-container [ngTemplateOutlet]="commonMenuItems" />
+      <button mat-menu-item (click)="languageService.switchLanguage()">
+        <ng-container [ngTemplateOutlet]="languageMenuItem" />
+      </button>
+
+      <button mat-menu-item (click)="themeService.switch()">
+        <ng-container [ngTemplateOutlet]="themeMenuItem" />
+      </button>
 
       @if (userState().authenticated) {
         <button mat-menu-item routerLink="/settings">
@@ -98,35 +101,39 @@
       </button>
     </mat-menu>
   } @else {
-    <button mat-icon-button [matMenuTriggerFor]="accountMenu">
+    <button mat-icon-button [matMenuTriggerFor]="guestMenu">
       <mat-icon class="gbl-sys-primary">more_vert</mat-icon>
     </button>
 
-    <mat-menu #accountMenu="matMenu" xPosition="before" class="gbl-overlay-menu">
-      <ng-container [ngTemplateOutlet]="commonMenuItems" />
+    <mat-menu #guestMenu="matMenu" xPosition="before" class="gbl-overlay-menu">
+      <button mat-menu-item (click)="languageService.switchLanguage()">
+        <ng-container [ngTemplateOutlet]="languageMenuItem" />
+      </button>
+
+      <button mat-menu-item (click)="themeService.switch()">
+        <ng-container [ngTemplateOutlet]="themeMenuItem" />
+      </button>
     </mat-menu>
   }
 </div>
 
-<ng-template #commonMenuItems>
-  <button mat-menu-item (click)="languageService.switchLanguage()">
-    <mat-icon class="gbl-sys-primary">translate</mat-icon>
-    @switch (languageService.localeId) {
-      @case ('fr') {
-        English
-      }
-      @case ('en') {
-        Français
-      }
+<ng-template #languageMenuItem>
+  <mat-icon class="gbl-sys-primary">translate</mat-icon>
+  @switch (languageService.localeId) {
+    @case ('fr') {
+      English
     }
-  </button>
-
-  <button mat-menu-item (click)="themeService.switch()">
-    <mat-icon class="gbl-sys-primary">{{ themeService.theme() === 'light' ? 'dark_mode' : 'light_mode' }}</mat-icon>
-    @if (themeService.theme() === 'light') {
-      <ng-container i18n="@@Action.DarkTheme">Thème foncé</ng-container>
-    } @else {
-      <ng-container i18n="@@Action.LightTheme">Thème clair</ng-container>
+    @case ('en') {
+      Français
     }
-  </button>
+  }
+</ng-template>
+
+<ng-template #themeMenuItem>
+  <mat-icon class="gbl-sys-primary">{{ themeService.theme() === 'light' ? 'dark_mode' : 'light_mode' }}</mat-icon>
+  @if (themeService.theme() === 'light') {
+    <ng-container i18n="@@Action.DarkTheme">Thème foncé</ng-container>
+  } @else {
+    <ng-container i18n="@@Action.LightTheme">Thème clair</ng-container>
+  }
 </ng-template>
diff --git a/client/src/styles/base.scss b/client/src/styles/base.scss
@@ -21,3 +21,8 @@ hr {
   border: none;
   border-top: 1px solid var(--sys-outline-variant);
 }
+
+*:focus-visible {
+  outline: 3px dashed var(--sys-outline);
+  outline-offset: 0.25em;
+}
diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss
@@ -162,6 +162,17 @@ ul.gbl-list {
   }
 }
 
+/* ----- button less ----- */
+
+.gbl-button-less {
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  line-height: inherit;
+  font: inherit;
+}
+
 /* ----- Overlay menu ----- */
 
 .gbl-overlay-menu {