redoc icon indicating copy to clipboard operation
redoc copied to clipboard

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

Open kburk1997 opened this issue 2 years ago • 0 comments

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

kburk1997 avatar Sep 06 '23 18:09 kburk1997