Aria Roles on Phosphor Menu Widgets

[zorkow]

Problem: Roles missing

Proposed Solution:

• Add a method for adding roles in widget class
• Add roles in the menu/item classes.

[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.