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

Insufficient colour contrast for focused/mouseover action menu items

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull 3.9 Branch:
    • Pull 3.10 Branch:
      MDL-69390-310
    • Pull Master Branch:
      MDL-69390-master
    • Testing Instructions:
      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    
    • Story Points:
      0

      Description

      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.

        Attachments

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

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Mihail Geshoski Mihail Geshoski
              Integrator:
              Jun Pataleta Jun Pataleta
              Tester:
              Janelle Barcega Janelle Barcega
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Nov/20

                  Time Tracking

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