client(fix): dialog-tooltip a11y (#698)

Zenika · Sep 7, 2024 · 193f145 · 193f145
1 parent 4eef920
commit 193f145
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 25 deletions.
diff --git a/client/src/app/demo/dialog-tooltip-demo/dialog-tooltip-demo.component.html b/client/src/app/demo/dialog-tooltip-demo/dialog-tooltip-demo.component.html
@@ -1,21 +1,34 @@
 <p>
-  Open dialog tooltip with content as string
-  <mat-icon
-    style="vertical-align: bottom"
+  Open dialog tooltip using content as string
+
+  <button
+    type="button"
+    class="gbl-button-less gbl-link align-middle"
     appDialogTooltip
+    ariaLabelFromDialogTitle
     dialogTitle="Dialog tooltip"
     dialogContent="Dialog content as string."
   >
-    lightbulb
-  </mat-icon>
+    <mat-icon>lightbulb</mat-icon>
+  </button>
 </p>
 
 <p>
-  Open dialog tooltip with content as template
-  <mat-icon appDialogTooltip dialogTitle="Dialog tooltip" [dialogContent]="dialogTooltipTemplate">lightbulb</mat-icon>
+  Open dialog tooltip using content as template
+
+  <button
+    type="button"
+    class="gbl-button-less gbl-link align-middle"
+    appDialogTooltip
+    ariaLabelFromDialogTitle
+    dialogTitle="Dialog tooltip"
+    [dialogContent]="dialogTooltipTemplate"
+  >
+    <mat-icon>lightbulb</mat-icon>
+  </button>
 
   <ng-template #dialogTooltipTemplate>
-    <mat-icon>beach_access</mat-icon>
+    <mat-icon class="me-1 align-middle">beach_access</mat-icon>
     Dialog content as template.
   </ng-template>
 </p>
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
@@ -52,17 +52,20 @@ <h1 class="gbl-page-title mat-headline-large">
       <ng-container i18n="@@Component.GiveFeedback.Share">
         Partager le feedZback avec le manager de votre collègue
       </ng-container>
-      <mat-icon
-        class="gbl-link ms-1 align-bottom"
+
+      <button
+        type="button"
+        class="gbl-button-less gbl-link ms-1 align-middle"
         appDialogTooltip
-        dialogWidth="600px"
+        ariaLabelFromDialogTitle
         dialogTitle="Pourquoi le partage du feedZback est recommandé ?"
         dialogContent="En partageant votre feedZback, votre collègue et son manager pourront échanger ensemble et ainsi bénéficier au mieux de son contenu."
+        dialogWidth="600px"
         i18n-dialogTitle="@@Component.GiveFeedback.ShareFeedbackMessageTitle"
         i18n-dialogContent="@@Component.GiveFeedback.ShareFeedbackMessageContent"
       >
-        help
-      </mat-icon>
+        <mat-icon>help</mat-icon>
+      </button>
     </mat-slide-toggle>
   </div>
 

diff --git a/client/src/app/give-feedback/give-requested-feedback/give-requested-feedback.component.html b/client/src/app/give-feedback/give-requested-feedback/give-requested-feedback.component.html
@@ -15,17 +15,19 @@ <h1 class="gbl-page-title mat-headline-large">
     <strong i18n="@@Component.GiveRequestedFeedback.Message2">
       Notez que votre réponse sera partagée avec son manager.
     </strong>
-    <mat-icon
-      class="gbl-link ms-1 align-bottom"
+    <button
+      type="button"
+      class="gbl-button-less gbl-link align-middle"
       appDialogTooltip
-      dialogWidth="600px"
+      ariaLabelFromDialogTitle
       dialogTitle="FeedZback partagé"
       dialogContent="Le destinataire du feedZback et son manager pourront échanger ensemble et ainsi bénéficier au mieux de son contenu."
+      dialogWidth="600px"
       i18n-dialogTitle="@@Component.GiveRequestedFeedback.ShareFeedbackMessageTitle"
       i18n-dialogContent="@@Component.GiveRequestedFeedback.ShareFeedbackMessageContent"
     >
-      help
-    </mat-icon>
+      <mat-icon>help</mat-icon>
+    </button>
   }
 </app-message>
 

diff --git a/client/src/app/request-feedback/request-feedback.component.html b/client/src/app/request-feedback/request-feedback.component.html
@@ -87,17 +87,19 @@ <h1 class="gbl-page-title mat-headline-large">
   <div class="gbl-form-field">
     <mat-slide-toggle [formControl]="form.controls.shared">
       <ng-container i18n="@@Component.RequestFeedback.Share">Partager le feedZback avec votre manager</ng-container>
-      <mat-icon
-        class="gbl-link ms-1 align-bottom"
+      <button
+        type="button"
+        class="gbl-button-less gbl-link ms-1 align-middle"
         appDialogTooltip
-        dialogWidth="600px"
+        ariaLabelFromDialogTitle
         dialogTitle="Pourquoi le partage du feedZback est recommandé ?"
         dialogContent="En partageant le feedZback avec votre manager, vous pourrez échanger ensemble et ainsi bénéficier au mieux de son contenu. Notez que le message de la demande fait partie du feedZback et sera donc visible par votre manager."
+        dialogWidth="600px"
         i18n-dialogTitle="@@Component.RequestFeedback.ShareFeedbackMessageTitle"
         i18n-dialogContent="@@Component.RequestFeedback.ShareFeedbackMessageContent"
       >
-        help
-      </mat-icon>
+        <mat-icon>help</mat-icon>
+      </button>
     </mat-slide-toggle>
   </div>
 

diff --git a/client/src/app/shared/dialog-tooltip/dialog-tooltip.directive.ts b/client/src/app/shared/dialog-tooltip/dialog-tooltip.directive.ts
@@ -1,12 +1,11 @@
-import { Directive, TemplateRef, inject, input } from '@angular/core';
+import { Directive, ElementRef, TemplateRef, booleanAttribute, effect, inject, input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogTooltipComponent } from './dialog-tooltip.component';
 import { DialogTooltipData } from './dialog-tooltip.types';
 
 @Directive({
   selector: '[appDialogTooltip]',
   host: {
-    '[style.cursor]': '"pointer"',
     '(click)': 'open($event)',
   },
   standalone: true,
@@ -18,8 +17,20 @@ export class DialogTooltipDirective {
 
   dialogWidth = input<string>();
 
+  ariaLabelFromDialogTitle = input(false, { transform: booleanAttribute });
+
   private dialog = inject(MatDialog);
 
+  constructor() {
+    const { nativeElement } = inject<ElementRef<HTMLElement>>(ElementRef);
+    effect(() => {
+      if (!this.ariaLabelFromDialogTitle()) {
+        return;
+      }
+      nativeElement.ariaLabel = this.dialogTitle() ?? null;
+    });
+  }
+
   open(event?: Event) {
     event?.preventDefault();