UNavigationMenu not keyboard accessible with items that have children and are a link themselves
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
Not relevant, see playground.
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
4.8.2
Reproduction
Description
I pasted the first example in the docs from UNavigation (https://ui.nuxt.com/docs/components/navigation-menu#items). The issue is that top level items can have its own 'to' property but also have children. When tabbing through this list there is no way to open the dropdown and access the children. Pressing space/enter will navigate to the item link.
I believe the dropdown chevron should be focusable by keyboard explicitly and that would solve this problem. I added tabindex="0" to the linkTrailing slot and that already works pretty well.
Additional context
No response
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 UNavigation example in the linked documentation and reproduce the keyboard behavior in the provided playground. Check how a top-level item with both a to property and children handles focus and activation; done means keyboard users can open the dropdown and reach its children without losing normal link navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, 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