[Autocomplete] Suggestions cannot be found using iOS VoiceOver swipe gesture

[fymmot]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Equipment

• Iphone 8
• Safari
• iOS 12.1.4

Suggestions in the listbox are very difficult to find when using iOS VoiceOver + Safari.

When swiping forward from the text field or the combobox, VoiceOver skips over the listbox altogether and moves past it to the next content on the page.

Focus on textfield...

... then focus on background elements after swiping forward:

To find the suggestions, the user must explore-by-touch and search the screen – which they might not know they should try.

The issue appears to be aria-owns not working properly in iOS VoiceOver+Safari, in combination with the listbox portal being placed at the end of the DOM. As a result the listbox is separated from the input field for the user.

The problem does not exist with Talkback on Android, where aria-owns has better support.

Expected Behavior 🤔

• VoiceOver focus is placed on the first suggestion in the listbox when swiping from the input field.
• The user can easily find the suggestions without having to explore-by-touch

Refer to the Authoring Practices example (https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html), where the listbox is placed as a sibling to the Combobox. In this configuration, I can find the suggestions as expected by swiping forward from the input field, even without aria-owns.

Steps to Reproduce 🕹

Steps:

1. Start VoiceOver on an iPhone
2. Open Autocomplete demo page (https://material-ui.com/components/autocomplete/)
3. Navigate to "Combobox" example
4. Start writing 'T'
5. Place focus back on the input field
6. Swipe right to go to the next element.

Context 🔦

This same problem exists in many popular implementations of the WAI-ARIA 1.1 pattern. This includes Downshift (see issue 779), ReachUI (see issue #284) and React Autosuggest.

One implementation that does not have the problem is Vue Autosuggest. There are probably others as well.

I have tried to find out if Apple has plans to improve aria-owns support in the future, but haven't been able to find any info.
In the mean time, perhaps it is possible to modify the source order of the component to mimic the WAI-ARIA example?

Your Environment 🌎

Tech	Version
Material-UI Core	v4.5.2
Material-UI Labs	v4.0.0-alpha.30
React	16.11.0
iPhone	8
iOS	12.1.4

[oliviertassinari]

We have made a few changes since the first release of the component. Could you try https://master--material-ui.netlify.com/components/autocomplete/?
We have one demo that doesn't portal, the GitHub one. Does the problem reproduce on this one? Or even the useAutocomplete demo?
Thanks.

[fymmot]

We have made a few changes since the first release of the component. Could you try https://master--material-ui.netlify.com/components/autocomplete/?
We have one demo that doesn't portal, the GitHub one. Does the problem reproduce on this one? Or even the useAutocomplete demo?
Thanks.

@oliviertassinari It has the same behavior unfortunately, but for a different reason. VO doesn't seem to find the listbox when it is contained inside the role=combobox:

<!-- iOS VO cannot swipe to listbox -->
<div role="combobox">
   ...
   <div role="listbox"></div>
</div>

The only configuration I've found that works on iOS is if you place the listbox as a sibling to the combobox instead of a descendant. This is what the Authoring Practices example does:

<!-- iOS VO can swipe to listbox as expected-->
<div role="combobox"></div>
<div role="listbox"></div>

[oliviertassinari]

@fymmot Awesome, let's fix it.