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

At advanced levels of zoom, focus is obscured by messages and notifications.

XMLWordPrintable

    • MOODLE_403_STABLE
    • MDL-81702-405
    • MDL-81702-500
    • MDL-81702-main
    • Hide

      Site home link

      1. Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE)
      2. Open the left menu drawer
      3. Ensure there is a link at the top going back to the home page
      4. Open a course C1
      5. Open the course index menu
      6. Open the developer tab and look for '#theme_boost-drawers-courseindex  [data-region="site-home-link"]'
      7. Ensure there is no result.

      Site Home drawer

      1. Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE)
      2. Open the left menu drawer
      3. Press enter
      4. Ensure the drawer closes
      5. Open the left menu drawer again
      6. Press tab several times to go through each item
      7. Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon.

      Site Messages

      1. Go to the home page
      2. Open the message drawer
      3. Press Enter
      4. Ensure the drawer closes
      5. Open the message drawer again
      6. Press Esc
      7. Ensure the drawer closes
      8. Open the message drawer again
      9. Ensure that there is a backdrop over the main part of the screen and the drawer is showing as "active" (so not in the backdrop)
      10. Press tab several times to go through each item
      11. Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon.
      12. Click on "see all"
      13. Open the message drawer again
      14. Check points 3 to 8 again

      Site Notifications

      1. Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE)
      2. Open the notification drawer
      3. Press Esc
      4. Open the message drawer again
      5. Press tab several times to go through each item
      6. Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "check" /Mark all as read icon.

      Course drawers and index : Zoom 100%

      • Create a course with a set of random block added to the right drawer
      • In turn and for both course index and block drawer:
      • Open the drawer (course index or block drawer)
      • Press Enter
      • Ensure the drawer closes
      • Open the drawer
      • Ensure that there is a no backdrop over the main part of the screen
      • Press tab several times to go through each item
      • Ensure each item is highlighted in turn and when we reach the end of the list we go into the main page 

      Course drawers and index : Zoom 250%

      • Create a course with a set of random block added to the right drawer
      • In turn and for both course index and block drawer:
      • Open the drawer (course index or block drawer)
      • Press Enter
      • Ensure the drawer closes
      • Open the drawer
      • Ensure that there is a no backdrop over the main part of the screen
      • Press tab several times to go through each item
      • Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon.

      Course AI Drawer

      • Create a course C1
      • Setup an Dummy AI provider (septs are in MDL-84705 and you can check the project here : https://github.com/moodlemobile/moodle-aiprovider_dummyai )
      • Switch to mobile view (on chrome: developper view / Dimensions: iPhoneSE)
      • Go in the C1 course and create an Assignment A1
      • On A1 page, click on AI features > Summarise button
      • Ensure the AI sidebar opens
      • Press tab several times
      • Ensure that the focus is kept within the AI drawer

       

      Show
      Site home link Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE) Open the left menu drawer Ensure there is a link at the top going back to the home page Open a course C1 Open the course index menu Open the developer tab and look for '#theme_boost-drawers-courseindex   [data-region="site-home-link"] ' Ensure there is no result. Site Home drawer Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE) Open the left menu drawer Press enter Ensure the drawer closes Open the left menu drawer again Press tab several times to go through each item Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon. Site Messages Go to the home page Open the message drawer Press Enter Ensure the drawer closes Open the message drawer again Press Esc Ensure the drawer closes Open the message drawer again Ensure that there is a backdrop over the main part of the screen and the drawer is showing as "active" (so not in the backdrop) Press tab several times to go through each item Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon. Click on "see all" Open the message drawer again Check points 3 to 8 again Site Notifications Go to the home page and in mobile view (on chrome: developper view / Dimensions: iPhoneSE) Open the notification drawer Press Esc Open the message drawer again Press tab several times to go through each item Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "check" /Mark all as read icon. Course drawers and index : Zoom 100% Create a course with a set of random block added to the right drawer In turn and for both course index and block drawer: Open the drawer (course index or block drawer) Press Enter Ensure the drawer closes Open the drawer Ensure that there is a no backdrop over the main part of the screen Press tab several times to go through each item Ensure each item is highlighted in turn and when we reach the end of the list we go into the main page  Course drawers and index : Zoom 250% Create a course with a set of random block added to the right drawer In turn and for both course index and block drawer: Open the drawer (course index or block drawer) Press Enter Ensure the drawer closes Open the drawer Ensure that there is a no backdrop over the main part of the screen Press tab several times to go through each item Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon. Course AI Drawer Create a course C1 Setup an Dummy AI provider (septs are in MDL-84705 and you can check the project here : https://github.com/moodlemobile/moodle-aiprovider_dummyai ) Switch to mobile view (on chrome: developper view / Dimensions: iPhoneSE) Go in the C1 course and create an Assignment A1 On A1 page, click on AI features > Summarise button Ensure the AI sidebar opens Press tab several times Ensure that the focus is kept within the AI drawer  
    • Hide

      Code verified against automated checks with warnings.

      Checked MDL-81702 using repository: https://github.com/laurentdavid/moodle.git

      Should these errors be fixed?

      Built on: Wed Jun 4 10:33:16 UTC 2025

      Show
      Code verified against automated checks with warnings. Checked MDL-81702 using repository: https://github.com/laurentdavid/moodle.git MOODLE_405_STABLE (0 errors / 1 warnings) [branch: MDL-81702-405 | CI Job ] overview (0/0) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/1) , gherkin (0/0) , MOODLE_500_STABLE (0 errors / 1 warnings) [branch: MDL-81702-500 | CI Job ] overview (0/0) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/1) , gherkin (0/0) , main (0 errors / 1 warnings) [branch: MDL-81702-main | CI Job ] overview (0/0) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/1) , gherkin (0/0) , Should these errors be fixed? Built on: Wed Jun 4 10:33:16 UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-81702-404

      Launching automatic jobs for branch MDL-81702-405

      Launching automatic jobs for branch MDL-81702-500

      Launching automatic jobs for branch MDL-81702-main

      Built on: Wed Apr 23 12:25:25 UTC 2025

      Show
      Launching automatic jobs for branch MDL-81702 -404 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/19105/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65322/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65323/ Behat (Firefox - boost) Launching automatic jobs for branch MDL-81702 -405 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/19106/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65324/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65325/ Behat (Firefox - boost) Launching automatic jobs for branch MDL-81702 -500 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/19107/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65326/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65327/ Behat (Firefox - boost) Launching automatic jobs for branch MDL-81702 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/19108/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65328/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65329/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65670/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65331/ App tests (stable app version) --> unrelated Built on: Wed Apr 23 12:25:25 UTC 2025
    • 5
    • HQ 2025 Sprint I2 Planning

      The UCL Digital Accessibility team reported that at advanced levels of zoom the notifications and messages panels obscure some content from view. At 300% the focus is on elements that are not in view. This fails on the fact that you can't visually see where the focus is currently - WCAG 2.4.11 Focus not Obscured (AA).

       

      The agreed solution to resolve this issue will be when the screen narrows and the grey overlay is active tabbing in either side navigation bars the tab order will be contained within the sidebar until it is closed.  This will prevent unexpected changes of context and focus shifting to the main content while content is obscured.

        1. After_patch.png
          103 kB
          Ferran Recio
        2. Before_patch.png
          83 kB
          Ferran Recio
        3. image-2024-05-14-12-10-28-982.png
          374 kB
          Brett Dalton
        4. image-2024-05-14-12-11-07-344.png
          480 kB
          Brett Dalton
        5. image-2025-04-15-14-38-07-665.png
          83 kB
          Ferran Recio

            laurent.david@moodle.com Laurent David
            Kerryvan Kerry Vandersteen
            Ferran Recio Ferran Recio
            Jun Pataleta Jun Pataleta
            Votes:
            1 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 3 hours, 59 minutes
                1d 3h 59m

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