Giters

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

Home Page:http://downshift-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Examples don't work in VoiceOver

pwolfert opened this issue · comments

commented
  • downshift version: 8.0.0, 7.x, likely others

Relevant code or config

useSelect examples

What you did:

  1. Enable VoiceOver on macOS
  2. View the useSelect examples in Safari
  3. Open the example dropdown and navigate between items via keyboard. Notice that VoiceOver fails to read out the highlighted options

What happened:

VoiceOver does not seem to either recognize or correctly interpret the aria-activedescendant attribute, resulting in no readout when cylcing through the different options.

Problem description:

Suggested solution:

I'm afraid I don't have a simple solution, but I wanted you all to be aware and find out if you have any ideas. We've been using Downshift in a combobox pattern (with a text field) using v3.x for several years, and VoiceOver read out the options. Nowadays we have to use the a11y-message feature to fill in the missing VO messaging, but it's proven very unreliable.

A couple months ago, I read through this article about active-descendant and focus management, and it seemed like the more reliable strategy would be to actively move focus between the options in the listbox. One library that seems to have done that effectively is Adobe Spectrum.

That's all. I think something fundamental would have to change in how Downshift works to support that focus paradigm, but maybe ya'll have already thought about that for v9. I heard that the a11y-message system is going away.

commented

Hi! Can you provide Repro Steps to your issue? For me the examples work fine. I tried in Chrome.

Screenshot 2023-09-07 at 17 24 11 Screenshot 2023-09-07 at 17 24 07 Screenshot 2023-09-07 at 17 24 26
commented

Indeed, there seems to be an issue with VO and Safari, for useCombobox. Unfortunately, the same issue occurs on the ARIA example as well. Maybe we should check the Apple VO issues.

Yes, Spectrum uses a different pattern, but the activedescendant should work as well, according to ARIA.

I saw that you mentioned the issue is about useSelect, but I checked the others and it's still an issue with them, so it's probably how VO and Safari handle the active descendant HTML attribute. Again, in Chrome it works.

commented

It's been a problem with Safari for a while. That's why I don't know what the resolution is besides changing the strategy for highlighting. It makes things really difficult when Safari doesn't follow the spec. Here's another bug report.