Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-35918

M.core.notification dialogues need to use aria-hidden on everything outside the modal

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Note

      You will need to use a screen reader to perform these tests.

      Single dialogue

      1. Log in as admin
      2. Create a course
      3. Under "Description" in "course summary files" click on the left icon to open the file picker window
      4. Enable the screen reader
      5. Navigate around the dialogue using the screen reader and confirm that the screen reader's focus doesn't shift to the background content outside the dialogue popup
        • Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader.
      6. Close the dialogue
      7. Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader

      Multiple dialogue (iframe)

      1. Log in as admin
      2. Create a course
      3. Under "Description" in "course summary" click on the far right icon to open the manage files iframe window
      4. In the manage files popup click the left icon to open the file picker dialogue
      5. Enable the screen reader
      6. Navigate around the dialogue using the screen reader and confirm that the screen reader's focus stays within the "manage files" iframe, which includes the file picker popup. You should be able to navigate through the file picker popup but only into the "manage files" header (to close it, for example) but not into the background document body.
        • Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader.
      7. Close both dialogues
      8. Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader

      Multiple dialogue

      1. Log in as admin
      2. Create a course
      3. Under "Description" in "course summary files" click on the left icon to open the file picker window
      4. Select the wikipedia option and search for an image
      5. In the search results, click on one of the images to bring up the preview popup
      6. Enable the screen reader
      7. Navigate around the preview popup using the screen reader and confirm that the screen reader's focus doesn't shift to the background content outside the preview popup
        • Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader.
      8. Close the image preview dialogue and confirm that the screen readers focus is now locked to the file picker dialogue.
      9. Close the file picker
      10. Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader
      Show
      Note You will need to use a screen reader to perform these tests. Single dialogue Log in as admin Create a course Under "Description" in "course summary files" click on the left icon to open the file picker window Enable the screen reader Navigate around the dialogue using the screen reader and confirm that the screen reader's focus doesn't shift to the background content outside the dialogue popup Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader. Close the dialogue Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader Multiple dialogue (iframe) Log in as admin Create a course Under "Description" in "course summary" click on the far right icon to open the manage files iframe window In the manage files popup click the left icon to open the file picker dialogue Enable the screen reader Navigate around the dialogue using the screen reader and confirm that the screen reader's focus stays within the "manage files" iframe, which includes the file picker popup. You should be able to navigate through the file picker popup but only into the "manage files" header (to close it, for example) but not into the background document body. Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader. Close both dialogues Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader Multiple dialogue Log in as admin Create a course Under "Description" in "course summary files" click on the left icon to open the file picker window Select the wikipedia option and search for an image In the search results, click on one of the images to bring up the preview popup Enable the screen reader Navigate around the preview popup using the screen reader and confirm that the screen reader's focus doesn't shift to the background content outside the preview popup Note: Don't use "tab" to navigate the dialogue because there is javascript code there to specifically catch that key press and lock it to the dialogue. Use any other navigation options available to the screen reader. Close the image preview dialogue and confirm that the screen readers focus is now locked to the file picker dialogue. Close the file picker Confirm that you can now navigate the main page (after the dialogue has been closed) using the screen reader
    • Affected Branches:
      MOODLE_23_STABLE, MOODLE_29_STABLE
    • Fixed Branches:
      MOODLE_28_STABLE, MOODLE_29_STABLE
    • Pull Master Branch:
      MDL-35918-master
    • Sprint:
      Team Both Sprint 1

      Description

      Issue
      Reading order - Once the Add activity or resource modal window is brought up and the user tabs from the cancel button to the next item, the reading order is disturbed and the focus is brought back at the very top of the browser window. Keyboard-only users and screen reader users are then unable to focus back into the modal to close it.

      Standard Level
      WCAG 2 1.3.2 (A) http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-sequence

      Impact
      Critical

      Example Link
      http://demo.moodle.net/course/view.php?id=625&notifyeditingon=1

      Test Steps

      1. Login as a teacher
      2. Navigate to the CF101 course
      3. Click the add and activity or resource link in a topic
      4. Tab through the modal to the cancel button
      5. Tab past the button and return to the top of the page.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                9 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  9/Nov/15