Set aria-live default and allow to overwrite it

l10n/messages.pot

@@ -2,6 +2,6 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: lib/toast.ts:193
+#: lib/toast.ts:223
 msgid "Undo"
 msgstr ""

lib/index.ts

@@ -1,3 +1,4 @@
 export { FilePicker, FilePickerType, FilePickerBuilder, getFilePickerBuilder } from './filepicker'
 export { TOAST_UNDO_TIMEOUT, TOAST_DEFAULT_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from './toast'
+export { TOAST_ARIA_LIVE_OFF, TOAST_ARIA_LIVE_POLITE, TOAST_ARIA_LIVE_ASSERTIVE } from './toast'
 export { showMessage, showSuccess, showWarning, showInfo, showError, showUndo } from './toast'

lib/toast.ts

@@ -32,6 +32,16 @@ class ToastType {
 	static readonly UNDO = 'toast-undo';
 }
 
+export const TOAST_ARIA_LIVE_OFF = 'off'
+export const TOAST_ARIA_LIVE_POLITE = 'polite'
+export const TOAST_ARIA_LIVE_ASSERTIVE = 'assertive'
+
+class ToastAriaLive {
+	static readonly OFF = TOAST_ARIA_LIVE_OFF;
+	static readonly POLITE = TOAST_ARIA_LIVE_POLITE;
+	static readonly ASSERTIVE = TOAST_ARIA_LIVE_ASSERTIVE;
+}
+
 export const TOAST_UNDO_TIMEOUT = 10000
 export const TOAST_DEFAULT_TIMEOUT = 7000
 export const TOAST_PERMANENT_TIMEOUT = -1
@@ -72,6 +82,16 @@ export interface ToastOptions {
 	 * Specify the element to attach the toast element to (for testing)
 	 */
 	selector?: string
+
+	/**
+	 * Whether the messages should be announced to screen readers.
+	 * See {ToastAriaLive} for types
+	 * See the following docs for an explanation when to use which:
+	 * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+	 *
+	 * By default, errors are announced assertive and other messages "polite".
+	 */
+	ariaLive?: ToastAriaLive
 }
 
 /**
@@ -119,7 +139,17 @@ export function showMessage(data: string|Node, options?: ToastOptions): Toast {
 		className: 'dialogs ' + classes,
 		escapeMarkup: !options.isHTML,
 	})
+
 	toast.showToast()
+
+	if (options.ariaLive) {
+		toast.toastElement.setAttribute('aria-live', options.ariaLive.toString())
+	} else if (options.type === ToastType.ERROR || options.type === ToastType.UNDO) {
+		toast.toastElement.setAttribute('aria-live', ToastAriaLive.ASSERTIVE)
+	} else {
+		toast.toastElement.setAttribute('aria-live', ToastAriaLive.POLITE)
+	}
+
 	return toast
 }
 

lib/toastify.d.ts

@@ -1,13 +1,9 @@
 declare interface Toast {
-	toastElement: ToastElement;
+	toastElement: HTMLElement;
 	showToast(): void;
 	hideToast(): void;
 }
 
-declare interface ToastElement {
-	toastify: HTMLElement;
-}
-
 declare module 'toastify-js' {
 
     interface ToastifyOptions {