UNavigationMenu fails axe standards
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 6.17.0-23-generic |
| CPU | 13th Gen Intel(R) Core(TM) i7-1355U (12 cores) |
| Node.js version | v25.6.0 |
| nuxt/cli version | 3.35.2 |
| Package manager | npm@11.8.0 |
| Nuxt version | 4.4.6 |
| Nitro version | 2.13.4 |
| Builder | vite@7.3.3 |
| Config | - |
| Modules | - |
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.4.6
Reproduction
<UNavigationMenu
orientation="vertical"
:items="[
{
label: 'Parent',
to: '/parent',
children: [{ label: 'Child', to: '/parent/child' }],
},
]"
/>
leads to
aria-allowed-attr (critical)
ARIA attribute is not allowed: aria-expanded="false"
target: button > .ms-auto[data-slot="linkTrailing"]
Description
The trailing chevron in the parent is rendered as a span. Reka applies aria-expanded. Because the span has no role, this ARIA attribute is not valid.
Because the parent can act as a hyperlink, a suggested fix could be to render the parent link and the chevron as siblings:
<a href=/parent">Parent</a>
<button aria-expanded="..." aria-controls="...">
<ChevronIcon />
</button>
Additional context
I have patched locally with item.type !== 'trigger' which works for my use-case (type: 'trigger') works ok, but won't work when type is not 'trigger', so the structural change mentioned above is probably needed
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 from the UNavigationMenu rendering shown in the reproduction and run the example with axe to confirm the aria-expanded violation on the trailing chevron. The work is done when the parent link and chevron control produce valid ARIA markup for both link and trigger item types, and the reported accessibility violation is resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 67/100