Custom labels for combobox are missing the htmlFor property

[eebabe]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.19

What browser are you using?

Chrome/Firefox

Reproduction URL

https://codesandbox.io/p/devbox/elastic-julien-97m3nj?file=%2Fsrc%2FApp.jsx%3A31%2C56

Describe your issue

When providing a custom label for a combobox, the rendered custom label is missing the htmlFor property which is needed for accessibility.

See examples at https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_concatenate_a_label_from_several_text_nodes

[adamwathan]

Hey! The label is associated with the input using aria-labelledby to make sure the label is properly announced to screen readers:

Is there a specific issue you are seeing that we'd need to add htmlFor to solve?

[eebabe]

Hi there! Thanks for getting back to me so quickly. Yes, the aria-labelledby on the input in my example looks good. But it’s also expected that the label will have a “for” property that points to the id of the input it labels since the input is not a child element of the label.

From https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1 "This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents."

And if you run the WAVE (web accessibility evaluation) tool on the example page submitted in the issue, you’ll see an “orphaned form label” alert.

On Apr 25, 2024, at 12:13 PM, Adam Wathan @.***> wrote:

Hey! The label is associated with the input using aria-labelledby to make sure the label is properly announced to screen readers: image.png (view on web) Is there a specific issue you are seeing that we'd need to add htmlFor to solve? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[RobinMalfait]

Hey!

This behavior was improved and is available in Headless UI v2. The label will now also have a for attribute pointing to the control (in this case the ComboboxInput).

I would highly recommend to upgrade to Headless UI v2. The CodeSandbox you provided already used latest as the version number, so that one already uses v2 without any changes.

We wrote about Headless UI v2 on our blog: https://tailwindcss.com/blog/headless-ui-v2

For more information about the release itself and the upgrade guide checkout the release notes:

• Release notes: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0
• Upgrade guide: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0#user-content-upgrading-from-v1

Last but not least, check out our new docs on https://headlessui.com. If you run into any issues, feel free to open a new issue here on GitHub and we'll help you out!

Hope this helps!