Component is not replicating native select accessibility features

[thiervoj]

Hey !

I've been playing around with this library for a few days, it works fine, but lacks accessibility features that should be mandatory.

When comparing this component behavior to WAI ARIA patterns' select behavior, we can list a few elements that are not working the same :

1. Button has a tabindex="-1", preventing users from focusing it using keyboard (Option list not open when focusing with tab, or using arrow keys #329) - Can currently be hotfixed by removing the tabindex attribute manually
2. Button should toggle the select altogether (Menu should open on first click and close again on second click #299) - Can currently be hotfixed by changing the button styles so that it fits its whole parent
3. When focusing the component while the options list is not shown, pressing the top or bottom arrow key should open the options list. Currently, it does nothing related to the component, and scrolls the page as if there was no focus
4. When focus is leaving the component (when clicking anywhere or using the tab key to focus something else), the options list should close, and the selected value should automatically change to the value that was focused last
5. The "Page Start" and "Page End" properties should move the focus to the first and last element in the list, respectively
6. Typing something when the element is focused should move the focus to the corresponding option (even when is-searchable="false"
7. And many more use cases that are described in the WAI ARIA Pattern's "Keyboard Support" section

[TotomInc]

@thiervoj I've pushed several improvements to a11y:

1. removed tabindex="-1", this means indicators (clear & chevron buttons) can be focused using tab navigation
2. control can now be closed by clicking on it again, like a native <select />
3. ArrowUp and ArrowDown keyboard buttons will open dropdown menu when the control is focused, whether an option is already selected or not
4. added a prop selectOnBlur (that is set to true by default) which will select the focused option when user closes the dropdown menu (without clicking on the selected option). I believe this default option might be controversial, and I might turn it to false by default as this makes the UX a bit quirky (even if it follows WAI-ARIA recommendations)
5. PageStart and PageEnd keyboard button will focus the first or last option in the dropdown menu
6. N/A
7. N/A

I believe these changes are a great starting point. If there are more a11y issues in order to follow WAI-ARIA recommendations, separate issues should be opened in order to track them. 🙂

Feel free to test the changes and report back on this issue.

However, please notice that there's a small breaking change when upgrading from v0.13.0 to v0.14+: component styles must be manually imported. Read more about it on this documentation page.

[thiervoj]

Thanks @TotomInc, I'll test it when I have time, but it looks like a big step forwards in terms of a11y !
Perhaps one remaining element to complete this first a11y step would be to handle the lost focus (as mentioned in my response to PR #329) : focus should stay on the component when an option is selected

[TotomInc]

That last one will be tracked in #329, thanks!

[TotomInc]

Released in v0.14.0.