Accessibility for Menu/MenuItem

[jurokapsiar]

Bug Report

Steps

Open Stardust components page, navigate to Menu examples and observe HTML generated for both Shorthand and Children API.

Expected Result

According to ARIA best practices as well as to our testers, the menu structure should have following structure:

      <ul role="menu" aria-label="About">
        <li role="none">
          <a role="menuitem"
             href="mb-about.html#overview"
             tabindex="0">
            Overview
          </a>
        </li>
        ...
      </ul>

Note: role='none' can be replaced with role='presentation' which is supported by more browsers. <a> can be replaced with <button> or <div> for other purposes.

It is important that the click handler is on the element that is focusable both by the browser as well as by the screen reader. This means it has to be either a naturally tabbable element or element with tabIndex >= 0 and it has to have role='menuitem'.

This can be achieved by small modifications to current MenuItem.tsx code for Shorthand API:

• <li> needs to be marked as role=presentation
• onClick handler needs to move from the root element to <a>
• <a> will need to be marked as role='menuitem' (which will be applied by the behavior)

Is there a way to achieve this in the Child API?
Or if user provides child components then it is his responsibility to conform to the standard approach and we just need to document this?

Reference: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

Actual Result

<ul class="ui-menu a u b c d e f">
  <li class="ui-menu__item v g h i j k l m n o p q r w x y z" onclick='...'>
    <a class="ui-menu__item__anchor s t">Editorials</a>
  </li>
</ul>

Version

0.2.3

Testcase