search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.23k stars 1.05k forks source link

ComboBox accessibility Safari & VoiceOver #2736

Open jardakotesovec opened 10 months ago

jardakotesovec commented 10 months ago

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: v1.7.16

What browser are you using?

For example: Safari, Chrome, Macos

Reproduction URL

https://headlessui.com/vue/combobox

Describe your issue

I was just testing ComboBox with Voice over on Mac. And in safari it does not announce the options as I go through them. It can be reproduced directly on https://headlessui.com/vue/combobox using Safari on Mac.

I was comparing behaviour to https://react-spectrum.adobe.com/react-aria/ComboBox.html and https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ which announce it correctly and in the same way.

Additional difference I noticed that headlessui always automatically selects first item, without user pressing key down, which is different behaviour from the examples above - that was intentional choice, right? There seems to be some flexibility in specification.

lcnogueira commented 6 months ago

Not sure if we are talking about the same issue, but just in case it is: https://github.com/tailwindlabs/headlessui/discussions/2898