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

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

    • MOODLE_403_STABLE
    • MDL-81702-404
    • 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. 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)
      7. Press tab several times to go through each item
      8. Ensure each item is highlighted in turn and when we reach the end of the list we go back to the "cross"/close icon.
      9. Click on "see all"
      10. Open the message drawer again
      11. Check points 3 to 8 again

      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.
      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 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 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.
    • Show
      Code verified against automated checks with warnings. Checked MDL-81702 using repository: https://github.com/laurentdavid/moodle.git MOODLE_404_STABLE (0 errors / 1 warnings) [branch: MDL-81702-404 | 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_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: Fri Apr 18 07:43:57 UTC 2025
    • 5
    • C->HQ 2025 Sprint I1.4 Moppies

      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
          After_patch.png
          103 kB
        2. Before_patch.png
          Before_patch.png
          83 kB
        3. image-2024-05-14-12-10-28-982.png
          image-2024-05-14-12-10-28-982.png
          374 kB
        4. image-2024-05-14-12-11-07-344.png
          image-2024-05-14-12-11-07-344.png
          480 kB
        5. image-2025-04-15-14-38-07-665.png
          image-2025-04-15-14-38-07-665.png
          83 kB

            laurent.david@moodle.com Laurent David
            Kerryvan Kerry Vandersteen
            Ferran Recio Ferran Recio
            Votes:
            0 Vote for this issue
            Watchers:
            8 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, 36 minutes
                1d 3h 36m

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