Details

    • Testing Instructions:
      Hide

      This issue should be tested in diferent browsers/environments

      1. Modal windows
        1. Go to the frontpage and click Backup
        2. Click the Cancel button
        3. The scope of the focused elements SHOULD be limited to the modal window, you can try it clicking the Tab button several times. Other elements depending on the browser (like the code inspector) could also be focused, the important thing to test is that the main moodle layout can not be accessed
        4. Go to a course and enable editing mode
        5. Click Add an activity or resource (only in 23 and master have activity chooser, not applicable to 22)
        6. The scope of the focused elements SHOULD be limited to the modal window, you can try it clicking the Tab button several times. Other elements depending on the browser (like the code inspector) could also be focused, the important thing to test is that the main moodle layout can not be accessed
        7. Inspect the close button of the panel header, it SHOULD have a 'Close' title
        8. Click on the 'Close' button, if the whole moodle page is long enough to have a scroll the right-side vertical scroll SHOULD be restored
      2. Non modal windows
        1. Go to a course with manual enrolments enabled
        2. Go to the course administration -> users -> enrolled users
        3. Click Enrol users button
        4. The focus SHOULD be on the Assign roles element (only in 23 and master)
        5. If you inspect the HTML of the select element you SHOULD see a label assigned to it
        6. Go to site administration -> users -> accounts -> cohorts, and create a couple of cohorts with any user
        7. Go to a course and course administration -> Users -> Enrolment methods
        8. Add cohort sync method and select one of the cohorts you have created
        9. Go to course administration -> users -> enrolled users
        10. Click Enrol cohort
        11. The focus SHOULD be on the assign roles select element (only in 23 and master)
        12. If you inspect the HTML of the select element you SHOULD see a label assigned to it
        13. Login as an admin and go to the frontpage
        14. Enable editing mode and add the community finder block
        15. Click Search on the community finder block
        16. Browse courses until you find a course with a preview image on the right side
        17. Click on the image, the focus SHOULD be in the close button, so if you click space/enter after clicking on the image the image SHOULD be closed (only in 23 and master)
        18. Click again on the image and inspect the header of the opened panel
        19. The image text SHOULD be wrapped in a H1 tag
        20. Browse courses until you find a course with comments
        21. Click on 'Comments (N)', the focus SHOULD be in close button, so if you click space/enter after clicking on the image the image SHOULD be closed (only in 23 and master)
        22. Click again on 'Comments (N)' and inspect the header of the opened panel
        23. The 'Comments (N)' text SHOULD be wrapped in a H1 tag
      3. ARIA attributes (test with a screen reader if possible) (only in master)
        1. Open a screen reader
        2. Login as admin
        3. Go the frontpage or any course and click Backup
        4. Click Cancel button
        5. If you inspect the modal window you SHOULD see role = dialog and aria-labelledby = moodle-dialogue-N-header-text, where N is a number
        6. Depending on the software and the browser used you would hear the content of the modal window
        7. Try the same with different browsers
      Show
      This issue should be tested in diferent browsers/environments Modal windows Go to the frontpage and click Backup Click the Cancel button The scope of the focused elements SHOULD be limited to the modal window, you can try it clicking the Tab button several times. Other elements depending on the browser (like the code inspector) could also be focused, the important thing to test is that the main moodle layout can not be accessed Go to a course and enable editing mode Click Add an activity or resource (only in 23 and master have activity chooser, not applicable to 22) The scope of the focused elements SHOULD be limited to the modal window, you can try it clicking the Tab button several times. Other elements depending on the browser (like the code inspector) could also be focused, the important thing to test is that the main moodle layout can not be accessed Inspect the close button of the panel header, it SHOULD have a 'Close' title Click on the 'Close' button, if the whole moodle page is long enough to have a scroll the right-side vertical scroll SHOULD be restored Non modal windows Go to a course with manual enrolments enabled Go to the course administration -> users -> enrolled users Click Enrol users button The focus SHOULD be on the Assign roles element (only in 23 and master) If you inspect the HTML of the select element you SHOULD see a label assigned to it Go to site administration -> users -> accounts -> cohorts, and create a couple of cohorts with any user Go to a course and course administration -> Users -> Enrolment methods Add cohort sync method and select one of the cohorts you have created Go to course administration -> users -> enrolled users Click Enrol cohort The focus SHOULD be on the assign roles select element (only in 23 and master) If you inspect the HTML of the select element you SHOULD see a label assigned to it Login as an admin and go to the frontpage Enable editing mode and add the community finder block Click Search on the community finder block Browse courses until you find a course with a preview image on the right side Click on the image, the focus SHOULD be in the close button, so if you click space/enter after clicking on the image the image SHOULD be closed (only in 23 and master) Click again on the image and inspect the header of the opened panel The image text SHOULD be wrapped in a H1 tag Browse courses until you find a course with comments Click on 'Comments (N)', the focus SHOULD be in close button, so if you click space/enter after clicking on the image the image SHOULD be closed (only in 23 and master) Click again on 'Comments (N)' and inspect the header of the opened panel The 'Comments (N)' text SHOULD be wrapped in a H1 tag ARIA attributes (test with a screen reader if possible) (only in master) Open a screen reader Login as admin Go the frontpage or any course and click Backup Click Cancel button If you inspect the modal window you SHOULD see role = dialog and aria-labelledby = moodle-dialogue-N-header-text, where N is a number Depending on the software and the browser used you would hear the content of the modal window Try the same with different browsers
    • Affected Branches:
      MOODLE_21_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE, MOODLE_24_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-30899_master

      Description

      Modal windows need to be implemented consistently to help ensure assistive technology users can interact effectively with the window.

      Modal windows are a tough problem because assistive technologies don't fully support the ARIA attributes that help define modal windows. Every effort should be made to (1) add ARIA attributes for modal windows, (2) properly set the focus to the modal window, (3) trap the keyboard so users cannot escape the modal window, and (4) put the modal window in a place in the DOM that is easy for screen readers users to find and put a heading 1 as the first item in the modal window.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  0 Vote for this issue
                  Watchers:
                  6 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    14/Jan/13