VoiceOver in Safari on macOS cannot interact with combobox

[olivvybee]

• downshift version: 6.0.6
• node version: 12.6.1
• npm (or yarn) version: 6.14.6

Relevant code or config

Issue can be seen in the useCombobox "basic usage" example in CodeSandbox: https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/basic-usage.js

What you did:

I am attempting to use useCombobox with VoiceOver on macOS in Safari. I have tested using Safari 13 and Safari 14 on macOS 10.14 and 10.15.

What happened:

When navigating to the combobox with VoiceOver, it reads "You are currently on a pop-up combo box, inside web content. Type text or, to display a list of choices, press Control-Option-Space.". The issue is that neither typing or ctrl-opt-space do anything – text never appears in the input field and the list of options never appears. This prevents VoiceOver users from interacting with the combobox at all.

Reproduction repository:

https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/basic-usage.js

Problem description:

Comboboxes created with useCombobox are not usable with VoiceOver in Safari.

Suggested solution:

None

[olivvybee]

Through some testing, I found that if I remove the role="combobox" from the outer element (added by getComboboxProps()) then VoiceOver can interact with the element again. However, it no longer gets announced as a combobox. This is the workaround I'm currently using.

[silviuaavram]

Hi @olivvysaur! Thank you for reporting this, I was hoping this use case will work. Is your scenario working in the examples from ARIA at https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html?

[olivvybee]

I see the same behaviour with those examples. I guess this might be a bug with VoiceOver or Safari.

[silviuaavram]

It may be worth looking at https://raw.githack.com/w3c/aria-practices/aria1.2-combobox-proposal/examples/combobox/combobox-autocomplete-list.html as well. ARIA are changing the DOM structure guidelines. Not sure when ARIA 1.2 will land, I believe they are currently in draft still, but downshift will support the new guidelines.

[olivvybee]

Hmm so in the 1.2 version interacting with the text field still does nothing, but if I activate the dropdown using the button next to the field, it works as expected (I can type and move up and down using the arrow keys).

[silviuaavram]

So it's still not the behaviour you are looking for. Follow up with ARIA or VoiceOver/Safari?

[olivvybee]

As I said I think it's a VO/Safari issue because it works fine in other browsers. It might be worth calling out in the downshift documentation until it gets fixed.

[silviuaavram]

Feel free to open another issue if this persists in v7. Thanks!