[combobox] Suggestions can't be found using VoiceOver swipe gesture

[fymmot]

Equipment

• Iphone 8
• iOS 12.1.4

How to reproduce

1. Start VoiceOver on an iPhone
2. Open combobox demo page (https://ui.reach.tech/combobox/) in Safari
3. Navigate to "Basic, fixed list combobox" example
4. Start writing 'A'
5. Place focus back on the input field
6. Swipe right to go to the next element.

Expected result

• VoiceOver focus is placed on the first suggestion in the listbox.

Actual result

• VoiceOver ignores the listbox and moves past it to the next content on the page.

• I am not able to find the listbox at all without using explore-by-touch (which I might not know I should try)

Comment
The issue appears to be aria-owns not working properly, 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.

Compare with 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 if aria-owns does not work.

[chaance]

Planning to dig into this week. I know this is a bit old at this point, but if you're still using it you can pass portal: false to ComboboxPopover you can have the popover appear adjacent to the input. I'd be interested to know if that solves it for you.

[chaance]

FYI, we recently removed aria-owns in favor of aria-controls, but I'm not sure if this will fix the issue since there are similar issues with that attribute. I believe VO will still rely on source order here, in which case we may want to consider recommending against portals.