Merge pull request #622 from nextcloud/bugfix/255/aria-live-attribute

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
 }
 
 /**
@@ -106,6 +126,13 @@ export function showMessage(data: string|Node, options?: ToastOptions): Toast {
 
 	const isNode = data instanceof Node
 
+	let ariaLive = ToastAriaLive.POLITE
+	if (options.ariaLive) {
+		ariaLive = options.ariaLive.toString()
+	} else if (options.type === ToastType.ERROR || options.type === ToastType.UNDO) {
+		ariaLive = ToastAriaLive.ASSERTIVE
+	}
+
 	const toast = Toastify({
 		[!isNode ? 'text' : 'node']: data,
 		duration: options.timeout,
@@ -118,8 +145,11 @@ export function showMessage(data: string|Node, options?: ToastOptions): Toast {
 		backgroundColor: '',
 		className: 'dialogs ' + classes,
 		escapeMarkup: !options.isHTML,
+		ariaLive,
 	})
+
 	toast.showToast()
+
 	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 {
@@ -31,6 +27,7 @@ declare module 'toastify-js' {
         callback?: Function,
         onClick?: Function,
         escapeMarkup?: boolean,
+        ariaLive?: String,
     }
 
     export default function Toastify(a: ToastifyOptions): Toast;

package.json

@@ -28,7 +28,7 @@
 		"@nextcloud/l10n": "^1.3.0",
 		"@nextcloud/typings": "^1.0.0",
 		"core-js": "^3.6.4",
-		"toastify-js": "^1.10.0"
+		"toastify-js": "^1.12.0"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.8.4",