Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-38332

Ensure keyboard and programmatic focus moves to opened menus

    Details

    • 12 status:
      Resolved
    • Previous Issue Keys:
      A11YTEST-256

      Description

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

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  ottenhoff Sam Ottenhoff
                  Reporter:
                  jonespm Matthew Jones
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code