What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
For example: v2.2.9
What browser are you using?
Chrome
Reproduction URL
https://codesandbox.io/p/devbox/stupefied-benz-g2gjwr?file=%2Fsrc%2FApp.jsx%3A24%2C24-26%2C21
I copied the example from your websites, but couldn't get the styles working.
Describe your issue
The Listbox component sets aria-activedescendant on the wrong element.
According to the ARIA specification (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant), the aria-activedescendant attribute is only valid on elements with roles: application, combobox, composite, group, or textbox.
However, the Listbox sets aria-activedescendant on the ListboxOptions element which has role="listbox". This is incorrect.
The MDN documentation explicitly states: "When a descendant of a listbox, grid, or tree popup is focused, DOM focus remains on the combobox and the combobox has aria-activedescendant set to a value that refers to the focused element within the popup."
The problematic code is in:
|
'aria-activedescendant': useSlice(machine, machine.selectors.activeDescendantId), |
The aria-activedescendant should be set on the ListboxButton element (which has role="combobox") instead of on the ListboxOptions element (which has role="listbox").
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
For example: v2.2.9
What browser are you using?
Chrome
Reproduction URL
https://codesandbox.io/p/devbox/stupefied-benz-g2gjwr?file=%2Fsrc%2FApp.jsx%3A24%2C24-26%2C21
I copied the example from your websites, but couldn't get the styles working.
Describe your issue
The Listbox component sets
aria-activedescendanton the wrong element.According to the ARIA specification (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant), the aria-activedescendant attribute is only valid on elements with roles: application, combobox, composite, group, or textbox.
However, the Listbox sets aria-activedescendant on the ListboxOptions element which has role="listbox". This is incorrect.
The MDN documentation explicitly states: "When a descendant of a listbox, grid, or tree popup is focused, DOM focus remains on the combobox and the combobox has aria-activedescendant set to a value that refers to the focused element within the popup."
The problematic code is in:
headlessui/packages/@headlessui-react/src/components/listbox/listbox.tsx
Line 740 in 7c06d2b
The aria-activedescendant should be set on the ListboxButton element (which has role="combobox") instead of on the ListboxOptions element (which has role="listbox").