nuxt / nuxt/ui

UNavigationMenu fails axe standards

Open
#6,481 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.