Skip to content

[EuiProgress][A11y] Enable determinate status updates being read to screen readers #8837

@mgadewoll

Description

@mgadewoll

Description

Caused by elastic/kibana#216697

The EuiProgress component currently does not provide any intentional output for screen reader users. While the status of a determined <progress> element will at times be indicated by sound (depending on screen reader) the component currently does not announce the status in a text announcement automatically, e.g. like 10%, 20 % ....
The current status is only read on focus of the element. But since this component is used to indicate loading states, we should provide the functionality to announcement status on update to screen reader users (related WCAG 4.1.3 Status Messages).

To achieve this we can make use of aria-live inside of the component to announce the updated value or valueRender.

Expected behavior

valueText={true} valueText={${value} steps}
Screen.Recording.2025-07-02.at.11.07.45.mov
Screen.Recording.2025-07-02.at.11.07.45.mov

Metadata

Metadata

Assignees

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions