Add accessible toast queue with role=status (#458) - #895
Open
Dickson2015 wants to merge 4 commits into
Open
Conversation
- Move Shift+R keyboard-shortcut effect below handleMarkAllAsRead to avoid referencing the const callback before initialization (TDZ ReferenceError on every render of NotificationCenter). - Use the existing OpenPanelHarness in UndoToast tests instead of a no-op dummy opener so the panel actually opens. - Add docs/TOAST_QUEUE.md covering the accessible toast queue API, ARIA semantics, and visible behaviour; link it from the README.
- NotificationCenter: normalize the Shift+R key check so the shortcut works when the key event reports 'R' (uppercase) instead of 'r' - NotificationBell: restore label prop + one-shot bell-pulse on danger/error arrivals, with a ref-held timer (cleared on unmount only) so a mid-animation notifications change cannot stick the pulse - NotificationBell.css: add bellPulse keyframes + reduced-motion fallback - NotificationBell.test.tsx: remove unused rerender binding, add a sticky-pulse regression test - App.tsx: restore CollateralSwap import dropped by the toast queue PR - docs: document bell label prop, pulse behaviour, em-dash aria-label format, and updated test count (ACCESSIBILITY.md, NOTIFICATION_CENTER.md) Toast/notification suite: 164 tests passing across repeated runs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #458 — Add accessible toast queue with
role=status.A single, centralized toast queue for transient status messages. Mounted once in
App.tsxinsideNotificationProvider, it renders every active toast in arole="status"live region — WCAG 2.1 SC 4.1.3 (Status Messages).What's included
src/components/ToastContainer.tsx(new) — centralized queue component mounted inApp.tsx; outer container usesrole="status"+aria-live="polite"+aria-atomic="true"+aria-label="Notifications"src/components/notifications/ToastContainer.tsx—ToastItempresentational component with per-severity semantics: success/info/warning →role="status"+aria-live="polite"; error/danger →role="alert"+aria-live="assertive"src/hooks/useToast.ts— typed convenience helpers (success,error,warning,info,dismiss)docs/TOAST_QUEUE.md(new) — API, ARIA semantics, visible behaviour, files, and test coverage; linked from the READMEFixes included on this branch
const useCallbackbefore initialization (ReferenceError on every render); moved belowhandleMarkAllAsReadso the dep array can reference it safelye.key === 'r'but Shift+R reports'R'; normalized withtoLowerCase()so the shortcut actually workslabelprop and one-shotbell-pulseon danger/error arrivals (feature dropped in an earlier rewrite but still covered by tests); pulse timer held in a ref and cleared on unmount only, so a mid-animationnotificationschange can't stick the pulse;prefers-reduced-motion: reducefallback addedimport CollateralSwap from "./pages/CollateralSwap"inApp.tsx(dropped accidentally while wiring inToastContainer, breaking the/collateral-swaproute)ToastContainersuite (17 tests), per-severity role tests, sticky-pulse regression test, contrast tests; removed an unused bindingValidation
ToastContainer,notifications/ToastContainer,UndoToast,NotificationCenter,NotificationBell,__tests__/NotificationCenter,safe-area)tsc -bintroduces no new errors in touched filesAccessibility Checklist
ToastContainer.contrast.test.tsrole="status"/role="alert",aria-live,aria-atomic,aria-label)prefers-reduced-motionis respected