From f8b0552f1015e372eb795a1a78b3c4aa620d4058 Mon Sep 17 00:00:00 2001 From: Joao Henrique Silva Mendonca Date: Tue, 22 Aug 2023 14:12:03 +0100 Subject: [PATCH] feat: Add aria-live attribute for toast notifications accessibility Added the `aria-live` attribute with value 'polite' to the toast element to ensure that notifications are announced to screen readers as they appear. This improves the accessibility of the toast notifications for users who rely on screen readers. --- src/js/toast.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/js/toast.js b/src/js/toast.js index fd04a3e..afd2503 100644 --- a/src/js/toast.js +++ b/src/js/toast.js @@ -56,6 +56,10 @@ export const Toast = function (instance) { let container = getContainer(); this.toast = document.createElement('div'); + + // Add aria-live attribute to make the toast's notifications live and announce them to screen readers + this.toast.setAttribute('aria-live', 'polite'); + this.toast.classList.add('toasted'); // add classes @@ -132,6 +136,7 @@ export const Toast = function (instance) { if(container === null) { container = document.createElement('div'); + container.id = instance.id; document.body.appendChild(container); } @@ -523,4 +528,4 @@ export const Toast = function (instance) { return this; }; -export default Toast; \ No newline at end of file +export default Toast;