Alert ./src/Alert.stories.jsx
The live-region container and its message text are mounted into the DOM in a single operation, rather than the container persisting and its text being swapped afterward — the documented-unreliable pattern for role="status".
dynamic-context · interaction · src/Alert.jsx:6–14
quoted verbatim
<div className={`demo-alert ${tone}`} role={assertive ? "alert" : "status"}>
<div>
{title && <span className="title">{title}</span>}
{children}
</div>
</div>approved test evidence
components-alert--success approved computed tree: "- status: Saved Your application was submitted." — this reflects the tree at initial render, not confirmation that a dynamically inserted status node is reliably announced.
- Who it harms
- Screen-reader users who trigger the action may never hear the confirmation. NVDA and VoiceOver only reliably announce changes inside a live region that already existed when the change occurred.
- The fix
- Render the live-region container on mount with an empty text node, and update only its text content when the message changes.
- How to verify
- Re-run the interaction pass for components-alert--success and confirm the transcript contains the confirmation text after activation, not only at initial read.
audit trail (5 steps)
- · opened src/Alert.jsx
- · opened src/Alert.stories.jsx
- · followed import ./tokens.css
- · searched corpus: "role=status live region insertion timing"
- · cited WCAG 2.2 · 4.1.3 Status Messages (Level A)