UFormField label is not associated to a child UListbox

[ttcchhmm]

Environment

Operating system	Linux 7.0.0-28-generic (Ubuntu 24.04 LTS)
CPU	Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz (12 cores)
Node.js version	v22.23.1
nuxt/cli version	3.37.0
Package manager	npm@10.9.8
Nuxt version	4.5.0
Nitro version	2.13.4
Builder	vite@8.1.5
Config	compatibilityDate, css, devtools, modules
Modules	@nuxt/ui@4.10.0

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.10.0

Reproduction

Playground link

Description

When using a UListbox inside a UFormField, the label generated by the UFormField is not associated to the UListbox. This creates a UListbox without a label for users relying on accessibility tools such as screen readers. I'm willing to try to make a PR to fix this issue if needed.

Additional context

Firefox shows an accessibility violation:

And the missing label is also visible on Chromium:

Logs

[coderabbitai]

🔗 Related PRs

#6572 - fix(SelectMenu): bind id and aria attributes on trigger [merged]
#6575 - fix(Select): open menu on label click [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!