From d09f1752ccd08ee5a87a02e0f0e5d2c3fe89fd3a Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Wed, 20 Jul 2022 17:20:54 +0200 Subject: [PATCH 1/4] Set aria-live default and allow to overwrite it Signed-off-by: Joas Schilling --- lib/index.ts | 1 + lib/toast.ts | 30 ++++++++++++++++++++++++++++++ lib/toastify.d.ts | 6 +----- 3 files changed, 32 insertions(+), 5 deletions(-) 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..d52d365b 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 } /** @@ -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 } diff --git a/lib/toastify.d.ts b/lib/toastify.d.ts index 6573e0a5..3de3dd5c 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 { From 8aac4f0ea47415d66d3cd11c2160c8016acb5358 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Wed, 20 Jul 2022 17:30:34 +0200 Subject: [PATCH 2/4] Fix line count in l10n Signed-off-by: Joas Schilling --- l10n/messages.pot | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 "" From 1f5da5eae29696637d388b735dc1f5ffdf603f18 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Wed, 20 Jul 2022 22:14:16 +0200 Subject: [PATCH 3/4] Use ariaLive attribute supported by toastify-js Signed-off-by: Joas Schilling --- lib/toast.ts | 16 ++++++++-------- lib/toastify.d.ts | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/lib/toast.ts b/lib/toast.ts index d52d365b..a472e9ce 100644 --- a/lib/toast.ts +++ b/lib/toast.ts @@ -126,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, @@ -138,18 +145,11 @@ export function showMessage(data: string|Node, options?: ToastOptions): Toast { backgroundColor: '', className: 'dialogs ' + classes, escapeMarkup: !options.isHTML, + ariaLive, }) 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 } diff --git a/lib/toastify.d.ts b/lib/toastify.d.ts index 3de3dd5c..d8b2dc64 100644 --- a/lib/toastify.d.ts +++ b/lib/toastify.d.ts @@ -27,6 +27,7 @@ declare module 'toastify-js' { callback?: Function, onClick?: Function, escapeMarkup?: boolean, + ariaLive?: String, } export default function Toastify(a: ToastifyOptions): Toast; From c6148231a888769b079b7dec59f1a01146202b79 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Thu, 21 Jul 2022 10:51:57 +0200 Subject: [PATCH 4/4] Bump toastify-js Signed-off-by: Joas Schilling --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) 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",