Improve accessibility on OSX

[ldanet]

Hello!

This PR aims to fix the voice over bugs on OSX. These issues are open on the React Autosuggest project: moroshko/react-autosuggest#525 and moroshko/react-autosuggest#527.

I could only make the voice over make sense when following ARIA 1.1 specifications for "List autocomplete with automatic selection"

To follow this pattern, I moved the following attributes from the input itself to the wrapper container:

• role="combobox"
• aria-owns
• aria-haspopup
• aria-expanded

I also added an aria-controls attribute to the input field, role="listbox" on the items container and aria-selected to the currently highlighted item, which also fixes #31 in the process.

If this PR gets accepted, it will break tests on React Autosuggest which tests for these roles as well. I can make a PR to update those tests once I know if this will get merged.

[moroshko]

Thanks a lot for this PR!

This PR aims to fix the voice over bugs on OSX.

Can I ask what is the "before" and "after" behavior in VoiceOver?

[ldanet]

Here is the comparison between the "Basic" example from http://react-autosuggest.js.org/ and my local react-autosuggest/demo/standalone built with the changes from this PR. I tested on Safari and Chrome, and I wasn't able to get VoiceOver to work with Firefox on any input whatsoever.

Chrome

After saying each of the following, Voice over will usually say:

Basic example

You are currently on a combo box, inside of web content. Type text or, to display a list of choices, press Caps Lock-Space. To exit this web area, press Caps Lock-Shift-Up Arrow.

Note that pressing Caps Lock-Space does nothing.

Local demo

You are currently on a text field, inside of web content. Type text or, to display a list of choices, press Caps Lock-Space. To exit this web area, press Caps Lock-Shift-Up Arrow.

Action	VO Basic example	VO Local demo
Focus on input:	Type 'c', combo box.	Type 'c', edit text.
Type letter c	c	c
Press down to highlight item "C"	c C	C (1 of 4)
Press down to highlight item "C#"	#	C# (2 of 4)
Press down to highlight item "C++"	#	C++ (3 of 4)
Press down to highlight item "Clojure"	++	Clojure (4 of 4)
Press up to highlight item "C++"	lojure	C++ (3 of 4)
Press up to highlight item "C#"	++ #	C# (2 of 4)
Press up to highlight item "C"	#	C (1 of 4)
Press up to get back on text input	C c	c

It seems that on the basic demo, instead of reading the currently selected item, it will read the difference between the previous and current item, and most of the time it will only mention what disappeared from the previous.

On the local demo, it works much more like you would expect. It will not always mention "(X of 4)".

Safari

After saying each of the following, Voice over will usually say:

Basic example

You are currently on a combo box, inside of web content. Type text or, to display a list of choices, press Caps Lock-Space. To exit this web area, press Caps Lock-Shift-Up Arrow.

Local demo

You are currently on a text field, inside of a combo box. To enter text in this field, type. To exit this combo box, press Caps Lock-Shift-Up Arrow.

Action	VO Basic example	VO Local demo
Focus on input:	Type 'c', combo box.	Type 'c', edit text.
Type letter c	c	c
Press down to highlight item "C"	C	C
Press down to highlight item "C#"	C#	C#
Press down to highlight item "C++"	C++	C++
Press down to highlight item "Clojure"	Clojure	Clojure
Press up to highlight item "C++"	C++	C++
Press up to highlight item "C#"	C#	C#
Press up to highlight item "C"	C	C
Press up to get back on text input	c	c

Works OK on Safari in both cases.

[moroshko]

Many thanks for all this effort!
v10.1.2 contains this change.
A pull request in react-autosuggest is welcome!