Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessibility role on MenuItem should be on `a` inside the `li`

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

Chrome Version 65.0.3325.181 (Official Build) (64-bit) on OSX

Reproduction link

https://ant.design/components/menu/

Steps to reproduce

Use Chrome Developer tools to create an Accessibility Audit.

What is expected?

Should pass audit.

What is actually happening?

[aria-*] attributes do not match their roles.

According to this the role="menuitem" should be on an a element inside the li instead of on the li itself https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menu-button/menu-button-links.html

Issue Analytics

State:
Created 5 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

2reactions

picodothcommented, Apr 27, 2018

@cdeutsch I have two ongoing prs to address the issue. But please note that in the case of nav items like:

<li>
  <a role="menuitem">link</a>
</li>

We leave it to the consumer for giving role="menuitem":

<MenuItem role={null}>
  <a role="menuitem">link</a>
</MenuItem>

Note we need the role={null} part. The reason is mainly to keep convenient default aria-* value for MenuItem and to avoid introducing breaking changes.

0reactions

cdeutschcommented, May 22, 2018

@yesmeck yes, it worked for me 👍

Top Results From Across the Web

ARIA: menuitem role - Accessibility - MDN Web Docs

The menuitem role indicates the element is an option in a set of choices contained by a menu or menubar.

ARIA role="menuitem" for <a> or <li> - Stack Overflow

When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first...

Navigation Menu Button Example | APG | WAI - W3C

The menuitem role is on the HTML a element contained by each li element so link behaviors are available when focus is set...

WAI-ARIA: Role=MenuItem - DigitalA11Y

Authors MUST ensure that menu items are owned by an element with role menu or menubar in order to identify that they are...

Creating Accessible Menus and Mega Menus - Level Access

All child roles of Menuitem, Menuitemcheckbox, or Menuitemradio must be focusable or referenced directly via aria-activedescendant from the focusable Menu or ...