fix: make toasts accessible

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

lib/toast.ts

@@ -9,6 +9,44 @@ import { t } from './utils/l10n.js'
 
 import '../styles/toast.scss'
 
+/**
+ * Persistent aria-live regions that exist in the DOM before any toast is shown.
+ * Screen readers require the live region to already be present when content is added;
+ * injecting an element that already carries aria-live is unreliable (NVDA, JAWS).
+ */
+let _politeRegion: HTMLElement | null = null
+let _assertiveRegion: HTMLElement | null = null
+
+const VISUALLY_HIDDEN_STYLE = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0'
+
+function getOrCreateLiveRegion(level: 'polite' | 'assertive'): HTMLElement {
+	if (level === 'assertive' && _assertiveRegion) return _assertiveRegion
+	if (level === 'polite' && _politeRegion) return _politeRegion
+
+	const region = document.createElement('div')
+	region.setAttribute('aria-live', level)
+	region.setAttribute('aria-atomic', 'true')
+	region.setAttribute('aria-relevant', 'additions text')
+	region.style.cssText = VISUALLY_HIDDEN_STYLE
+	document.body.appendChild(region)
+
+	if (level === 'assertive') {
+		_assertiveRegion = region
+	} else {
+		_politeRegion = region
+	}
+	return region
+}
+
+function announceToLiveRegion(text: string, level: 'polite' | 'assertive'): void {
+	const region = getOrCreateLiveRegion(level)
+	// Clear first so the same message announced twice is re-read
+	region.textContent = ''
+	setTimeout(() => {
+		region.textContent = text
+	}, 50)
+}
+
 /**
  * Enum of available Toast types
  */
@@ -136,6 +174,24 @@ export function showMessage(data: string | Node, options?: ToastOptions): Toast
 		ariaLive = ToastAriaLive.ASSERTIVE
 	}
 
+	// Announce to a persistent live region – more reliable than aria-live on
+	// dynamically injected elements (NVDA+Firefox, older JAWS).
+	// Prefix the message with a translated type label so sighted users' color
+	// cue (the border) is also conveyed to screen readers (WCAG 1.4.1).
+	if (ariaLive !== ToastAriaLive.OFF) {
+		const typeLabels: Partial<Record<ToastType, string>> = {
+			[ToastType.ERROR]: t('Error'),
+			[ToastType.WARNING]: t('Warning'),
+			[ToastType.INFO]: t('Info'),
+			[ToastType.SUCCESS]: t('Success'),
+		}
+		const typePrefix = options.type && typeLabels[options.type] ? typeLabels[options.type] + ': ' : ''
+		const announceText = typeof data === 'string'
+			? data
+			: (data as Element).textContent ?? ''
+		announceToLiveRegion(typePrefix + announceText, ariaLive === ToastAriaLive.ASSERTIVE ? 'assertive' : 'polite')
+	}
+
 	const toast = Toastify({
 		[!isNode ? 'text' : 'node']: data,
 		duration: options.timeout,
@@ -153,6 +209,19 @@ export function showMessage(data: string | Node, options?: ToastOptions): Toast
 
 	toast.showToast()
 
+	// Fix accessibility of the rendered toast element
+	const toastEl = toast.toastElement as HTMLElement | null
+	if (toastEl) {
+		// role="alert" or role="status" is required – toastify only sets aria-live
+		toastEl.setAttribute('role', ariaLive === ToastAriaLive.ASSERTIVE ? 'alert' : 'status')
+
+		// The close button is icon-only; give it an accessible name
+		const closeBtn = toastEl.querySelector<HTMLButtonElement>('.toast-close')
+		if (closeBtn) {
+			closeBtn.setAttribute('aria-label', t('Close'))
+		}
+	}
+
 	return toast
 }
 
@@ -208,6 +277,8 @@ export function showLoading(text: string, options?: ToastOptions): Toast {
 	const loader = document.createElement('span')
 	loader.innerHTML = LoaderSvg
 	loader.classList.add('toast-loader')
+	// The spinner is decorative – the toast text already conveys the loading state
+	loader.setAttribute('aria-hidden', 'true')
 
 	// Generate loader layout
 	const loaderContent = document.createElement('span')

styles/toast.scss

@@ -69,10 +69,17 @@
 			margin-left: 12px;
 		}
 
-		&:hover, &:focus, &:active {
+		&:hover, &:focus-visible, &:active {
 			cursor: pointer;
 			opacity: 1;
 		}
+
+		// Visible focus indicator (WCAG 2.4.11 Focus Appearance)
+		&:focus-visible {
+			outline: 2px solid var(--color-primary-element, Highlight);
+			outline-offset: 2px;
+			border-radius: var(--border-radius);
+		}
 	}
 
 	&.toastify-top {