fix(notifications): replace role="alert" with aria-live="polite" (#268)

* fix(a11y): replace role="alert" with aria-live="polite" for
Notifications

* fix(Notification): warning uses alert role

* docs(Notification): usage for alert roles and aria-live

Author: hellobrian

src/components/notification/README.md

@@ -41,3 +41,26 @@ Use these modifiers with `.bx--inline-notification` class.
 | selectorButton                | `[data-notification-btn]`    | The selector to find the close button in the component    |
 | eventBeforeDeleteNotification | `notification-before-delete` | Event before deleting the notification                    |
 | eventAfterDeleteNotification  | `notification-after-delete`  | Event after deleting the notification                     |
+
+
+### FAQ 
+
+#### Using aria live regions and alert roles
+
+Using `role="alert"` is an aggressive call to action that the prompts a screen reader user to take immediate action on something that changed in the UI. This is usually reserved for things that are important or time-sensitive like:
+
+- An invalid value was entered into a form field 
+- The user's login session is about to expire
+- The connection to the server was lost, local changes will not be saved
+
+Use the alert role sparingly and only in situations where the user's immediate attention is required. 
+Dynamic changes that are less urgent should use a less aggressive method, such as `aria-live="polite"` or other live region roles. 
+
+Don't use an alert role on all notifications.
+
+By default, we recommend that error and warning notifications use `role="alert"`, while success and info notifications use `aria-live="polite"`. 
+But as always, this will depend on the urgency of the notification. 
+
+**Sources:**
+- [Use the alert role - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role)
+- [ARIA Live Regions - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)

src/components/notification/inline-notification.html

@@ -1,4 +1,3 @@
-<!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
   <div class="bx--inline-notification__details">
     <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
@@ -16,8 +15,7 @@
   </button>
 </div>
 
-<!--replace xlink:href with correct svg icon API endpoint-->
-<div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert">
+<div data-notification class="bx--inline-notification bx--inline-notification--info" aria-live="polite">
   <div class="bx--inline-notification__details">
     <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
       <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
@@ -34,8 +32,7 @@
   </button>
 </div>
 
-<!--replace xlink:href with correct svg icon API endpoint-->
-<div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
+<div data-notification class="bx--inline-notification bx--inline-notification--success" aria-live="polite">
   <div class="bx--inline-notification__details">
     <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
       <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
@@ -52,7 +49,6 @@
   </button>
 </div>
 
-<!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
   <div class="bx--inline-notification__details">
     <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">

src/components/notification/toast-notification.html

@@ -1,4 +1,3 @@
-<!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
   <div class="bx--toast-notification__details">
     <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
@@ -15,7 +14,7 @@ <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
   </button>
 </div>
 
-<div data-notification class="bx--toast-notification bx--toast-notification--info" role="alert">
+<div data-notification class="bx--toast-notification bx--toast-notification--info" aria-live="polite">
   <div class="bx--toast-notification__details">
     <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
     <p class="bx--toast-notification__subtitle">Subtitle: Your application was stopped.</p>
@@ -28,7 +27,7 @@ <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
   </button>
 </div>
 
-<div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
+<div data-notification class="bx--toast-notification bx--toast-notification--success" aria-live="polite">
   <div class="bx--toast-notification__details">
     <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
     <p class="bx--toast-notification__subtitle">Subtitle: Your application was stopped.</p>