From e92f02eaf6a42d7b030a48ff14393022784631e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Francel?= <stephane.francel@zenika.com>
Date: Fri, 30 Aug 2024 09:16:27 +0000
Subject: [PATCH] client(fix): header a11y (#689)

---
 client/src/app/header/header.component.html | 22 +++++++++++++++------
 client/src/app/header/header.component.scss | 10 +++++-----
 client/src/locales/messages.en.json         |  2 ++
 client/src/locales/messages.fr.json         |  2 ++
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index eadbaaf7..75a7e0a0 100644
--- 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
index 8a7597c1..4c6b1408 100644
--- 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
index 23d9fe9f..873e832b 100644
--- 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
index e642f0a8..a3b4924d 100644
--- 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.",