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

Course management: insufficient colour contrast

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Functional testing

      1. Log in as admin
      2. Navigate to Site Administration > Courses > Manage courses and categories
      3. Create 3 categories "Cat A", "Cat B", "Cat C" with Parent category "Top"
      4. For "Cat A" set the field "Category ID number" to be "Cat0123"
      5. Create 2 courses in "Cat A" named "Mathematics" and "Science"
        1. Verify you see a blue left border for the active category
        2. Verify you see checkboxes for each category
        3. Verify you see the grey text "Cat0123" in the row of "Cat A"
      6. Select "Cat B" and choose "Move selected categories to:" "Cat A"
        1. Verify "Cat B" is now a subcategory of "Cat A"
      7. Scroll down the page to the "Search courses" input
      8. Search for "Math"
        1. Verify you see course "Mathematics"
        2. Verify you see a checkbox for course "Mathematics"

      Accessibility testing

      1. Install a tool like the chrome plugins Axe or Wave for accessibility testing
        Note: You may see an occurrece of "Elements must have sufficient color contrast" for the "#menuselectsortby" element
        This is not a fail. It is picked up because the Axe tool is unable to distinguish the relative size of the up/down arrows which are shown in the dropdown and therefore is unable to determine whether they are conformant or not.
        The same applies for any other dropdown selects visible on the page
        1. Verify the page passes the colour contrast checks
      Show
      Functional testing Log in as admin Navigate to Site Administration > Courses > Manage courses and categories Create 3 categories "Cat A", "Cat B", "Cat C" with Parent category "Top" For "Cat A" set the field "Category ID number" to be "Cat0123" Create 2 courses in "Cat A" named "Mathematics" and "Science" Verify you see a blue left border for the active category Verify you see checkboxes for each category Verify you see the grey text "Cat0123" in the row of "Cat A" Select "Cat B" and choose "Move selected categories to:" "Cat A" Verify "Cat B" is now a subcategory of "Cat A" Scroll down the page to the "Search courses" input Search for "Math" Verify you see course "Mathematics" Verify you see a checkbox for course "Mathematics" Accessibility testing Install a tool like the chrome plugins Axe or Wave for accessibility testing Note: You may see an occurrece of "Elements must have sufficient color contrast" for the " #menuselectsortby " element This is not a fail. It is picked up because the Axe tool is unable to distinguish the relative size of the up/down arrows which are shown in the dropdown and therefore is unable to determine whether they are conformant or not. The same applies for any other dropdown selects visible on the page Verify the page passes the colour contrast checks
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Pull from Repository:
    • Pull 3.8 Branch:
    • Pull Master Branch:
      MDL-68266-master

      Description

      The course management page has insufficient colour contrast for:

      • graduation cap icons with number of courses
      • category idnumber display (scitech)
      • borders around checkboxes

      Guidelines affected

      1.4.11 Non-text Contrast:
      1.4.11 The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Jun Pataleta
              Integrator:
              Andrew Nicols
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                11/May/20

                  Time Tracking

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