Listbox: Set aria-activedescendant on combobox button instead of listbox

[Chrisdo82]

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:

headlessui/packages/@headlessui-react/src/components/listbox/listbox.tsx

Line 740 in 7c06d2b

'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").