# StatusAnnouncer
Announce player state changes through a persistent status live region
## Import
```tsx
import { StatusAnnouncer } from '@videojs/react';
```
## Anatomy
```tsx
```
## Behavior
`StatusAnnouncer` watches player-store snapshots, so it reports changes made by buttons, sliders, custom controls, or direct player actions. It does not depend on [`Hotkey`](https://videojs.org/docs/framework/react/reference/components/hotkey) or [`Gesture`](https://videojs.org/docs/framework/react/reference/components/gesture) events.
The first snapshot establishes a baseline without announcing it. Later changes are handled in two groups:
| Timing | Changes |
| --- | --- |
| Immediate | Playing or paused, captions on or off, fullscreen entered or exited, picture-in-picture entered or exited, and playback rate |
| Debounced by 200 milliseconds | The final volume or mute value and the final time after a completed seek |
Regular playback-time updates are ignored. A seek announcement is queued only after `seeking` changes from `true` to `false` at a different time. When several immediate states change in one snapshot, their translated labels are combined into one announcement.
The component always renders with `role="status"`. Its `[data-status-announcer-content]` child is replaced for every announcement, including repeated text, so assistive technology receives a fresh live-region change. After `closeDelay`, which defaults to 800 milliseconds, the label is cleared while the status region remains rendered.
Announcements use the active Video.js locale and translations.
Use the `labels` prop to override individual translated labels for one announcer.
## Styling
`StatusAnnouncer` is not visually hidden by the primitive. Apply a visually-hidden class while keeping it in the accessibility tree. Do not use `display: none`, `visibility: hidden`, or the `hidden` attribute.
Add a `className` to the component:
```css
.status-announcer {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
```
## Accessibility
The `status` role provides implicit polite live-region behavior, so the component does not add an explicit `aria-live` attribute.
Keep one announcer inside each player `Container` whose state changes should be reported.
Debounced volume and completed-seek announcements are suppressed while an element with `role="slider"` inside the same container has focus. The focused slider provides its own value feedback, and suppressing the separate status message avoids duplicate announcements. A focused slider outside that container does not suppress it.
Use [`SeekIndicator`](https://videojs.org/docs/framework/react/reference/components/seek-indicator) for temporary visual seek feedback. Keep that visual value out of a live region; `StatusAnnouncer` owns the accessible announcement.
## Examples
### Basic Usage
Use the playback button for an immediate announcement and the mute button for a debounced announcement. The sliders provide their own focused value feedback, so `StatusAnnouncer` suppresses its duplicate volume and completed-seek message.
**App.tsx**
```tsx
import {
Container,
createPlayer,
MuteButton,
PlayButton,
StatusAnnouncer,
TimeSlider,
VolumeSlider,
} from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './BasicUsage.css';
const { Player } = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
These controls announce status changes to screen readers.