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 [Tentative]
    • Fix Version/s: 20.0 [Tentative]
    • 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

          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 Source Code