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

Activity completion manual checkboxes have no focus indicator

    XMLWordPrintable

Details

    • Bug
    • Status: Development in progress
    • Minor
    • Resolution: Unresolved
    • 3.7.5, 3.8.2, 3.9
    • None
    • Accessibility, Themes
    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MDL-68337-M39
    • MDL-68337-master
    • Hide
      1. Log in as a Moodle administrator
      2. Ensure that the current active theme is Boost
      3. Ensure that course completion is enabled in the Moodle settings.
      4. Create a course, making sure to enable course completion.
      5. Click the Turn Editing On button.
      6. Add one or more activities, each with the Activity completion > Completion tracking set to "Students can manually mark the activity as completed" before you click Save and return to course.
      7. Click the Turn Editing Off button.
      8. Viewing the course page (not an activity), use the Tab key on your keyboard to move through the page.
      9. When you get to the completion checkbox for the activity, notice that there is now a focus indicator around the checkbox.

      If you see the focus indicator, you have successfully completed the test.

      Now change the currently active theme to Classic and repeat steps 8 and 9.

      Show
      Log in as a Moodle administrator Ensure that the current active theme is Boost Ensure that course completion is enabled in the Moodle settings. Create a course, making sure to enable course completion. Click the Turn Editing On button. Add one or more activities, each with the Activity completion >   Completion tracking set to "Students can manually mark the activity as completed" before you click Save and return to course . Click the Turn Editing Off  button. Viewing the course page (not an activity), use the Tab key on your keyboard to move through the page. When you get to the completion checkbox for the activity, notice that there is now a focus indicator around the checkbox. If you see the focus indicator, you have successfully completed the test. Now change the currently active theme to Classic and repeat steps 8 and 9.

    Description

      When tabbing through the links on a course page, the manual completion check boxes for activities have no visual focus indicator when tabbing through the page using a keyboard. This can feel like a keyboard trap as the focus disappears from view.

      Note: Unfortunately the checkbox is not centered in the graphic image so the blue outline will be centered either.

      This is a failure of WCAG 2.1 Level A (and hence AA) Success Criterion 2.4.7: Focus visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. For more information, see:
      https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

      The solution is to set the outline CSS for the button of a checkbox.

      Let me know if you have any questions.

      Michael Milette

      Attachments

        Activity

          People

            michael-milette Michael Milette
            michael-milette Michael Milette
            Mathew May Mathew May
            Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Huong Nguyen, Bas Brands, Mathew May
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:

              Time Tracking

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 45 minutes
                45m