Accessibility Enhancements - Aria tags, Space/Enter keys

[ACPK]

Related tickets: #1399 and #2456

When visiting https://react-select.com using a screenreader, the dropdown select boxes are opening via the down arrow rather than the enter button.

In Chrome and Safari, the drop-downs are failing our ADA compliance process as "enter" doesn't open a dropdown.

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

[ebonow]

Greetings @ACPK ,

Two points here to address, one being the issue you are raising as an issue, and the other being the concerns around accessibility.

To begin with, their own examples of comboboxes and typeaheads do not open when clicking enter while focused, so I am uncertain as to what standards compliance you are looking for:
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

When looking at the referenced compliance:

The example listbox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the Listbox Design Pattern.

When visiting the Keyboard Interaction section, there is no specified criteria for "Enter" which leads me to believe that the example is a variation but not standard.

If you would like guidance on implementing a select which toggles on enter, we can assist you on implementing a variation that fits your needs.

const [ menuIsOpen, setMenuIsOpen ] = useState(false);
const onKeyDown  = e => e.key === 'Enter' && !menuIsOpen && setMenuIsOpen(true);
const onMenuClose = () => setMenuIsOpen(false);

return <Select menuIsOpen={menuIsOpen} onKeyDown={onKeyDown} onMenuClose={onMenuClose} />

Demo codesandbox

Regarding react-select a11y, it's been decided that the best strategy was to support initiatives via aria-live due to inconsistent support with various features such as multi selection support or identifying selected options that aren't in the input. We plan to add a completely new section to the documentation to better discuss some of these limitations and provide more information specifically for Accessibility along with some other a11y considerations for building more accessible controls.

Furthermore, the next release will be focused heavily on PR #4414 which will bring more customization to the aria-live functionality, however the PR contains some findings about the ongoing status of accessibility specifically around aria-live. Once aria-live has received its due attention, we can investigate in what ways the other attributes and roles intersect and conflict with each other.

Again happy to discuss further but this does not appear to be an issue with compliance and react-select provides the tools to add additional accessibility features.

[bozdoz]

There is a difference between the links: one is a listbox depicting Aria 1.0, and one is a combobox depicting Aria 1.1. I would guess that Enter should not actually open the combobox, since it would be similar to a native , and Enter does not appear to open a native select dropdown (also, Aria 1.1 combobox does not open with Enter).