Redocly / Redocly/redoc

Accessibility: aria-required-parent on nested side nav links

Open
#2,402 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y Type: Bug
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:
Screenshot of Redocly demo with problematic element highlighted

Markup:
Screenshot of Chrome DevTools Elements pane. Problematic element's parent does not have role="menu:

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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.