LiveRegion and useAnnounce
LiveRegion reads changes to its content aloud, such as a result count after filtering. useAnnounce speaks a one-off message without showing it, such as "Draft saved" after a shortcut.
- LiveRegion
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, LiveRegion and useAnnounce
No results yet.
Dark theme, LiveRegion and useAnnounce
No results yet.
High contrast theme, LiveRegion and useAnnounce
No results yet.
UsageLink to the section Usage
import { LiveRegion } from '@skribly/ui/theme'<LiveRegion>{count} results</LiveRegion>
const announce = useAnnounce()
announce('Draft saved')
announce('Could not reach the server', 'assertive')Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Polite messages wait for the screen reader to finish; assertive ones interrupt and are only for errors that block the reader.
- Render a LiveRegion empty from the start, because a region that appears with its text is often not read.
- Announcements stay readable while a modal dialog is open, and the same message twice is read twice.
This demo runs through axe in all three themes on every test run. See what the tests check.