[menu-button] MenuLink causing axe warnings due to div with `role="none"` wrapping each link

🐛 Bug report

Current Behavior

MenuLink’s (with or without a passed as prop) renders a div around an a tag. The div contains a role="none" attribute that is causing Axe warnings. Thinking the role of menuitem should live on the containing div.

Expected behavior

No axe violations when using the MenuLink component correctly

Reproducible example

Here is the html of the user menu, which contains 2 MenuLink’s and 1 MenuItem. You can see clearly where the 2 axe violations come from as the links have role="none" in their outer div container.

expanded div, showing role="none" on div and role="menuitem" on child a tag

Axe violations:

Suggested solution(s)

Could role live on outer div? In testing that out it seems to work fine with screen reader and keyboard nav

Other option is to use a MenuItem instead and use history.push to route on click

Additional context

Your environment

Software	Name(s)	Version
Reach Package	@reach/menu-button	0.12.1
React	react	17.0.1
Browser	chrome	88.0.4324.146
Assistive tech	VoiceOver on Chrome
Node		14.15
npm/yarn	yarn	2.4
Operating System	Catalina	10.15.7

[straker]

👋 Axe-core developer here.

The specific violation occurs because of the use of role=none and tabindex=-1 together, and not so much with the use of role=none itself. There is a little known spec that says a presentational role that is focusable or uses global aria properties cannot keep the presentational role. So in this case the role=none is not applied and the implicit role of the element will be used instead.

However since the implicit role of a div is null, the role=none is not strictly necessary and should be safe to remove. You could also remove the tabindex if the div element is not focused programatically.

[xirclebox]

At first glance, I questioned the user of the role="none". And just like others, I would recommend removing it since it’s not being used on a <li>. Which leads me to ask why divs are being used instead of an unordered list which is more semantic according to HTML spec? https://www.w3.org/TR/html52/grouping-content.html#the-ul-element