Aria Roles on Phosphor Menu Widgets #391
Description
From Web4All 2019 Hackathon
@zorkow
Problem: Roles missing
Proposed Solution:
Add a method for adding roles in widget class
Add roles in the menu/item classes.
Comment from @sinabahram
General strategy, just to make sure we're on the same page.
High level div containing the whole menu gets role="menubar"
Individual children that instantiate menus e.g. file, edit, run, etc. get role="menuitem" not role="menu" (this is critical)
The ul for a "file" or "edit" or "run", then gets role="menu"
Children at any level get role="menuitem", so the link that says "file" and then individual children of "file" all get role="menuitem".
If something like file has children, which it does, it gets aria-haspopup="true" to indicate it has children e.g. that it is a submenu.
If something is a parent, again like "file", "edit", "run", etc. then they also need an aria-expanded="false" when they are collapsed and aria-expanded="true" on it being expanded. Note please, that the initial state needs to have aria-expanded="false" and then JS can togle these states back and forth. Often times the initial value of aria-expanded is left off.