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

Ensure ARIA roles, states, and properties are valid on Mrphs-sitesNav__menuitem

    XMLWordPrintable

    Details

    • 11 status:
      Resolved
    • Test Plan:
      Hide

      Should be tested with keyboard nav, sighted or unsighted testing should be be valid.
      Two items:
      1.Using Keyboard navigation navigate to a new site title and enter the site:
      Tab key through the sites list and/or More Sites and press Enter to select site. New site should be successfully loaded.

      2.Using Keyboard navigation navigate to a new site's tool drawer, expand it and select an tool:
      Tab key through the sites list and/or More Sites and press Enter to expand a tools drawers, then tab to a tool and press enter to select a tool. Specific tool should be successfully load after last press of enter.

      Show
      Should be tested with keyboard nav, sighted or unsighted testing should be be valid. Two items: 1.Using Keyboard navigation navigate to a new site title and enter the site: Tab key through the sites list and/or More Sites and press Enter to select site. New site should be successfully loaded. 2.Using Keyboard navigation navigate to a new site's tool drawer, expand it and select an tool: Tab key through the sites list and/or More Sites and press Enter to expand a tools drawers, then tab to a tool and press enter to select a tool. Specific tool should be successfully load after last press of enter.

      Description

      The current structure encapsulates the two <span>s inside one <a>. As such, it's hard (impossible?) to actuate the tool drop menu with the keyboard - because the enter key navigates to the site.

      <li class="Mrphs-sitesNav__menuitem  is-selected ">
                              <a href="https://trunk-mysql.nightly.sakaiproject.org/portal/site/e9fa23e2-80ea-43fd-8bcd-95b72b6345fa" title="Discussion 1 SMPL101" role="menuitem" aria-haspopup="true">
                                  <span>Discussion 1 SMPL101</span>
                                  <span class="Mrphs-sitesNav__dropdown" tabindex="-1" data-site-id="e9fa23e2-80ea-43fd-8bcd-95b72b6345fa"></span>
                              </a>
                          </li>
      
      

      This screencasts demonstrates the problem http://www.screencast.com/users/mattclare/folders/Snagit/media/bc45b52e-84e4-4a3c-9e69-c4ce7f9d9a40

      A solution likely requires limiting the <a> to the first span. There are probably many solutions for the tool menu.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  hunt-son Hunter Sonn
                  Reporter:
                  mclare Matt Clare
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  5 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code