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

Insufficient colour contrast for focused/mouseover action menu items

XMLWordPrintable

    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-69390-master
    • Hide

      Test the dropdown hover colour

      • login as admin
      • click the user menu dropdown
      • verify that when hovering over the menu items or using the keyboard to access the menu items the background colour is the primary (blue) colour and the text is white
      • navigate to a course page
      • click the settings icon in the course heading
      • verify that when hovering over the menu items or using the keyboard to access the menu items the background colour is the primary (blue) colour and the text is white

      Test the autocomplete form field

      • Navigation to a course participants page
      • Enrol yourself in the course
      • In the enrolled users list click the pencil icon in the role column
      • Use the arrow down key to browse through the list of roles
      • verify the active item has the primary blue background colour and white text

      Test if the active menu item is marked with a dot

      • enrol yourself on a few courses if you are not enrolled on any courses yet
      • navigate to the dashboard
      • on the course overview block click filter options, change the in progress to future
      • verify when clicking the filter again there is a dot visible before the menu item future
      • reload the page and click the filter options again
      • verify the dot is still visible before the menu item future

       

       

      Show
      Test the dropdown hover colour login as admin click the user menu dropdown verify that when hovering over the menu items or using the keyboard to access the menu items the background colour is the primary (blue) colour and the text is white navigate to a course page click the settings icon in the course heading verify that when hovering over the menu items or using the keyboard to access the menu items the background colour is the primary (blue) colour and the text is white Test the autocomplete form field Navigation to a course participants page Enrol yourself in the course In the enrolled users list click the pencil icon in the role column Use the arrow down key to browse through the list of roles verify the active item has the primary blue background colour and white text Test if the active menu item is marked with a dot enrol yourself on a few courses if you are not enrolled on any courses yet navigate to the dashboard on the course overview block click filter options, change the in progress to future verify  when clicking the filter again there is a dot visible before the menu item future reload the page and click the filter options again verify  the dot is still visible before the menu item future    
    • 0

      The original report from Webkey IT:

      Mouse focus inside of dropdowns. This also applies to keyboard focus inside of dropdowns in Chrome as the secondary indicator also has insufficient colour contrast

      So the report basically cites two issues:

      1. Keyboard focus
        • I think the keyboard focus issue is fixed for the most part. The only thing I noticed is that the focus outline does not apply to the action menu in the autocomplete element.
      2. Mouseover
        • When hovering on an action menu item, the hover colour becomes "#f8f9fa" ($gray-100) but compared to the white background, the colour contrast ratio is only 1.05:1. We can possibly fix this by making the hover colour similar to the blue hover colour for normal select boxes.

        1. wcagex.png
          wcagex.png
          187 kB
        2. Screenshot 2020-09-21 at 09.54.54.png
          Screenshot 2020-09-21 at 09.54.54.png
          27 kB
        3. normal-select-box-hover.png
          normal-select-box-hover.png
          61 kB
        4. myoverview-dropdown.png
          myoverview-dropdown.png
          23 kB
        5. image-2020-10-29-09-37-43-226.png
          image-2020-10-29-09-37-43-226.png
          74 kB
        6. focus - hover.png
          focus - hover.png
          55 kB
        7. default outline.png
          default outline.png
          76 kB
        8. dashboard.png
          dashboard.png
          29 kB
        9. cog-menu-dropdown.png
          cog-menu-dropdown.png
          15 kB
        10. autocomplete-dropdown.png
          autocomplete-dropdown.png
          9 kB
        11. action-menu-kbfocus-and-hover.png
          action-menu-kbfocus-and-hover.png
          18 kB

            basbrands Bas Brands
            jpataleta Jun Pataleta
            Mihail Geshoski Mihail Geshoski
            Jun Pataleta Jun Pataleta
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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