UFormField label is not associated to a child UListbox
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
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
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Playground reproduction using UFormField and UListbox, then trace how their generated label and control identifiers are connected. Verify the fix with the accessibility behavior shown in Firefox and Chromium, ensuring the UListbox is announced with the UFormField label.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100