Skip to content

[EuiRange] Add an aria-valuetext prop so screen readers can announce label instead of value.Β #7613

@1Copenut

Description

@1Copenut

Is your feature request related to a problem? Please describe.
EuiRange sliders with ticks do not announce the human-readable tick labels to screen readers.

Describe the solution you'd like
Adding a named prop aria-valuetext that reasons about the currently selected radio button and sets `aria-valuetext=CURRENT_TICK.label}".

Additional context
@cleydyr created a CodeSandbox that illustrates how we could derive the prop value. Bringing it into the component as a named prop instead of allowing it via spread props helps make it more consistent.


Screenshot 2024-03-22 at 3 35 33 PM

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions