Make MathJax contextual menu properly accessible
Created by: jcsteh
The MathJax contextual menu inserts clickable divs at the end of the document, but it does not focus them in any way or expose semantic information. For screen reader users (and perhaps users of other assistive technology products), these are difficult to locate. Most users wouldn't even realise this menu had appeared, let alone know how to use it. This can all be fixed with ARIA and keyboard handling.
Things that need to be done:
- The menu items need to be focused. Either set tabindex="-1" for all menu items and focus the item or set tabindex="-1" on the root of the menu, focus that and set aria-activedescendant on it to indicate the active item.
- Menus need to be given an ARIA role of menu. Menu items need to be given appropriate menu item roles (menuitem, menuitemcheckbox, menuitemradio).
- There needs to be an appropriate hierarchical relationship between submenu items and their submenu. Either the DOM positioning needs to be changed or aria-owns needs to be used.
- Appropriate keyboard navigation needs to be implemented; e.g. up/down arrows to move between items, left/right arrows to enter/exit submenus, enter to activate an item.
/cc @pkra