client(fix): header a11y (#689)

Zenika · Aug 30, 2024 · e92f02e · e92f02e
1 parent 2ae951a
commit e92f02e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
@@ -5,7 +5,7 @@
 </div>
 
 <div class="app-header__logo">
-  <a routerLink="/home">
+  <a routerLink="/home" aria-label="Accueil" i18n-aria-label="@@Component.Header.HomeLink">
     <img src="assets/images/logo-feedzback.svg" width="106" height="56" alt="" />
   </a>
 </div>
@@ -63,18 +63,28 @@
   <div class="app-header__menu-backdrop" @fadeInOut></div>
 }
 
-<div class="app-header__account">
+<div class="app-header__user-menu">
   @if (userInfo(); as _userInfo) {
-    <button class="gbl-button-less" [matMenuTriggerFor]="accountMenu">
-      <app-avatar class="app-header__account-photo" [photoUrl]="_userInfo.photoURL" [name]="_userInfo.displayName" />
+    <button
+      aria-label="Menu utilisateur"
+      i18n-aria-label="@@Component.Header.UserMenu"
+      class="gbl-button-less"
+      [matMenuTriggerFor]="userMenu"
+    >
+      <app-avatar class="app-header__user-menu-photo" [photoUrl]="_userInfo.photoURL" [name]="_userInfo.displayName" />
     </button>
   } @else {
-    <button mat-icon-button [matMenuTriggerFor]="accountMenu">
+    <button
+      aria-label="Menu utilisateur"
+      i18n-aria-label="@@Component.Header.UserMenu"
+      mat-icon-button
+      [matMenuTriggerFor]="userMenu"
+    >
       <mat-icon class="gbl-sys-primary">more_vert</mat-icon>
     </button>
   }
 
-  <mat-menu #accountMenu="matMenu" xPosition="before" class="gbl-overlay-menu">
+  <mat-menu #userMenu="matMenu" xPosition="before" class="gbl-overlay-menu">
     <button mat-menu-item (click)="languageService.switchLanguage()">
       <mat-icon class="gbl-sys-primary">translate</mat-icon>
       @switch (languageService.localeId) {

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
@@ -53,13 +53,13 @@
     }
   }
 
-  &__account {
+  &__user-menu {
     position: relative;
     display: flex;
     justify-content: flex-end;
   }
 
-  &__account-photo {
+  &__user-menu-photo {
     cursor: pointer;
   }
 
@@ -69,11 +69,11 @@
     }
 
     &__logo,
-    &__account {
+    &__user-menu {
       flex-basis: 20%;
     }
 
-    &__account {
+    &__user-menu {
       flex-shrink: 3;
     }
 
@@ -88,7 +88,7 @@
     }
 
     &__burger,
-    &__account {
+    &__user-menu {
       flex-basis: 20%;
     }
 

diff --git a/client/src/locales/messages.en.json b/client/src/locales/messages.en.json
@@ -52,6 +52,8 @@
     "Component.GiveRequestedFeedback.YourColleague": "Your colleague",
     "Component.GiveRequestedFeedbackListEmpty1": "You haven't received any feedZback requests...",
     "Component.GiveRequestedFeedbackListEmpty2": "Take this opportunity to request or give feedZback to your colleagues!",
+    "Component.Header.HomeLink": "Home",
+    "Component.Header.UserMenu": "User menu",
     "Component.Home.LinkToGuide": "How to write a ",
     "Component.Home.UsageAnalytics": "Usage analytics",
     "Component.LeaveForm.ApplyFeedbackDraftContent": "If you apply the draft, the feedZback you've started will be lost.",

diff --git a/client/src/locales/messages.fr.json b/client/src/locales/messages.fr.json
@@ -52,6 +52,8 @@
     "Component.GiveRequestedFeedback.YourColleague": "Votre collègue",
     "Component.GiveRequestedFeedbackListEmpty1": " Vous n'avez pas reçu de demandes de feedZback... ",
     "Component.GiveRequestedFeedbackListEmpty2": " Profitez-en pour demander ou donner du feedZback à vos collègues ! ",
+    "Component.Header.HomeLink": "Accueil",
+    "Component.Header.UserMenu": "Menu utilisateur",
     "Component.Home.LinkToGuide": "Comment écrire un ",
     "Component.Home.UsageAnalytics": "Statistiques d'usage",
     "Component.LeaveForm.ApplyFeedbackDraftContent": "Si vous appliquez le brouillon, le feedZback que vous avez commencé à rédiger sera perdu.",