Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dashboard management UI][SCREEN READER]: Dual range slider inputs need accessible labels that include the prepended string #183202

Open
1Copenut opened this issue May 10, 2024 · 2 comments
Labels
defect-level-2 Serious UX disruption with workaround Project:Accessibility Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas WCAG A

Comments

@1Copenut
Copy link
Contributor

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 the minInputProps and maxInputProps, 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

  1. Start a screen reader of your choosing
  2. Log into a QA environment and open a new classic Deployment
  3. Turn on the sample dashboards and navigate to one. I used the E-commerce sample data for this demo.
  4. Tab through until the Quantity slider has focus. Make sure the first input has the focus.
  5. Verify the input is announced as a spinbox or number input, but the "Quantity" label is never read

Screenshots
Screenshot 2024-05-10 at 4 32 53 PM

Proposed solution
The EuiDualRangeSlider allows for the ARIA attributes we need. I want to add an aria-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

! range_slider_control.tsx

minInputProps={{
  ...getCommonInputProps({
    inputValue: displayedValue[0],
    testSubj: 'lowerBoundFieldNumber',
    placeholder: String(min ?? -Infinity),
  }),
+ "aria-label": "minimum value" // or another value that makes sense and is internationalized
+ "aria-labelledby": "PREPENDED_ID THIS_MIN_ID"
+ id="THIS_MIN_ID"
}}
maxInputProps={{
  ...getCommonInputProps({
    inputValue: displayedValue[0],
    testSubj: 'lowerBoundFieldNumber',
    placeholder: String(min ?? -Infinity),
  }),
+ "aria-label": "maximum value" // or another value that makes sense and is internationalized
+ "aria-labelledby": "PREPENDED_ID THIS_MAX_ID"
+ id="THIS_MAX_ID"
}}

Actual Result

  • The input label is never read

Expected Result

  • The minimum and maximum inputs read off the prepended "Quantity" label plus their own accessible labels
  • No axe-core violations are thrown by the code change

Kibana Version:
8.14.0

OS:
MacOS

Browser:
Chrome latest

Screen reader
VoiceOver

Relevant WCAG Criteria:

@1Copenut 1Copenut added Project:Accessibility WCAG A defect-level-2 Serious UX disruption with workaround labels May 10, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@botelastic botelastic bot added the needs-team Issues missing a team label label May 10, 2024
@lukasolson lukasolson added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas and removed needs-team Issues missing a team label labels May 14, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
defect-level-2 Serious UX disruption with workaround Project:Accessibility Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas WCAG A
Projects
None yet
Development

No branches or pull requests

3 participants