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

EuiDualRange inputs are missing aria labels #2737

Closed
cjcenizal opened this issue Jan 6, 2020 · 1 comment · Fixed by #2738
Closed

EuiDualRange inputs are missing aria labels #2737

cjcenizal opened this issue Jan 6, 2020 · 1 comment · Fixed by #2738

Comments

@cjcenizal
Copy link
Contributor

cjcenizal commented Jan 6, 2020

This comment regards this type of range:

image

I'm not sure what the norm is for this type of input, but when I focus the left input VoiceOver reads aloud "20" followed by the help text, and when I focus the right input "100" followed by the help text. It seems like the user would need some additional information to tell the two inputs apart.

One way we could address this would be by applying default aria-label attributes of "Minimum" and "Maximum" to each input. Then we could also add an ariaLabels prop that could mirror the format of the value prop, which would be applied over these defaults.

<EuiDualRange
  value={[min.value as number, max.value as number]}
  ariaLabels={["Mininum number of midi-chlorians", "Maximum number of midi-chlorians"]}
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants