Make menu more accessible

Preliminary tasks, many from accessibility#1 (comment 4855) below:

1. Hide D7 menubar
2. Fix for D8
3. After getting focus into top menu, tabbing and back-tabbing revealed there was something hidden between Quick Search textbox and the CiviCRM icon. Opening submenus and back-tabbing revealed it was the search options for the Quick Search textbox. Please remove this from tab order.
4. After getting focus into top menu, Space did not open (and when repeated, close) child menu on current item. It should act similarly to Return.
5. When focus is on an item that could be selected to navigate somewhere, Return worked fine but Space did not replicate this.
6. When on an open sub-submenu (eg Contributions > Accounting Batches with Open Batches with focus), using left arrow correctly moved focus to Accounting Batches, but it did not close the sub-submenu.
7. When on a submenu, using left arrow should close the submenu and move focus to parent item. Instead it moved focus to menu item to left of parent item. The submenu was left open when it should have been closed. 1. [ ] When on a sub-submenu, escape should only close that level of menu but closes both the sub-submenu and the submenu.
8. "First item in menu bar should be in the tab order (tabindex=0)." (https://staff.washington.edu/tft/tests/menus/index.html). This may be a bit of work to implement in all CMSes but I think tabindex=0 for CiviCRM menu makes sense as the default on CiviCRM pages on default CMS installs. The CiviCRM Menu left item should be considered the QuickSearch. There appears to be an item for a div around the textarea and a separate way to focus on the textarea itself. The div around the textarea should be tabindex=0.
9. The cited spec is relatively silent, but other accessible menus have different implementations on the following: 1) When focus is on top menu item and its submenu is open, left and right cycle focus to left and right top menu items and shift which submenu is open to the one under the top menu focussed item. 2a) When focus is on a submenu item left closes the submenu, cycles focus to left on top menu and opens that top menu's submenu. 2b) When focus is on a submenu item without a subsubmenu, right similarly closes submenu, cycles focus right on top menu and opens that top menu item's submenu. 2c) When focus is on a submenu item with a subsubmenu, right opens the subsubmenu. Let's change behaviour 1), 2a) and 2b) to not opening new submenu. Leave 2c) as is. 1. [ ] When focus is not on the menu, cursor hovering over a menu item brings focus to it and opens submenu. Submenu should not open until click, return or space.

A user should be able to navigate the menu bar by use of the keyboard:

1. The menu bar should occupy one tab stop
   1. When focused on a menu at the top level:
   2. The right arrow key should move the user to the next top-level menu
   3. The left arrow key should move the user to the previous top level menu
   4. User focus should wrap to the beginning if the user advances past the final menu item. Likewise, if the user tries to navigate to the previous item from the first menu, focus should wrap to the last menu.
   5. The down-arrow and ENTER keys should expand a child menu and focus the user on the first item 1. [ ] When a character is typed, the next menu item starting with that letter receives the focus, circling around to first when there are no more. If no menu item starts with the typed character, focus does not move. (deprecated by HTML 5.2 accesskey standard)
2. When focused on a child menu
   1. The down arrow key should move the user to the next menu item
   2. The up arrow key should move the user to the previous menu item
   3. The right arrow key should expand a menu item with a submenu and place user focus on the first item in that submenu. If there is no submenu, then no action is taken.
   4. The left arrow key should collapse a submenu and place user focus on the parent of that submenu
   5. The ESC key should close the active child menu, and any submenus, and return user focus to the parent menu at the top level. 1. [ ] When a character is typed, the next child menu item starting with that letter receives the focus, circling around to first when there are no more. If no child menu item starts with the typed character, focus does not move. (deprecated by HTML 5.2 accesskey standard)

Test the menu works on default installs (ie default theme!) on

1. Drupal 7
2. WordPress
3. Joomla
4. Backdrop
5. Drupal 8 (NB: deliberately ignoring support for Drupal 6.)

Test the menu works on:

1. Drupal 7 site with shoreditch theme installed
2. Drupal 7 site with mosaico installed, on a CiviMail mosaico page.

A more detailed functional spec is provided at http://lists.w3.org/Archives/Public/wai-xtech/2007Dec/att-0025/index.html#menu

A good implementation that might be useful for its implementation details (seeing View Source) is https://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html. As there are no sub-submenus, I imagine the code implementation needs to be extended to opening sub-submenus properly.

Was https://issues.civicrm.org/jira/browse/CRM-20824

Original description from https://civicrm.stackexchange.com/questions/17735/access-for-blind-users-to-civicrm/17752#17752

The menu bar is keyboard accessible, but awkwardly. Generally I find it best to focus on the first item then TAB (as opposed to arrowing) to the top level menu the user wants to interact with before pressing ENTER to activate the pop-up menu. You will then have to locate the HTML list element containing the menu choices. Often this element appears after the menu bar, or at the bottom of the virtual document (sometimes depending on the CMS theme, sometimes depending on, seemingly, the browser’s mood). In either case, it will not appear immediately “under” the activated menu.