USelectMenu does not comply with axe-core rule "Certain ARIA roles must contain particular children"

[ErichL]

Environment

Operating system	macOS 25.5.0
CPU	Apple M1 Max (10 cores)
Node.js version	v20.19.4
nuxt/cli version	3.34.0
Package manager	pnpm@10.33.0
Nuxt version	4.4.2
Nitro version	2.13.3
Builder	vite@7.3.2
Config	-
Modules	-

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.4.2

Reproduction

https://play.ui.nuxt.com/#eNp9UctOwzAQ/JWVLwEJ2gOcqhSJQg9FAipaTphDlG5DWmdt+REqVfl31m4bOKCe4p2ZHc84e3FvzKANKEYid6WtjQeHPhhQBVVjKbyT4k5S3RhtPezB4ho6WFvdQMZrmSRJpSbnofbYOBhHxcWHJIBsUpRbpavsKk1LvdLH44xgbnVl0bkj8qgpen1entzaQgU8uvVGzObDQ0rOxANfaVThkSeA/H2BCkv/jBSgvW70ChU3SE5SwCgFZCB9GRjyVj7sLcQVl+XL13U12DhN/CL7aCtFqRtTK7SvxtccTooRJCZyhVL6+ylh3gZMbdLOF5bbf/CN20VMijm3R9tysp7zha3QH+jp4gV3fO5JrhMUq8+Qb+i0CjHjQTYJtOLYf3Qp7Sz9y5qqpZvuPJI7lYpBo7JLen65gA9nqv/GvRncpj1Jneh+AJZFxCk=

From the standard USelectMenu. Click on it to open the combobox and scan using axe Devtools.

It will then fail the rule Certain ARIA roles must contain particular children


This is because the listbox should only contain children with the role option or group. https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

Description

The dropdown in USelectMenu has the role listbox but it has children that do not have the role group or option. That is both the combobox input and the wrapping div:

<div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">.

So, it fails the axe-core rule "Certain ARIA roles must contain particular children".

Additional context

This is not an issue on Reka's Combobox, partially because the combobox input is not within the popup.

https://reka-ui.com/docs/components/combobox

Logs

[coderabbitai]

🔗 Related PRs

#6503 - fix(Select/SelectMenu/InputMenu): add fallback for max-height [merged]
#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!

[pupuking723]

I can look into this if maintainers are open to a PR. I would first verify the rendered Combobox structure against the ARIA listbox requirements and Reka's current markup, then keep the change limited to the popup content structure so the trigger/search behavior is not changed. I'll wait for confirmation or assignment before opening a PR.