[Dashboard management UI][SCREEN READER]: Dual range slider inputs need accessible labels that include the prepended
string
#183202
Labels
defect-level-2
Serious UX disruption with workaround
Project:Accessibility
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
WCAG A
Description
The dual range slider in the Dashboard UI do not have meaningful, semantic labels. The underlying
EuiDualRangeSlider
component has the ability to add ARIA attributes into theminInputProps
andmaxInputProps
, so I think we can construct meaningful labels. I've included a screenshot and relevant code snippets to (hopefully) make the ask clear.Steps to reproduce
Quantity
slider has focus. Make sure the first input has the focus.Screenshots
Proposed solution
The
EuiDualRangeSlider
allows for the ARIA attributes we need. I want to add anaria-label
to each input, and an ID to each input and the prepended string. This will allow us to concatenate the prepended text with the input's accessible label to make each one more meaningful.See range_slider_control.tsx#L199
Actual Result
Expected Result
Kibana Version:
8.14.0
OS:
MacOS
Browser:
Chrome latest
Screen reader
VoiceOver
Relevant WCAG Criteria:
The text was updated successfully, but these errors were encountered: