Five requirements. Seven React toast libraries. The two that pass are the two nobody installs.
The region must be in the DOM before the message arrives. Dynamically adding an already-populated role="alert" node "generally does not lead to an announcement" [7].
role="status" for everything that isn't urgent. Assertive interrupts mid-sentence and assistive tech may discard queued messages [9][5].
A toast portalled to the end of <body> is after everything in tab order and may vanish first. The answer is a landmark plus a hotkey — F6, F8, Alt+T [29].
Pause-on-hover is a mouse feature. The accessible version pauses on hover and focus and window blur [16].
An auto-dismissing toast is a content-set time limit. SC 2.2.1 (Level A) wants it off, ×10-adjustable or extendable — unless the information exists elsewhere [1].
| Requirement 7 libraries · main branch, Jul 2026 | Base UI⭐ 10.3k | React Aria⭐ 15.7k · alpha | Radix⭐ 19.1k | Sonner⭐ 12.6k | react-toastify⭐ 13.4k | react-hot-toast⭐ 11k | notistack⭐ 4.1k |
|---|---|---|---|---|---|---|---|
| REQ-01 Pre-mounted live region Region in the DOM before the message [7] | ✓Viewport aria-live="polite" + separate role="alert" region [31] |
✓alert region alongside a non-modal alertdialog [13] |
~Portal'd announce node, text on the next frame for NVDA [15] — but #3634 reports aria-live="off" [14] |
✓Persistent <section aria-live="polite">, fixed after #306 [17] |
✓Container carries aria-live since v11 [24] |
✗ARIA props spread onto the message div that mounts with its text [26] | ✗role="alert" on a node that mounts already populated [28] |
| REQ-02 Polite default / assertive exception Errors may interrupt. Success may not [5] | ✓priority: 'low' | 'high' [30] |
✓Priority split, documented [29] | ✓type: 'foreground' | 'background' → assertive / polite [16] |
~Polite only. No assertive anywhere in the source — toast.error() waits its turn [18] |
✗Inverted. Every toast defaults to role="alert" — your success message interrupts [21] |
~Right polarity (status/polite) but no split; #336 open on the ARIA API [25] |
✗alert for all variants, including success [28] |
| REQ-03 Keyboard route Landmark + hotkey, named in the label [29] | ✓F6 force-focuses the viewport landmark [31] | ✓F6/⇧F6; focus restored on last close [29] | ✓F8, and the hotkey is in the region's accessible name [15] | ✓Alt+T; container tabIndex={-1}, toasts tabIndex={0} [18] |
✓Alt+T, added in v11 (Dec 2024) [23] | ✗Plain <div>s. No landmark, no hotkey, no tabIndex [26] |
✗No landmark, no hotkey [28] |
| REQ-04 Pause on focus Not just hover [16] | ✓Hover + focus + document hidden [30] | ✓Hover + focus + window blur [29] | ✓"Pauses closing on hover, focus and window blur" [16] | ✓Full matrix incl. isDocumentHidden → pauseTimer() [18] |
✗pauseOnFocusLoss is window blur, not element focus [21] |
✗onMouseEnter / onMouseLeave only [26] |
✗MUI Snackbar onMouseEnter only [28] |
| REQ-05 Survivable timing SC 2.2.1, Level A [1] | ~5000 ms; 0 disables auto-dismiss [30] |
✓No auto-dismiss by default; docs say don't auto-dismiss critical info [29] | ~5000 ms default [15] | ✗4000 ms. Flagged as a 2.2.1 failure by the Apr 2026 audit [20] | ~5000 ms default [24] | ✗4000 ms (errors too; loading is ∞) [27] |
~5000 ms (MUI Snackbar) [28] |
| Grade | A9 / 10 | A10 / 10 | B8 / 10 | C7 / 10 | D5 / 10 | F1 / 10 | F1 / 10 |
Every cell in REQ-05 grades a developer default. Not one of the seven exposes an end-user duration control — which is what SC 2.2.1 actually asks for. The escape hatch is real, though: a timer needs no adjustment "if there is an alternative that does not rely on a timer" [1]. A toast that is the only carrier of its information has no such alternative.
REQ-04 is worth less than it looks. A screen-reader user reading a toast with the virtual cursor generates no focus event. Pause-on-focus never fires for them; they are racing the timer like everyone else [10].
The toast shadcn/ui puts in your app scores C. The two that score A ship in almost nobody's.
Radix ⭐ 19.1k has the most stars and the right design — and an open bug saying its own docs demo announces nothing [14]. Popularity in this category tracked one scaffolding default, not one audit.
The correct model. Each toast root is a non-modal dialog (or alertdialog when priority is high), so its buttons stay reachable [32] — and the announcement lives in a separate pre-mounted region. Only demerit: raise the 5 s default.
role: isHighPriority ? 'alertdialog' : 'dialog'
Best documented, least shippable. Same split model — alert region inside a non-modal alertdialog [13] — plus F6 landmark cycling and focus restoration on the last close. The only library whose docs tell you not to auto-dismiss. It is also the only one still in alpha.
"Only auto-dismiss toasts when the information is not critical, or may be found elsewhere."
Right design, unverified delivery. Hard-codes role="status" for every toast on purpose and modulates urgency through aria-live instead; renders the announce text on the next frame to beat NVDA's mount-time swallow [15]. Then #3634 (open, July 2025) reports aria-live="off" landing on that very node in the official demo, across Chrome, Safari and Firefox [14]. Pin-check your version and test with a real screen reader.
// Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
Polite about everything, including your errors. There is no assertive path anywhere in src/index.tsx — toast.error() queues behind whatever the screen reader is already reading [18]. Default lifetime 4000 ms, flagged as an SC 2.2.1 failure [20]. Good bones otherwise, and the only library in the batch shipping its own reduced-motion guard [19]. Set duration={8000} and closeButton; don't route urgent errors through it.
const TOAST_LIFETIME = 4000;
aria-live="polite" aria-atomic="false"
Half-fixed, and wrong in the half that's left. v11 (Dec 2024) gave the container a real live region and added Alt+T [23] — then defaults every toast to role="alert", so a "Saved!" interrupts the sentence a user was listening to [21]. Issue #1122 (open) reports those role="alert" toasts announced by nothing at all in Firefox + Orca [22]. Set role="status" globally and it climbs.
role: 'alert', 'aria-label': 'Notifications Alt+T'
Worst of the group. No persistent live region — the ARIA props are spread onto the message div that mounts already holding its text, i.e. the exact pattern MDN says produces no announcement [7]. No landmark, no hotkey, toasts aren't focusable, pause fires only on onMouseEnter [26]. Its Undo buttons are decorative for keyboard users.
ariaProps: { role: 'status', 'aria-live': 'polite' }
— spread onto a node that mounts populated
The textbook anti-pattern, on every variant. role="alert" sits directly on the snackbar content element, which mounts already populated — for success and info too [28]. So it is simultaneously the most interrupting design on paper and, per MDN, the one most likely to announce nothing at all.
role="alert" aria-describedby={ariaDescribedby}
alert, status and log all map to live regions, and a screen reader announces the raw text within — "without any of the structure" [11]. Your Undo button is announced as the word Undo, with no route to reach it.
That is why Base UI and React Aria render the toast as a non-modal dialog and put the announcement in a separate region [32]. The dialog holds the buttons; the region holds the text. Everyone else picks one and loses the other. Scott O'Hara's narrower allowance: a toast action is acceptable only if the same action is also available in the primary document [10].
Patrick Lauke asked the working group whether a disappearing toast is a timeout at all. w3c/wcag#976 has been open since 2019 with no resolution [2]. Auditors are not waiting: an April 2026 shadcn/ui audit fails Sonner's 4 s default outright [20].
Meanwhile the most-cited response to the whole pattern came from a design system, not a spec: GitHub removed toasts from Primer in late 2025, "because of their accessibility and usability issues" [11].
Roselli's failure list for a typical toast: 1.3.2 · 1.4.4 · 1.4.10 · 2.1.1 · 2.2.1 · 2.4.3 · 3.2.4 · 4.1.2 · 4.1.3Toast = text only. role="status", injected into a region that was already there. No buttons in the live region [7].
Duplicate every toast action in the page. The undone row keeps its own Undo control [10].
Errors that block the user are not toasts. They are inline, focus-managed messages.
Auto-dismiss ≥ 8 s, pausable on hover and focus, with a close button — or no auto-dismiss at all when the toast is the sole carrier of the information [1][20].
Ship the landmark hotkey and name it in the region label. A hotkey nobody is told about is not an affordance [15].
Test the combination you ship. aria-live is advisory — "only strong suggestions" — and browsers and assistive tech override it [9]. Firefox + Orca is where react-toastify goes silent; NVDA is where mount-time announcements vanish [22][13].
If your toast has an Undo button and a 4-second timer, no library choice will save you.
Sonner is the 2026 default (41M weekly installs, shadcn's toast); react-toastify is the actively-released power option; notistack is legacy.
surveyNo library ships a server entrypoint — the queue lives in client memory, so an RSC app must serialize server-origin toasts through an action return value or a cookie.
reconBase UI Toast is the only primitive both stable and feature-complete in 2026; adopt Sonner unless multi-framework or deep-theming needs force a primitive.
recontoastr is dead (last commit 2018, needs jQuery). react-toastify is alive — don't churn a working integration.