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

Modal focus lock does not quite follow WAI/ARIA pattern

XMLWordPrintable

    • MOODLE_405_STABLE
    • MOODLE_404_STABLE, MOODLE_405_STABLE
    • MDL-83809-m404
    • MDL-83809-m405
    • MDL-83809-main
    • Hide

      These changes can be tested in any Tiny editor. For example:

      1. Log in as any user
      2. From the user picture menu in the top right, choose Profile
      3. Click Edit profile
      4. Scroll down to the Description section where there is a Tiny editor.
      5. Click the Image button.
      6. Focus should be on the new modal (you can see the blue line surrounding it). Press Tab repeatedly to get to Browse repositories button.
      7. Press Tab again.
        • EXPECTED: Focus should go back to the whole modal.
      8. Press Shift+Tab.
        • EXPECTED (no change): Focus should go back to Browse repositories button.
      9. Press Return to activate the Browse repositories button. The file picker should appear.
      10. Press Escape to cancel the file picker. The file picker will close.
        • EXPECTED: Focus should go back to Browse repositories button on the underlying modal.

      Before this fix, at step 7 the focus goes into the browser UI - you can press Tab several more times to get back to the modal. And at step 10 the focus goes to the top of the page - if you press tab you'll get into the modal.

      Show
      These changes can be tested in any Tiny editor. For example: Log in as any user From the user picture menu in the top right, choose Profile Click Edit profile Scroll down to the Description section where there is a Tiny editor. Click the Image button. Focus should be on the new modal (you can see the blue line surrounding it). Press Tab repeatedly to get to Browse repositories button. Press Tab again. EXPECTED: Focus should go back to the whole modal. Press Shift+Tab. EXPECTED (no change): Focus should go back to Browse repositories button. Press Return to activate the Browse repositories button. The file picker should appear. Press Escape to cancel the file picker. The file picker will close. EXPECTED: Focus should go back to Browse repositories button on the underlying modal. Before this fix, at step 7 the focus goes into the browser UI - you can press Tab several more times to get back to the modal. And at step 10 the focus goes to the top of the page - if you press tab you'll get into the modal.
    • Hide

      Code verified against automated checks.

      Checked MDL-83809 using repository: https://github.com/sammarshallou/moodle.git

      More information about this report

      Built on: Thu Jan 16 09:28:58 AM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-83809 using repository: https://github.com/sammarshallou/moodle.git MOODLE_404_STABLE (0 errors / 0 warnings) [branch: MDL-83809-m404 | CI Job ] MOODLE_405_STABLE (0 errors / 0 warnings) [branch: MDL-83809-m405 | CI Job ] main (0 errors / 0 warnings) [branch: MDL-83809-main | CI Job ] More information about this report Built on: Thu Jan 16 09:28:58 AM UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-83809-m404

      Launching automatic jobs for branch MDL-83809-m405

      Launching automatic jobs for branch MDL-83809-main

      Built on: Tue Feb 4 02:08:09 PM UTC 2025

      Show
      Launching automatic jobs for branch MDL-83809 -m404 https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61981/ Behat (Chrome - boost / --tags @javascript) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61982/ Behat (Chrome - classic / --tags @javascript) Launching automatic jobs for branch MDL-83809 -m405 https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61983/ Behat (Chrome - boost / --tags @javascript) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61984/ Behat (Chrome - classic / --tags @javascript) Launching automatic jobs for branch MDL-83809 -main https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61985/ Behat (Chrome - boost / --tags @javascript) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61986/ Behat (Chrome - classic / --tags @javascript) Built on: Tue Feb 4 02:08:09 PM UTC 2025

      The mobile focus lock code in lob/amd/src/local/aria/focuslock.js is intended to follow the WAI/ARIA pattern, which is linked in the source code:.

      https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

      However, it is not quite right. You can reproduce as follows:

      1. Go anywhere that has a Tiny editor (e.g. go to forum page and click Add discussion topic)
      2. Click the 'Create link' icon and wait for the modal popup to appear
      3. Press Tab a bunch of times until focus goes to the last item in dialog ('Create link' button)
      4. Press Tab one more time
        • EXPECTED: Focus should go to the first item in dialog
        • ACTUAL: It goes to the browser UI, and you have to tab through a bunch more times to get to the first thing in dialog.

      After discussion with Andrew Lyons, we don't think this is intentional, so it should be fixed.

      I am not sure whether it is the same cause, but there is also an issue relating to nested modals:

      1. Go anywhere that has a Tiny editor (e.g. go to forum page and click Add discussion topic)
      2. Click the 'Insert image' icon and wait for the modal popup to appear
      3. Press Tab until you get to the 'Browse repositories' button.
      4. Press Return to open the 'Browse repositories' modal.
      5. Press Escape to close it again
        • EXPECTED: Focus should go bcak to the 'Browse repositories' button or else somewhere else in the 'Insert image' popup
        • ACTUAL: It goes to the browser UI as above.

      It is possible this one could be specific to the 'Insert image' popup so might be unrelated, I don't know yet, but if it is similar I'll try to fix that too.

        1. (1) 10 Passed -- (Main)MDL-83809.png
          (1) 10 Passed -- (Main)MDL-83809.png
          62 kB
        2. (1) 7 Passed -- (Main)MDL-83809.png
          (1) 7 Passed -- (Main)MDL-83809.png
          45 kB
        3. (1) 8 Passed -- (Main)MDL-83809.png
          (1) 8 Passed -- (Main)MDL-83809.png
          50 kB
        4. (1) 9 Passed -- (Main)MDL-83809.png
          (1) 9 Passed -- (Main)MDL-83809.png
          59 kB

            quen Sam Marshall
            quen Sam Marshall
            Katie Ransom Katie Ransom
            Jun Pataleta Jun Pataleta
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 56 minutes
                56m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.