accessibility updates

graycoreio · Oct 2, 2023 · e9937f9 · e9937f9
1 parent b31d47f
commit e9937f9
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/libs/design/toast/src/toast/toast-template.component.ts b/libs/design/toast/src/toast/toast-template.component.ts
@@ -31,7 +31,9 @@ import { DaffToast } from '../toast';
       [status]="item.status ?? null"
       (closeToast)="item.dismiss()"
       [@slideIn]="slideAnimation"
-      [attr.role]="item.actions ? 'alertdialog' : undefined">
+      [attr.role]="item.actions ? 'alertdialog' : undefined"
+      [attr.aria-labelledby]="item.actions ? item.title : undefined"
+      [attr.aria-describedby]="item.actions ? item.message : undefined">
       <div daffToastTitle>{{ item.title }}</div>
       <div daffToastMessage>{{ item.message }}</div>
       <div daffToastActions *ngIf="item.actions">
@@ -50,39 +52,39 @@ import { DaffToast } from '../toast';
           [status]="action.status"
           [color]="action.color"
           [size]="action.size"
-          [attr.aria-label]="action.content + ' ' + 'button'"
+          [attr.aria-label]="action.content"
           (click)="item.actions$.next({ event: $event, action})">
             {{ action.content }}
         </button>
         <button type="button" *ngSwitchCase="'stroked'" daff-stroked-button
           [status]="action.status"
           [color]="action.color"
           [size]="action.size"
-          [attr.aria-label]="action.content + ' ' + 'button'"
+          [attr.aria-label]="action.content"
           (click)="item.actions$.next({ event: $event, action})">
             {{ action.content }}
         </button>
         <button type="button" *ngSwitchCase="'raised'" daff-raised-button
           [status]="action.status"
           [color]="action.color"
           [size]="action.size"
-          [attr.aria-label]="action.content + ' ' + 'button'"
+          [attr.aria-label]="action.content"
           (click)="item.actions$.next({ event: $event, action})">
             {{ action.content }}
         </button>
         <button type="button" *ngSwitchCase="'flat'" daff-flat-button
           [status]="action.status"
           [color]="action.color"
           [size]="action.size"
-          [attr.aria-label]="action.content + ' ' + 'button'"
+          [attr.aria-label]="action.content"
           (click)="item.actions$.next({ event: $event, action})">
             {{ action.content }}
         </button>
         <button type="button" *ngSwitchCase="'underline'" daff-underline-button
           [status]="action.status"
           [color]="action.color"
           [size]="action.size"
-          [attr.aria-label]="action.content + ' ' + 'button'"
+          [attr.aria-label]="action.content"
           (click)="item.actions$.next({ event: $event, action})">
             {{ action.content }}
         </button>