Ensure keyboard and programmatic focus moves to opened menus

[New] - 3/13/2018

[Issue]

When opening the standalone menus in the main banner with the keyboard, the focus does not move automatically to the first option of the menu; instead, the focus stays on the toggle link. Additionally, navigation of menu does not follow standard keyboard paradigm of a menu.

[User Impact]

Users of screen reader and keyboard-only users may not choose an option into the menu. Since this does not follow standard keyboard paradigm, screen reader users get confused when they follow menu keyboard paradigm and they are not able to access menuitem.

[Code]

HTML:

<li class="Mrphs-sitesNav__menuitem dropdown-is-visible">    <a class="link-container" href="http://qa03-sakai.marist.edu:8080/portal/site/mercury" title="mercury site">        <span>mercury site</span>    </a>    <a class="Mrphs-sitesNav__dropdown is-clicked" href="#" data-site-id="mercury" role="separator"></a>    <ul class="Mrphs-sitesNav__submenu is-visible" role="menu">       <li class="Mrphs-sitesNav__submenuitem"><a class="Mrphs-sitesNav__submenuitem-link" role="menuitem" href="http://qa03-sakai.marist.edu:8080/portal/site/mercury/page/mercury-100" title="Overview" tabindex="-1">  <span class="Mrphs-sitesNav__submenuitem-icon"><span class="toolMenuIcon icon-sakai--sakai-iframe-site"></span></span>  <span class="Mrphs-sitesNav__submenuitem-title">Overview</span></a></li>

...

[Expected behavior]

Developers must ensure that the menu properly allows focus to be set on the first item within the menu and it must follow standard keyboard paradigm of menu.

[Reference links]

Developers can refer following links for menu:
https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/
http://whatsock.com/training/matrices/#menu
https://www.w3.org/TR/wai-aria-1.1/#menu
https://www.w3.org/WAI/tutorials/menus/