Accessibility Enhancements - Aria tags, Space/Enter keys

[strohr1]

The select box currently does not allow Enter/Space keys to make a selection from the drop down. This is to enable users that are navigating with keyboard to make selections.
The select box should only use supported Aria attributes. It currently fails Chrome extension's Accessibility Audit.

We would like to contribute a fix for these issues, which will allow our use of this component to be ADA compliant.

Note: We have made these changes internally, but would like to contribute back to this library.

Please let us know if you want more details. Thanks.

[postrad]

This is exactly the same issue I am currently dealing with, and it is precisely why I was looking through issues. This would be a big improvement for the overall Accessibility compliance of this component.

[adrexia]

Yeah, us too.

[egoens]

@strohr1 Were these changes made to a public repo? I'd love to see what you've forked and possibly use in the interim. Assuming that the a11y branch gets merged at some point.

Thanks for all the awesome guys. This is great.

[strohr1]

@egoens there is a commit against the PR referenced above.
Here is the link for it anyways: #1428

[egoens]

🙌 @strohr1 Perfect. Wasn't sure if there was anything additional that you might have added, that wasn't a part of this PR. Thanks again for the awesome work.

[maureenwaggl]

Will this be supported in V2? Specifically, I'm using a custom DropdownIndicator component, and I'm getting an a11y error for the button-role-space rule:

Error: DropdownIndicator You have `role="button"` but did not define an `onKeyDown` handler. 
Add it, and have the "Space" key do the same thing as an `onClick` handler. 
See 'https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls' for more info.

Thanks!

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[Neurrone]

Can this issue be reopened? I just checked the website and it is still reproduceable.

Closing the issue doesn't mean that it is fixed, and only increases the likelihood of it not being addressed because its not as visible.

[JedWatson]

@Neurrone I believe @bladey closed the issue because it was opened against v1 of react-select, so as reported and discussed it's out of date and we're wrestling our backlog back under control. But agreed that if there are accessibility issues with the current version, we should have an open issue to track them.

I just checked the first example on https://react-select.com and the main issue discussed here (space and enter selecting the hilighted option) work fine for me, I'm not sure what you're seeing differently.

Can I suggest opening a new issue that describes exactly the problem you're experiencing and how to reproduce it in the current version, and we can track that? Thanks!

[ACPK]

@JedWatson - By any chance, could send me a Loom video of it working on https://react-select.com? In Chrome and Safari, the drop-downs are failing our ADA compliance process as "enter" doesn't open a dropdown. When visiting https://react-select.com using a screenreader, the dropdown select boxes are opening via the down arrow rather than the enter button.

Here is the compliance information: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

[ebonow]

Greetings,

For the sake of completion, here is a solution which allows a react-select control to be opened via the Enter key which uses a controlled input and the onKeyDown prop

Codesandbox demo