Typically a combobox widget is an input field that launches an associated popup (listbox) with a bunch of suggestions in the popup. In desktop browsers using keyboard, while the focus stays with the input field, pressing Up/Down arrow keys, the selection within the listbox/popup can be changed. Pressing ENTER key populates the input field with current selection in the listbox/popup and closes the popup.
For accessibility purpose, the field is marked
role="combobox", the listbox/popup is linked with the field via
aria-owns and aria-controls attribute. The current selection is indicated via
aria-activedescendant. Here is a simple demo of such a field - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
Such a widget works great with Voiceover in iOS only if the listbox/popup is a sibling of the combobox field in the DOM. i.e. Voiceover moves focus to the listItems/suggestionElements only if the listbox is next in the normal tab order. The problem in my case is that the listbox is NOT immediately next in the natural tab order from the combobox field.
aria-owns is used to build the parent-child relationship between the two DOM elements when such a relationship is evident on the screen to the user, but isn't represented in the DOM. Since the listbox element in my case is marked as owned by the combobox field, I would expect Voiceover to move the focus to listbox element (even though it isn't next in the tab order), enabling the user to make a selection from the listItems/suggestions. This isn't happening. Any guidelines to achieve this in a clean way? Is Voiceover missing this support currently?