diff --git a/README.md b/README.md index 0d3140e..4750864 100644 --- a/README.md +++ b/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 diff --git a/src/toastify-es.js b/src/toastify-es.js index 6d2767e..894fa8e 100644 --- a/src/toastify-es.js +++ b/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 diff --git a/src/toastify.js b/src/toastify.js index 9f334b9..f066811 100644 --- a/src/toastify.js +++ b/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