Merge pull request apvarun#106 from nickvergessen/feature/105/support-aria-live-attribute

Support aria-live attribute

Author: apvarun

README.md

@@ -153,6 +153,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | offset | Object | Ability to add some offset to axis | |
 | escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
 | style | object | Use the HTML DOM Style properties to add any style directly to toast | |
+| ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
 | oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
 
 > Deprecated properties: `backgroundColor` -  use `style.background` option instead

src/toastify-es.js

@@ -26,6 +26,7 @@
  * @property {Function} onClick - Invoked when the toast is clicked
  * @property {Object} offset - Ability to add some offset to axis
  * @property {boolean} escapeMarkup - Toggle the default behavior of escaping HTML markup
+ * @property {string} ariaLive - Use the HTML DOM style property to add styles to toast
  * @property {Object} style - Use the HTML DOM style property to add styles to toast
  */
 
@@ -52,6 +53,7 @@ class Toastify {
       onClick: function() {},
       offset: { x: 0, y: 0 },
       escapeMarkup: true,
+      ariaLive: "polite",
       style: { background: "" },
     };
 
@@ -160,6 +162,7 @@ class Toastify {
      * @param {Function} [options.onClick] - Invoked when the toast is clicked
      * @param {Object} [options.offset] - Ability to add some offset to axis
      * @param {boolean} [options.escapeMarkup=true] - Toggle the default behavior of escaping HTML markup
+     * @param {string} [options.ariaLive] - Announce the toast to screen readers
      * @param {Object} [options.style] - Use the HTML DOM style property to add styles to toast
      * @private
      */
@@ -208,6 +211,11 @@ class Toastify {
         divElement.style[property] = this.options.style[property];
       }
 
+      // Announce the toast to screen readers
+      if (this.options.ariaLive) {
+        divElement.setAttribute('aria-live', this.options.ariaLive)
+      }
+
       // Adding the toast message/node
       if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
         // If we have a valid node, we insert it

src/toastify.js

@@ -43,6 +43,7 @@
     },
     offset: {x: 0, y: 0},
     escapeMarkup: true,
+    ariaLive: 'polite',
     style: {background: ''}
   };
 
@@ -83,6 +84,7 @@
       this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
       this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
       this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
+      this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
       this.options.style = options.style || Toastify.defaults.style;
       if(options.backgroundColor) {
         this.options.style.background = options.backgroundColor;
@@ -130,6 +132,11 @@
         divElement.style[property] = this.options.style[property];
       }
 
+      // Announce the toast to screen readers
+      if (this.options.ariaLive) {
+        divElement.setAttribute('aria-live', this.options.ariaLive)
+      }
+
       // Adding the toast message/node
       if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
         // If we have a valid node, we insert it