added aria-live and role attrs to toasts

blackbaud · Apr 30, 2018 · c6c847b · c6c847b
1 parent e548824
commit c6c847b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/modules/toast/toast-container.component.html b/src/modules/toast/toast-container.component.html
@@ -1,4 +1,6 @@
-<div class="sky-toaster">
+<div
+  role="alert"
+  class="sky-toaster">
   <sky-toast
     *ngFor="let message of messages | async"
     [message]="message">

diff --git a/src/modules/toast/toast-messages/toast.component.html b/src/modules/toast/toast-messages/toast.component.html
@@ -1,11 +1,12 @@
 <aside>
   <div
     class="sky-toast"
-    [ngClass]="{'sky-toast-info':     message.toastType=='info',
-                'sky-toast-warning':   message.toastType=='warning',
-                'sky-toast-danger':   message.toastType=='danger',
-                'sky-toast-success':  message.toastType=='success',
-                'sky-toast-closing': message.isClosing | async}">
+    [ngClass]="{'sky-toast-info':     message.toastType==='info',
+                'sky-toast-warning':   message.toastType==='warning',
+                'sky-toast-danger':   message.toastType==='danger',
+                'sky-toast-success':  message.toastType==='success',
+                'sky-toast-closing': message.isClosing | async}"
+    [attr.aria-live]="message.toastType==='danger' ? 'assertive' : 'polite'">
     <div
       class="sky-toast-content"
       (click)="message.close()">