Multi-select useCombobox: VoiceOver bug when deselecting item

[emlai]

• downshift version: 8.2.2
• OS: macOS 13.6.1
• Browser: Chrome 119.0.6045.123

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:

Screen.Recording.2023-11-08.at.17.11.18.mov

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]

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

[martakule]

👋 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:

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

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!