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

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

    XMLWordPrintable

Details

    • 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.

    Description

      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)

      Attachments

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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