toastify-js - npm Package Compare versions

Comparing version 1.11.2 to 1.12.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## [1.12.0] - 2022-07-21
+
+* Accessibility fix: Support aria-live for the toast
+* Accessibility fix: Add aria-label for close icon
+
 ## [1.11.2] - 2021-10-06
@@ -7,0 +12,0 @@

package.json

 {
   "name": "toastify-js",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Toastify is a lightweight, vanilla JS toast notification library.",
@@ -5,0 +5,0 @@ "main": "./src/toastify.js",

README.md

@@ -6,3 +6,3 @@
 
-[![toastify-js](https://img.shields.io/badge/toastify--js-1.11.2-brightgreen.svg)](https://www.npmjs.com/package/toastify-js)
+[![toastify-js](https://img.shields.io/badge/toastify--js-1.12.0-brightgreen.svg)](https://www.npmjs.com/package/toastify-js)
 ![MIT License](https://img.shields.io/npm/l/toastify-js)
@@ -89,3 +89,3 @@
     background: "linear-gradient(to right, #00b09b, #96c93d)",
-  }
+  },
   onClick: function(){} // Callback after click
@@ -158,2 +158,3 @@ }).showToast();
 | 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 |
@@ -160,0 +161,0 @@

src/toastify-es.js

 /*!
- * Toastify js 1.11.2
+ * Toastify js 1.12.0
  * https://github.com/apvarun/toastify-js
@@ -29,2 +29,3 @@ * @license MIT licensed
  * @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
@@ -56,2 +57,3 @@ */
       escapeMarkup: true,
+      ariaLive: "polite",
       style: { background: "" },
@@ -66,3 +68,3 @@ };
        */
-      this.version = "1.11.2";
+      this.version = "1.12.0";
 
@@ -166,2 +168,3 @@ /**
      * @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
@@ -215,2 +218,7 @@ * @private
 
+      // Announce the toast to screen readers
+      if (this.options.ariaLive) {
+        divElement.setAttribute('aria-live', this.options.ariaLive)
+      }
+
       // Adding the toast message/node
@@ -246,7 +254,8 @@ if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
         // Create a span for close element
-        let closeElement = document.createElement("span");
+        let closeElement = document.createElement("button");
+        closeElement.type = "button";
+        closeElement.setAttribute("aria-label", "Close");
+        closeElement.className = "toast-close";
         closeElement.innerHTML = "✖";
 
-        closeElement.className = "toast-close";
-
         // Triggering the removal of toast from DOM on close click
@@ -253,0 +262,0 @@ closeElement.addEventListener(

src/toastify.js

 /*!
- * Toastify js 1.11.2
+ * Toastify js 1.12.0
  * https://github.com/apvarun/toastify-js
@@ -21,3 +21,3 @@ * @license MIT licensed
     // Library version
-    version = "1.11.2";
+    version = "1.12.0";
 
@@ -47,2 +47,3 @@ // Set the default global options
     escapeMarkup: true,
+    ariaLive: 'polite',
     style: {background: ''}
@@ -88,2 +89,3 @@ };
       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;
@@ -136,2 +138,7 @@ if(options.backgroundColor) {
 
+      // Announce the toast to screen readers
+      if (this.options.ariaLive) {
+        divElement.setAttribute('aria-live', this.options.ariaLive)
+      }
+
       // Adding the toast message/node
@@ -167,7 +174,8 @@ if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
         // Create a span for close element
-        var closeElement = document.createElement("span");
+        var closeElement = document.createElement("button");
+        closeElement.type = "button";
+        closeElement.setAttribute("aria-label", "Close");
+        closeElement.className = "toast-close";
         closeElement.innerHTML = "✖";
 
-        closeElement.className = "toast-close";
-
         // Triggering the removal of toast from DOM on close click
@@ -174,0 +182,0 @@ closeElement.addEventListener(

No alert changes

Improved metrics

Total package byte prevSize

78848

increased by1.6%

Lines of code

999

increased by2.36%

Number of lines in readme file

440

increased by0.23%

No dependency changes