elastic / elastic/eui

[BETA] EuiLiveAnnouncer

Open
#8,933 0 comments 1 reaction 1 assignee Claimed by @mgadewoll View on GitHub
beta meta
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

### Overview

`EuiLiveAnnouncer` originates from the overall request to support screen reader announcements on mount of components, e.g. as result of user interactions. It has been introduced in https://github.com/elastic/eui/pull/8916 and is currently in **beta** to test, compare and adjust the behavior in comparison to the existing `EuiScreenReaderLive` component.

We introduced `EuiLiveAnnouncer` as alternative to `EuiScreenReaderLive` with the option to potentially replace `EuiScreenReaderLive` with `EuiLiveAnnouncer` in the future.

### Feature Description

📖 `EuiLiveAnnouncer` is documented [here](https://eui.elastic.co/docs/utilities/accessibility/#live-announcer-region-).

`EuiLiveAnnouncer` aims to provide support for announcements on mount, e.g. when showing UI based on user interaction. Additionally `EuiLiveAnnouncer` proposes a different approach to handling `aria-live` announcements to improve the output support and consistency across screen reader and browser combinations.

#### Component comparison

| Feature | `EuiLiveAnnouncer` | `EuiScreenReaderLive` |
|--------------------------------|:---------------------------------:|:-------------------------------:|
| **Auto-clear message** | Yes, after configurable timeout (`clearAfterMs`) | No |
| **Announce on mount** | Yes | No |
| **Announce on message change** | Yes | Yes |
| **Focus on message change** | No (could be added) | Yes (`focusRegionOnTextChange` prop) |
| **Handles rapid updates** | Yes | Yes |
| **Output consistency** | High | Medium |
| **API stability** | Beta/experimental | Stable |

### Next Steps

To facilitate the transition, we should:

- [ ] Monitor usage in `EuiCallOut` with `announceOnMount`
- [ ] Monitor incoming requests/issues around live announcements and update to `EuiLiveAnnouncer` where feasible/fitting
- [ ] Monitor incoming bugs for `EuiLiveAnnouncer`, `EuiScreenReaderLive` and `EuiCallOut`

### Additional Context (optional)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.