md-menu accessibility (role=menu, role=menuitem not there)

[ghost]

I'm new to accessibility so I might be wrong here, but I was inspecting the DOM elements of md-menu and its md-menu-items on https://material.angularjs.org/latest/#/demo/material.components.menu and was expecting to find menu related aria attributes:

role=menu
role=menuitem

I didn't see these anywhere. Should they be?

[marcysutton]

It uses aria-haspopup to indicate the trigger button has an accompanying menu (which is in a separate part of the DOM), but it only goes part of the way there. The menu component needs more semantics to identify the menu items, and to bind more of a relationship between the trigger button and the menu (using aria-controls=menuId, since the DOM structure won't be hierarchal). One thing to pay attention to is that the markup may need to be present in the DOM at all times for assistive technology, rather than generated on user interaction (a buffer/race condition). Here is a demo that uses hierarchal DOM instead of aria-controls on the trigger button: http://oaa-accessibility.org/example/25/

@rschmukler I can help you test it since this one will probably be tricky.

[marcysutton]

I forgot that Menus have to support links, something that isn't supported by the ARIA menu/menuitem roles (nor do they support text inputs in menus, as another example). For that reason, Menubar should behave more like Menu, using aria-haspopup="true" and eliminating role=menuitem. Once the menu items are hierarchal children of the menu at load time, it will have the required semantics (so aria-owns won't be required).

[antrez770]

Hi how create Accessibility menu in Angular?

[Splaktar]

@antrez770 please try asking on Stack Overflow, Gitter, or the AngularJS Material forums.