What Notification does for you, and what it leaves to the page around it.
What it renders, and how loudly
Each card is a <div> with role="alert" by default, so each card is its own live region, created with its content.
role="alert" interrupts whatever the screen reader is saying and reads the whole card. That suits a failure and is too loud for a confirmation.
Pass role: "status" for anything that is not urgent. It is read at the next pause instead of mid-sentence. These are the two values the call accepts.
Because the region arrives with its content, it is announced reliably. Do not add your own aria-live on top, or it is read twice.
The close button is a real button, labeled “Close” in the active locale. A custom closeIcon keeps the label.
Nothing else is named for you. A link called “here” is read as “here”, with no context, seconds after the action that caused it.
Why a timer hurts
A card closes after 4.5 seconds by default, whether or not the reader has finished with it.
A screen reader reads the card once, at its own pace, and the timer does not wait. A long description can be cut off mid-sentence.
A reader who is slow, zoomed in, or looking at another part of the page can miss the card entirely, and nothing is left behind.
pauseOnHover does not help keyboard users. It reacts to the pointer only, so tabbing into the card does not stop the countdown.
Use duration: 0 for anything with a button, any error, and anything the reader may need to copy.
maxCount drops the oldest card to make room, so during a burst a card can vanish while it is still being read.
An auto-closing card falls under WCAG 2.2.1: let the reader turn the timing off, or make the content available somewhere that does not expire.
Keyboard reach
Cards render at the end of the page, and nothing moves focus into or out of them.
The close button and anything in actions are in the tab order, but last. A reader in a form near the top has to tab past the whole page to reach them.
Escape does nothing. A card closes from its close button, its timer, or destroy(key).
If focus is inside a card when it closes, focus is lost to the page. Make its buttons do something and move on, not controls the reader stays in.
onClick makes the card clickable but not focusable. Put a real button in actions instead.
Never make a notification the only way to reach something.
A card never takes focus, so it never pulls a reader out of the field they are typing in. That is also why a task cannot be finished inside it. Announce in the card, and let the reader act elsewhere.
Color is not the message
type sets the icon and its color. Neither reaches a screen reader, since the icon has no text alternative.
The title has to say the outcome in words: “Export failed”, not a red card saying “Export”.
Warning and error look alike to a reader with a color vision deficiency. The icon helps, the words decide.
The status color is on the icon, not the text, so the text contrast comes from the theme. Check both light and dark: the card is raised, so its background differs from the page.
A colored icon needs 3:1 contrast against the card. A custom colorWarning can fall below that without any warning.
An icon you pass is not colored for you, so its color and contrast are yours to check.
Motion
A card slides in from its edge and fades out. showProgress adds a bar that moves for as long as the card is open.
The progress bar is constant motion while the reader tries to read. Use it only where the expiry matters.
Stacking moves too: a fourth card collapses the pile, and hovering expands it again.
Turn animation off with ThemeScope theme={{ token: { motion: false } }} for readers who ask for reduced motion.
Less motion does not mean more time to read. Pair it with duration: 0.