# media-status-announcer
Announce player state changes through a persistent status live region
## Import
```ts
import '@videojs/html/ui/status-announcer';
```
## Anatomy
```html
```
## Behavior
`` watches player-store snapshots, so it reports changes made by buttons, sliders, custom controls, or direct player actions. It does not depend on [``](https://videojs.org/docs/framework/html/reference/components/hotkey) or [``](https://videojs.org/docs/framework/html/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.
The custom element receives labels from the nearest player i18n context.
## Styling
`` 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.
```css
media-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 `` 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 [``](https://videojs.org/docs/framework/html/reference/components/seek-indicator) for temporary visual seek feedback. Keep that visual value out of a live region; `` 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 `` suppresses its duplicate volume and completed-seek message.
**index.html**
```html
These controls announce status changes to screen readers.