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 #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.
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:
Additional Context (optional)
Overview
EuiLiveAnnounceroriginates 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 #8916 and is currently in beta to test, compare and adjust the behavior in comparison to the existingEuiScreenReaderLivecomponent.We introduced
EuiLiveAnnounceras alternative toEuiScreenReaderLivewith the option to potentially replaceEuiScreenReaderLivewithEuiLiveAnnouncerin the future.Feature Description
📖
EuiLiveAnnounceris documented here.EuiLiveAnnounceraims to provide support for announcements on mount, e.g. when showing UI based on user interaction. AdditionallyEuiLiveAnnouncerproposes a different approach to handlingaria-liveannouncements to improve the output support and consistency across screen reader and browser combinations.Component comparison
EuiLiveAnnouncerEuiScreenReaderLiveclearAfterMs)focusRegionOnTextChangeprop)Next Steps
To facilitate the transition, we should:
EuiCallOutwithannounceOnMountEuiLiveAnnouncerwhere feasible/fittingEuiLiveAnnouncer,EuiScreenReaderLiveandEuiCallOutAdditional Context (optional)