client(fix): overall a11y (#697)

Zenika · Sep 4, 2024 · 4eef920 · 4eef920
1 parent 612f0ac
commit 4eef920
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 27 deletions.
diff --git a/client/src/app/give-feedback/give-feedback/give-feedback.component.html b/client/src/app/give-feedback/give-feedback/give-feedback.component.html
@@ -11,6 +11,8 @@
       matTooltipPosition="left"
       matTooltip="Brouillons"
       i18n-matTooltip="@@Title.Drafts"
+      aria-label="Brouillons"
+      i18n-aria-label="@@Title.Drafts"
       (click)="openDraftDialog()"
     >
       <mat-icon>edit_note</mat-icon>

diff --git a/client/src/app/request-feedback/request-feedback.component.html b/client/src/app/request-feedback/request-feedback.component.html
@@ -61,10 +61,10 @@ <h1 class="gbl-page-title mat-headline-large">
     ></textarea>
 
     <mat-hint align="start">
-      <a [matMenuTriggerFor]="useTemplate" class="gbl-link gbl-link--no-underline">
+      <button type="button" [matMenuTriggerFor]="useTemplate" class="gbl-button-less gbl-link gbl-link--no-underline">
         <mat-icon class="align-text-bottom" style="font-size: 1.125rem">edit_note</mat-icon>
         <ng-container i18n="@@Component.RequestFeedback.UseTemplate">S'inspirer d'un modèle</ng-container>
-      </a>
+      </button>
 
       <mat-menu #useTemplate="matMenu" xPosition="before" yPosition="above" class="gbl-overlay-menu">
         <button

diff --git a/client/src/app/shared/feedback/feedback-body/feedback-body.component.html b/client/src/app/shared/feedback/feedback-body/feedback-body.component.html
@@ -1,18 +1,18 @@
 @if (feedback(); as feedback) {
   @if (feedback.message) {
-    <h3 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Message">Message</h3>
+    <h2 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Message">Message</h2>
     <app-multi-line class="app-feedback-body__content" [text]="feedback.message" />
   }
 
   @if (feedback.status === 'done') {
-    <h3 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Positive">Points positifs</h3>
+    <h2 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Positive">Points positifs</h2>
     <app-multi-line class="app-feedback-body__content" [text]="feedback.positive" />
 
-    <h3 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Negative">Axes d'améliorations</h3>
+    <h2 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Negative">Axes d'améliorations</h2>
     <app-multi-line class="app-feedback-body__content" [text]="feedback.negative" />
 
     @if (feedback.comment) {
-      <h3 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Comment">Commentaire</h3>
+      <h2 class="app-feedback-body__title mat-title-large" i18n="@@Feedback.Comment">Commentaire</h2>
       <app-multi-line class="app-feedback-body__content" [text]="feedback.comment" />
     }
   }

diff --git a/client/src/app/shared/feedback/feedback-list/feedback-list.component.html b/client/src/app/shared/feedback/feedback-list/feedback-list.component.html
@@ -55,11 +55,8 @@
         class="gbl-sys-primary-hover"
         mat-icon-button
         matTooltipPosition="left"
-        [matTooltip]="
-          nf(element).type === 'received' || nf(element).type === 'given'
-            ? viewFeedbackTooltip
-            : viewFeedbackRequestTooltip
-        "
+        [matTooltip]="getActionLabel(nf(element).type)"
+        [attr.aria-label]="getActionLabel(nf(element).type)"
         [routerLink]="[asManager() ? '/manager/document' : '/history/id', nf(element).id]"
       >
         <mat-icon>visibility</mat-icon>
@@ -72,6 +69,8 @@
           matTooltipPosition="right"
           matTooltip=" Répondre "
           i18n-matTooltip="@@Feedback.Reply"
+          aria-label=" Répondre "
+          i18n-aria-label="@@Feedback.Reply"
           [appGiveRequestedFeedback]="nf(element).id"
         >
           <mat-icon>edit</mat-icon>

diff --git a/client/src/app/shared/feedback/feedback-list/feedback-list.component.ts b/client/src/app/shared/feedback/feedback-list/feedback-list.component.ts
@@ -21,7 +21,7 @@ import { RouterLink } from '@angular/router';
 import { BreakpointService } from '../../breakpoint';
 import { SlashModule } from '../../slash';
 import { FeedbackTypeIconPipe } from '../feedback-type-icon.pipe';
-import { NormalizedFeedback } from '../feedback.types';
+import { FeedbackType, NormalizedFeedback } from '../feedback.types';
 import { GiveRequestedFeedbackDirective } from '../give-requested-feedback.directive';
 
 @Component({
@@ -67,10 +67,6 @@ export class FeedbackListComponent implements AfterViewInit {
     return this.dataSource.data.length > this.pageSizeOptions[0];
   }
 
-  readonly viewFeedbackTooltip = $localize`:@@Action.ViewFeedback:Consulter le feedZback`;
-
-  readonly viewFeedbackRequestTooltip = $localize`:@@Action.ViewFeedbackRequest:Consulter la demande`;
-
   private isMobile = false;
 
   constructor() {
@@ -98,6 +94,12 @@ export class FeedbackListComponent implements AfterViewInit {
     return value as NormalizedFeedback;
   }
 
+  protected getActionLabel(type: FeedbackType) {
+    return type === 'received' || type === 'given'
+      ? $localize`:@@Action.ViewFeedback:Consulter le feedZback`
+      : $localize`:@@Action.ViewFeedbackRequest:Consulter la demande`;
+  }
+
   private init() {
     this.linkDataSource();
     this.applyFilter(this.filter());

diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss
@@ -31,6 +31,17 @@ h1.gbl-page-title {
   }
 }
 
+/* ----- button less ----- */
+
+.gbl-button-less {
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  line-height: inherit;
+  font: inherit;
+}
+
 /* ----- Link ----- */
 
 .gbl-link {
@@ -162,17 +173,6 @@ 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 {