diff --git a/l10n/messages.pot b/l10n/messages.pot index 20262517..c78fe921 100644 --- a/l10n/messages.pot +++ b/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 "" diff --git a/lib/index.ts b/lib/index.ts index f582b1fe..1239e1f2 100644 --- a/lib/index.ts +++ b/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' diff --git a/lib/toast.ts b/lib/toast.ts index 56623624..a472e9ce 100644 --- a/lib/toast.ts +++ b/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 } diff --git a/lib/toastify.d.ts b/lib/toastify.d.ts index 6573e0a5..d8b2dc64 100644 --- a/lib/toastify.d.ts +++ b/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; diff --git a/package-lock.json b/package-lock.json index 2dfa5b00..e565bd37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -3685,9 +3685,9 @@ } }, "node_modules/toastify-js": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.11.2.tgz", - "integrity": "sha512-bMBNKhZLPX/sDhpwM7KHIRUTtqCylQeoZDiEWy5zE7iDUJ92XmP8AKgDAp9rXx6pR5GXGFtQHHoH62toahbHgQ==" + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz", + "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==" }, "node_modules/ts-toolbelt": { "version": "9.6.0", @@ -6657,9 +6657,9 @@ "dev": true }, "toastify-js": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.11.2.tgz", - "integrity": "sha512-bMBNKhZLPX/sDhpwM7KHIRUTtqCylQeoZDiEWy5zE7iDUJ92XmP8AKgDAp9rXx6pR5GXGFtQHHoH62toahbHgQ==" + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz", + "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==" }, "ts-toolbelt": { "version": "9.6.0", diff --git a/package.json b/package.json index 52a6688d..ada65a8a 100644 --- a/package.json +++ b/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",