Accessibility: aria-required-parent on nested side nav links
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
Describe the bug
When I run axe-devtools on the Redocly demo, I get the following error on nested list items (but not on parents):
Certain ARIA roles must be contained by particular parents
Ensures elements with an ARIA role that require parent roles are contained by them
Element location: li[data-item-id="tag/pet"]
Element source: <li tabindex="0" data-item-id="tag/pet" role="menuitem" class="sc-kYxDKI eoKbCJ">
I do not get the error on non-nested listitems, since the structure is <ul role="menu"><li role="menuitem">
Expected behavior
Running axe-devtools does not produce this error.
The best solution would be to remove role=menuitem and role=menu entirely, since this side navigation is a simple list of links, and doesn't follow the WAI-ARIA menu pattern.
Screenshots
Problematic element:
Markup:
Additional context
Additional info from axe-devtools
Test URL:https://redocly.github.io/redoc/ opens in new window
Impact: Critical
Found on: 9/6/2023 at 2:00 pm
Found: Automatically
Issue tags: cat.aria, wcag2a, wcag131
Help: Certain ARIA roles must be contained by particular parents
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
Reproduce the axe-devtools finding at the Redocly demo URL and inspect the nested li[data-item-id="tag/pet"] structure and its parent elements. Trace the side-navigation entry point that emits the menu and menuitem roles. Done means the nested links follow appropriate list semantics and axe-devtools reports no aria-required-parent violation.
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
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100