search

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.11k stars 932 forks source link

Multi-select useCombobox: VoiceOver bug when deselecting item #1555

Open emlai opened 1 year ago

emlai commented 1 year ago

Relevant code or config

The basic multiple selection combobox example: https://www.downshift-js.com/use-combobox/#basic-multiple-selection

What you did:

Deselect item

What happened:

After deselecting an item, VoiceOver moves to the first selected item in the list:

https://github.com/downshift-js/downshift/assets/7543552/4df98cd7-ad3c-4f9c-80ae-b52964afcab0

Reproduction repository:

Reproduces in the example: https://www.downshift-js.com/use-combobox/#basic-multiple-selection

Problem description:

I think VoiceOver should stay on the focused item even after deselecting it.

It works as expected in the Ariakit multi-select combobox: https://ariakit.org/examples/combobox-multiple

Suggested solution:

silviuaavram commented 8 months ago

I tried to figure out briefly what's going on but no luck. Could someone take a better look?

martakule commented 2 weeks ago

👋 Hi there!

Just ran into the same problem during an a11y audit of a new multi-select component based on this Downshift example.

We confirmed that on Safari the focus ring actually stays on the toggle button, so it behaves as expected:

safari-voiceover

It's only in Chrome (and I assume Edge) and Firefox that the focus ring jumps around. The GIF below is Chrome:

chrome-voiceover

I recall years ago Apple recommending using VoiceOver with Safari since they couldn't guarantee the correct behaviour in other browsers, but I don't see that language in the official guide anymore.

We're still googling for any information about how VoiceOver determines the focus ring position, but not having much luck so far. I'm subscribing to this issue in case anyone else finds the cause!