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

Ensure that keyboard focus remains within modal simulated dialogs

    XMLWordPrintable

    Details

    • Test Plan:
      Hide
      1. Prequisities - make sure a user account is enrolled in several sites. 
      2. Log into Sakai as that user.
      3. Tab over to the Sites listing with your keyboard.
      4. Press the Enter key
      5. Tab around in the Sites area. Keep tabbing to ensure it loops within the Sites listing and does not focus on items outside of the modal.

      Expected Results:  Tabbing keeps you within the sites area, until you select an action, which will then execute that action.

      Show
      Prequisities - make sure a user account is enrolled in several sites.  Log into Sakai as that user. Tab over to the Sites listing with your keyboard. Press the Enter key Tab around in the Sites area. Keep tabbing to ensure it loops within the Sites listing and does not focus on items outside of the modal. Expected Results:  Tabbing keeps you within the sites area, until you select an action, which will then execute that action.

      Description

      The main navigation of the environment provides a button titled "Sites" that spawns a modal window designed to allow the user to see all sites associated with the environment. However, once spawned the dialog does not restrict focus within the boundaries of the dialog. Instead, a keyboard only user is able to tab out of the dialog and return to the page that spawned it. This can cause serious issues for both keyboard only users (who will not know what element they are currently focused on), as well as screen reader users (who will not realize they have navigated away from the model and are interacting with inactive content).

      <div class="Mrphs-sitesNav__menuitem view-all-sites-btn" style="z-index: 1005;">

      Developers must ensure that when a modal simulated dialog is open, focus remains within the dialog. This can be done by using onFocus and onBlur and other JavaScript techniques to manage the focus appropriately. There are many techniques that can be used to meet this best practices. Developers must ensure that tab and shift+tab are handled appropriately. Ideally focus should wrap from the last element to the first element. It may also be beneficial to hide the rest of the page content from the screen reader user by setting aria-hidden="true" on the other page content.

      The tab order must not be restricted for non-modal windows which requires or allows users to interact with the background/parent content.

      Developers must ensure that the modal dialog can be closed via the keyboard so that focus is not trapped in the dialog for users of keyboard only. When there is a keyboard operable close button there is not a keyboard trap.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  ottenhoff Sam Ottenhoff
                  Reporter:
                  mclare Matt Clare
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  5 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code