VoiceOver cannot find listbox contents using swipe gesture

[fymmot]

• downshift version: 3.3.4
• node version: N/A (only tested on demo page)
• npm (or yarn) version: N/A (only tested on demo page)

Equipment

• Iphone 8
• iOS 12.1.4

What you did:

1. Start VoiceOver on an iPhone
2. Open Downshift combobox example at https://downshift.netlify.com/tests/combobox or "Fra" combobox on http://en-tur.no
3. Start typing "B" in text box
4. With VoiceOver focus on the text box, swipe right to move focus to the suggestions

What happened:

• VoiceOver ignores the listbox and moves past it to the next content on the page.
• I am not able to find the suggestions at all by swiping. I must instead use explore-by-touch (which I might not know I should try)

Problem description:
The issue appears to be aria-owns not working properly in VoiceOver on iOS. It's not creating the expected DOM order for the listbox in relation to the input.

The problem does not exist with Talkback on Android.

Suggested solution:
Compare with the Authoring Practices example (https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html) which has the expected behavior in VoiceOver. I can find the suggestions as expected by swiping forward from the input field.

One possible reason is that the listbox in the Authoring Practices example is placed as a sibling to the combobox in the DOM, instead of as its child, as done in Downshift:

Authoring Practices example structure

<div class="combobox-wrapper">
   <div role="combobox" aria-expanded="true" aria-owns="ex1-listbox" aria-haspopup="listbox" id="ex1-combobox"> ... </div>
   <ul aria-labelledby="ex1-label" role="listbox" id="ex1-listbox" class="listbox"> ... </ul>
</ul>

Current Downshift structure:

<div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-0-label">
   <label for="downshift-0-input" id="downshift-0-label">...</label>
   <input aria-autocomplete="list" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input">
   <ul role="listbox" aria-labelledby="downshift-0-label" id="downshift-0-menu">...</ul>
</div>

I recommend we look into replicating the Authoring practices structure, as long as aria-owns is broken on iOS

[silviuaavram]

You are right, we should change the Downshift examples in:

1. CodeSandbox usage.
2. Docsite combobox.
3. Readme.

I can take this but I can also code review if you can do it faster.

Thank you very much!

[fymmot]

@silviuavram
That's great!

I can help with testing but will need someone else make the actual changes (I'm not a developer).

Thanks!

[silviuaavram]

After looking over it it may need a bit more than the changes in the list above.

Downshift has been designed by default with that structure in mind. It's confusing for the screen reader, and people need to use the getRootProps, follow the ARIA structure and use those for the combobox div. If I will apply these changes now, then I need to also do a lot of explaining and go forward with 2 different approaches in the Readme: the default one as it is now and the correct one.

I am in favour of leaving Downshift as unchanged as possible and correct its issues (such as this one) in the useCombobox React hook I want to release. Using that should provide the correct experience with screen readers.

[itstheGoodstuff]

@silviuavram Whats the status?

[huizhiTS]

Got same issue and had a bit investigation, I think even we follow the structure as the combobox example from W3, and apply all those aria attributes, may still not fix the issue completely. When using voice over on ios device, swipe gesture will trigger the onBlur event which closes the dropdown list.

I think in inputHandleBlur function, line 840, can we pls try to add a check for isTouchMove like if (!this.isMouseDown && !this.isTouchMove &&!downshiftButtonIsActive), so if it's a swipe, it won't reset the state.

Can anyone help to verify and look into this? Thank you :)

[silviuaavram]

I think we should create another Downshift example with this correct DOM structure. It will use getRootProps.

I finished useCombobox and maybe you want to check that out and see if it's accessible.https://downshift.netlify.com/

[silviuaavram]

@fymmot @huizhiTS @itstheGoodstuff please review the PR above. See if it's correct and also leave suggestions. Thanks!

[silviuaavram]

🎉 This issue has been resolved in version 4.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀