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

Server Details Information Panel (i icon in the Footer) is not keyboard or screen reader accessible

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Verified
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 19.1, 20.0
    • Fix Version/s: 20.0
    • Component/s: Accessibility
    • Labels:
      None
    • Environment:
      Initially found in Illinois State University Sakai 19.1 environment.
    • 19 status:
      Verified
    • Test Plan:
      Hide

      With screen reader on: 

      1. Open any page in any tool.
      2. Navigate with the tab key to the bottom of the page (footer area)
      3. Select the I Icon, press enter

      Ensure you can interact with the information and the panel as you'd expect.

      Ensure the information is clear and presentable.

      Show
      With screen reader on:  Open any page in any tool. Navigate with the tab key to the bottom of the page (footer area) Select the I Icon, press enter Ensure you can interact with the information and the panel as you'd expect. Ensure the information is clear and presentable.

      Description

      The i icon in the footer which open the Server Details Information Panel does not have an accessible name. A screen reader's announces, "has Popup menu, Link." This is not clear to the purpose of the icon link.

      Possible solutions: add a textual description for screenreaders <span class="sr-only"> or add an aria-label to the link with a textual description

       

      At the same time, once the link is selected the popup menu content is not in the tab order, does not have keyboard focus, and is not announced by a screen reader. Once the menu is open the keyboard and screen reader focus should be inside the modal until closing the modal with the close button (or esc key, too).

      <a id="Mrphs-footer--details__info" class="fa fa-info-circle"
      href="#" aria-haspopup="true"></a>

        Gliffy Diagrams

          Zeplin

            Attachments

            1. after.png
              after.png
              30 kB
            2. BootstrapPopover.mp4
              931 kB
            3. BootstrapPopover.mp4
              931 kB
            4. Issue41b-notfocued.JPG
              Issue41b-notfocued.JPG
              63 kB
            5. Issue41c-focused.JPG
              Issue41c-focused.JPG
              61 kB

              Issue Links

                Activity

                  People

                  Assignee:
                  sfoster9 Shawn Foster
                  Reporter:
                  jbbeth1 Jen Bethmann
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration