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

Fix colour contrast issues on the course homepage's Move modal

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_402_STABLE
    • MOODLE_401_STABLE, MOODLE_402_STABLE
    • MDL-79063-401
    • MDL-79063-402
    • MDL-79063-master
    • Hide
      Setup
      1. Install WAVE or axe DevTools
      2. Create a course with several course sections and course modules.
      Using a.disabled
      1. Go to the site home
      2. Right-click on the course's name and inspect
      3. On the Elements pane of the browser dev tools, edit the course name's markup and replace the <a> tag's "class" attribute with "disabled", removing the "aalink" class.
      4. Run accessibility tests on the page using WAVE or Axe DevTools
      5. Confirm that there are no "low/insufficient contrast" issues related to the course name link you edited.
      Moving sections/course modules
      1. Go to the course
      2. Turn editing mode on
      3. Open the menu of any course module and click "Move"
      4. On the move modal, right-click on the name of the course module being moved and click "Inspect"
      5. On the element inspector of the browser dev tools, make sure that the course module being moved is selected.
      6. Open the "Toggle pseudo-class" panel of the browser dev tools (You may see this as ":hov" in Firefox/Chrome)
      7. Tick the ":focus" checkbox. You should see the container of the item being moved get selected/highlighted.
      8. With the current state of the page, click on the "Wave" icon to run tests on the page.
      9. On the results page, go to the Details tab
      10. Confirm that you don't see a "Very low contrast" error related to the item being moved.
        • Note: There may be other errors on the page, but ignore them for now. This issue only focuses on the contrast issue.
      11. Repeat the above steps for moving course sections.
      Regression check
      1. Confirm that moving course sections and activity modules still work as expected.
      2. (4.2 and master) Confirm that bulk moving course sections/activity modules still work as expected.
      Show
      Setup Install WAVE or axe DevTools Create a course with several course sections and course modules. Using a.disabled Go to the site home Right-click on the course's name and inspect On the Elements pane of the browser dev tools, edit the course name's markup and replace the <a> tag's "class" attribute with "disabled", removing the "aalink" class. Run accessibility tests on the page using WAVE or Axe DevTools Confirm that there are no "low/insufficient contrast" issues related to the course name link you edited. Moving sections/course modules Go to the course Turn editing mode on Open the menu of any course module and click "Move" On the move modal, right-click on the name of the course module being moved and click " Inspect " On the element inspector of the browser dev tools, make sure that the course module being moved is selected. Open the "Toggle pseudo-class" panel of the browser dev tools (You may see this as " :hov " in Firefox/Chrome) Tick the " :focus " checkbox. You should see the container of the item being moved get selected/highlighted. With the current state of the page, click on the "Wave" icon to run tests on the page. On the results page, go to the Details tab Confirm that you don't see a "Very low contrast" error related to the item being moved. Note: There may be other errors on the page, but ignore them for now. This issue only focuses on the contrast issue. Repeat the above steps for moving course sections. Regression check Confirm that moving course sections and activity modules still work as expected. (4.2 and master) Confirm that bulk moving course sections/activity modules still work as expected.

      1. Log in as an admin or editing teacher
      2. Go to a course and turn editing mode on
      3. Open the menu of an activity module or a section and click "Move"
        • Alternatively, toggle Bulk editing, select one or more activities/sections and click "Move" on the sticky footer.
      4. The items to be moved will be displayed in grey, but they have insufficient colour contrast, especially when they are highlighted.

      See SC 1.4.3 Contrast (Minimum) (Level AA)

        1. (I) Passed -- (Master)MDL-79063.png
          187 kB
          Kim Jared Lucas
        2. (II) Passed -- (Master)MDL-79063.png
          334 kB
          Kim Jared Lucas
        3. (III) 1 Passed -- (Master)MDL-79063.png
          104 kB
          Kim Jared Lucas
        4. (III) 2 Passed -- (Master)MDL-79063.png
          97 kB
          Kim Jared Lucas
        5. after.png
          91 kB
          Jun Pataleta

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Paul Holden Paul Holden
            Andrew Lyons Andrew Lyons
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 23 minutes
                2h 23m

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