Stream Announcer
betaLets a screen reader user hear a streaming response as it arrives — whole sentences only, with pause, skip and repeat.
- AI
- 2 files
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add stream-announcerNo npm packages are needed beyond what Dowel already requires.
import { StreamAnnouncer } from "@/components/ui/stream-announcer";Default
Off
Custom Labels
<StreamAnnouncer>
| Prop | Type | Default |
|---|---|---|
streaming (required)Whether more is still coming. The last sentence is held until it is not. | boolean | — |
text (required)The response so far — plain text or markdown. Grows as it streams. | string | — |
defaultEnabled | boolean | false |
enabledControlled on/off. Off by default: this is the listener's choice to make. | boolean | — |
labels | Partial<StreamAnnouncerLabels> | — |
localeLocale for sentence rules. Defaults to the platform's. | string | — |
onAnnounceEverything the region is given, as it is given. For a transcript of what was read, or to send the same sentences to speech synthesis for people who want to listen without a screen reader. | (text: string) => void | — |
onEnabledChangePersist this if you offer the setting; it belongs to the user, not the page. | (enabled: boolean) => void | — |
wordsPerMinuteThe listener's speech rate, roughly, for pacing. Too low and announcements lag the stream; too high and the queue drains into the screen reader, where pause and skip can no longer reach it. | number | 240 |
childrenYour controls. Omitted, the four standard ones are rendered. | ReactNode | — |
Plus every attribute of <div>.
<StreamAnnouncerToggle>
Plus every attribute of <button>.
<StreamAnnouncerPause>
Plus every attribute of <button>.
<StreamAnnouncerSkip>
Plus every attribute of <button>.
<StreamAnnouncerRepeat>
Plus every attribute of <button>.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes