Listbox: Set aria-activedescendant on combobox button instead of 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-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: https://github.com/tailwindlabs/headlessui/blob/7c06d2b536226384bf706087450c9624ce8e3810/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L740

The aria-activedescendant should be set on the ListboxButton element (which has role="combobox") instead of on the ListboxOptions element (which has role="listbox").