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

Focus indicator for checkboxes, radio buttons and toggles may be failing contrast requirements

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • 3

       Checkboxes, radios and toggles may be failing WCAG 2.4.13 Focus appearance when enabled/selected as there is not enough contrast between the focuses and not focused state.

       

      Non focused state

      Checkboxes, radios and toggles are blue when enabled/selected

       

      Focused state

      A box-shadow thicker than 2px is added to the input but there isn't enough contrast (3:1 minimum) and it's hard to distinguish from the non-focused state.

       

      Proposed fix

      Add a double coloured box-shadow to these elements, similarly to the button components.
      For example:

        1. Captura de pantalla 2024-01-26 a las 14.42.55.png
          Captura de pantalla 2024-01-26 a las 14.42.55.png
          24 kB
        2. image-2024-01-15-17-27-54-534.png
          image-2024-01-15-17-27-54-534.png
          67 kB
        3. image-2024-01-15-17-30-14-795.png
          image-2024-01-15-17-30-14-795.png
          69 kB
        4. image-2024-01-15-17-31-37-489.png
          image-2024-01-15-17-31-37-489.png
          68 kB
        5. image-2024-01-15-17-40-18-222.png
          image-2024-01-15-17-40-18-222.png
          2 kB

            Unassigned Unassigned
            Zanatta Susanna
            Votes:
            0 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:

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