NVDA does not announce the selected entry in "listbox" and "combobox"

[lenzls]

What package within Headless UI are you using?

@headlessui/react (problem is also present in vue)

What version of that package are you using?

v1.4.2

What browser are you using?

Chrome & Firefox

Reproduction URL

https://headlessui.dev/react/listbox

Describe your issue

NVDA does not announce the currently selected item in the "listbox (select)" and "combobox" components.

Note that I'm not sure how other screen readers behave.

When going through the list in a select dropdown, NVDA does not highlight the currently selected entry (here "Tom Cook") in any way.

While the same also happens when navigating through the list in a default HTML select. There is one big difference to headless-UI though, namely that the selection follows the keyboard focus in a native select, but in a headless-UI select, it does not.
It appears that the rationale, why NVDA does not announce the selected entry is based on this fact (see here).

As the selection here does not follow the focus, IMHO headless-UI should inform the user about the currently selected entry when navigating through the list.

Implementation suggestion

This could be achieved by adding aria-selected="false" to the non-selected entries. This would be in addition to aria-selected="true" on the selected entry, which headless-UI already sets.

The following example clarifies the behaviour:
https://codepen.io/simondl/pen/xxYBBXL?editors=1000

Without aria-selected="false", all entries are announced without a hint on their selection state.
With setting aria-selected="false" on the non-selected entries, all non-selected entries are differentiable to the selected one.

---

I'd be happy to supply a MR in case the behaviour is wanted.

[JesusTheHun]

Yep, this is so annoying.
MacOS Voice Over behaves even worse : unless explicitly told aria-selected=false every active option is announced as selected. In your codepen for example, if I remove the aria-selected=false, I hear : opt 1, selected, 1 of 4.

This is weird especially in case of multi-select because the rationale exposed in the link you've given do not stand.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1812, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.