Improve Combobox accessibility

[RobinMalfait]

This PR improves the Combobox because there are some differences compared to the Listbox that we didn't properly account for.

Big thanks to @afercia for providing us with a wonderful issue report that talks about the differences.

Edit (24/01/2023): Going to merge this PR with partial fixes but not everything. This PR will fix the following items:

• Add the missing aria-autocomplete attributes
• Remove the unnecessary aria-activedescendant on the Combobox.Options (it is only required on the Combobox.Input)
• Implement a fix to improve Safari & VoiceOver combination, where opening the Combobox doesn't always trigger VoiceOver properly. This PR will that.

For the aria-selected prop it is a bit confusing to apply it based on the visual state only which means that there is no difference between a checked active value and a non-checked active value. I also created a table below with odd findings...

We will tackle this in a different PR. But want to merge these changes/fixes already.

---

This commit fixes a few issues:

• The aria-selected value was always based on the selected value (which is correct for the Listbox) but it should be based on the visually selected value (in our case, this is the active value).
• We dropped an incorrect aria-activedescendant attribute from the ComboboxOptions, it should only exist on the ComboboxInput.
• We added a missing aria-autocomplete to the ComboboxInput, with a value of list so that assistive technology better understands what kind of Combobox we are dealing with.
• This also includes a VoiceOver bug fix where the announcements aren't properly happening unless a change to the ComboboxInput is made. Now we will trigger a change to the input when we open the Combobox, we will set the value to '' and re-set to whatever value was present. We also make sure that the cursor position / selected range is reset so that the end user doesn't feel any differences (except for a better working VoiceOver on macOS).

---

Some additional findings:

I also think that this is impossible to get right, so we have to chose the "best" way we think. Should we start announcing these changes in state manually instead of relying on on VoiceOver? 🤔

Some fun differences between macOS Safari + VoiceOver and macOS Chrome + VoiceOver:

So while using the active state for aria-selected gives you at least consistent announcements, it also means that there is no way to differentiate between selected and active.

Single Value Mode

Scenario	Implementation	Chrome Result	Expected?	Safari Result	Expected?
Use aria-selected based on the visual selected value.	aria-selected: active ? true : undefined	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌
	aria-selected: active	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌
Use aria-selected based on the actual selected value.	aria-selected: selected ? true : undefined	Reads out every single value as "selected".	❌	Reads out every single value as "selected", but stops announcing values listed after the actual selected value.	❌
	aria-selected: selected	Reads out every single value as "not selected", except for the actual selected value.	✅	Reads out every single value as "selected", but stops announcing values listed after the actual selected value.	❌
Use aria-checked based on the visual selected value.	aria-checked: active ? true : undefined	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌
	aria-checked: active	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌
Use aria-checked based on the actual selected value.	aria-checked: selected ? true : undefined	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌
	aria-selected: selected	Reads out every single value as "selected".	❌	Reads out every single value as "selected".	❌

Multi Value Mode

Scenario	Implementation	Chrome Result	Expected?	Safari Result	Expected?
Use aria-selected based on the visual selected value.	aria-selected: active ? true : undefined	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌
	aria-selected: active	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌
Use aria-selected based on the actual selected value.	aria-selected: selected ? true : undefined	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected", but stops announcing values listed after the first actual selected value.	❌
	aria-selected: selected	Reads out every single value as "not selected", except for the actual selected values.	✅	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected", but stops announcing values listed after the first actual selected value.	❌
Use aria-checked based on the visual selected value.	aria-checked: active ? true : undefined	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌
	aria-checked: active	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌
Use aria-checked based on the actual selected value.	aria-checked: selected ? true : undefined	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌
	aria-selected: selected	Reads out every single value as "selected".	❌	Initially doesn't read out anything, but if you type something and undo that, then it reads out every single value as "selected".	❌

Fixes: #2129
Co-authored-by: Andrea Fercia a.fercia@gmail.com

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 4:38PM (UTC)
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 4:38PM (UTC)