feat(accessibility): Move aria-live=polite to overlay container (#934)

scttcper · Apr 18, 2022 · 2fc890b · 2fc890b
1 parent 8a90dbb
commit 2fc890b
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -237,7 +237,9 @@ export interface ActiveToast {
 
 Put toasts in a specific div inside your application. This should probably be
 somewhere that doesn't get deleted. Add `ToastContainerModule` to the ngModule
-where you need the directive available.
+where you need the directive available. Make sure that your container has
+an `aria-live="polite"` attribute, so that any time a toast is injected into
+the container it is announced by screen readers.
 
 ```typescript
 import { BrowserModule } from '@angular/platform-browser';
@@ -274,7 +276,7 @@ import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
   selector: 'app-root',
   template: `
     <h1><a (click)="onClick()">Click</a></h1>
-    <div toastContainer></div>
+    <div aria-live="polite" toastContainer></div>
   `,
 })
 export class AppComponent implements OnInit {

diff --git a/src/app/bootstrap.toast.ts b/src/app/bootstrap.toast.ts
@@ -19,7 +19,6 @@ import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
       <div class="toast-body">
         <div
           role="alert"
-          aria-live="polite"
           [attr.aria-label]="message"
         >
           {{ message || 'default message' }}

diff --git a/src/app/pink.toast.ts b/src/app/pink.toast.ts
@@ -36,10 +36,10 @@ import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
       <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
         {{ title }}
       </div>
-      <div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
+      <div *ngIf="message && options.enableHtml" role="alert"
         [class]="options.messageClass" [innerHTML]="message">
       </div>
-      <div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
+      <div *ngIf="message && !options.enableHtml" role="alert"
         [class]="options.messageClass" [attr.aria-label]="message">
         {{ message }}
       </div>

diff --git a/src/lib/overlay/overlay-container.ts b/src/lib/overlay/overlay-container.ts
@@ -29,11 +29,13 @@ export class OverlayContainer implements OnDestroy {
 
   /**
    * Create the overlay container element, which is simply a div
-   * with the 'cdk-overlay-container' class on the document body.
+   * with the 'cdk-overlay-container' class on the document body
+   * and 'aria-live="polite"'
    */
   protected _createContainer(): void {
     const container = this._document.createElement('div');
     container.classList.add('overlay-container');
+    container.setAttribute('aria-live','polite');
     this._document.body.appendChild(container);
     this._containerElement = container;
   }

diff --git a/src/lib/toastr/toast-noanimation.component.ts b/src/lib/toastr/toast-noanimation.component.ts
@@ -29,10 +29,10 @@ import { ToastrService } from './toastr.service';
   <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
     {{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
   </div>
-  <div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
+  <div *ngIf="message && options.enableHtml" role="alert"
     [class]="options.messageClass" [innerHTML]="message">
   </div>
-  <div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
+  <div *ngIf="message && !options.enableHtml" role="alert"
     [class]="options.messageClass" [attr.aria-label]="message">
     {{ message }}
   </div>

diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts
@@ -25,10 +25,10 @@ import { ToastrService } from './toastr.service';
   <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
     {{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
   </div>
-  <div *ngIf="message && options.enableHtml" role="alertdialog" aria-live="polite"
+  <div *ngIf="message && options.enableHtml" role="alert"
     [class]="options.messageClass" [innerHTML]="message">
   </div>
-  <div *ngIf="message && !options.enableHtml" role="alertdialog" aria-live="polite"
+  <div *ngIf="message && !options.enableHtml" role="alert"
     [class]="options.messageClass" [attr.aria-label]="message">
     {{ message }}
   </div>