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

Keyboard focus is off screen when Skip to Content link is used

    XMLWordPrintable

Details

    • MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • MDL-81110-403
    • MDL-81110-main
    • Hide

       Setup

      1. Login as administrator
      2. Create a course

      Course Test

      1. Navigate to the Course
      2. Scroll the page down so the first few items are off the page
      3. Press "Tab" (Or Shift+Tab) until the "Skip to Main Content" link shows at the top of the screen
      4. Press "Enter"
      5. Confirm that the scroll position is on the first section of the course content.
      6. Press Tab
      7. Confirm that the next focusable element gets focused and is not obscured from view by the navigation bar.

      Gradebook Test

      1. Click on "Grades" in the secondary navigation
      2. Scroll the page down so the first few items are off the page
      3. Press "Tab" (Or Shift+Tab) until the "Skip to Main Content" link shows at the top of the screen
      4. Press "Enter"
      5. Confirm that the scroll position is on the tertiary navigation
      6. Press Tab
      7. Confirm that the next focusable element gets focused and is not obscured from view by the navigation bar.
      Show
       Setup Login as administrator Create a course Course Test Navigate to the Course Scroll the page down so the first few items are off the page Press "Tab" (Or Shift+Tab) until the "Skip to Main Content" link shows at the top of the screen Press "Enter" Confirm that the scroll position is on the first section of the course content. Press Tab Confirm that the next focusable element gets focused and is not obscured from view by the navigation bar. Gradebook Test Click on "Grades" in the secondary navigation Scroll the page down so the first few items are off the page Press "Tab" (Or Shift+Tab) until the "Skip to Main Content" link shows at the top of the screen Press "Enter" Confirm that the scroll position is on the tertiary navigation Press Tab Confirm that the next focusable element gets focused and is not obscured from view by the navigation bar.
    • HQ 2024 Sprint I1.2 Moppies

    Description

      Overview

      To meet WCAG 2.2 criteria 2.4.12 Focus Not Obscured (Enhanced)  In all situations the keyboard focus cannot be obscured by other elements on the page.  This is not the case when using the Skip to Content link on multiple pages.

      • Course screen, skip to content link anchors are scrolling down too far leaving the focused element off screen
      • Course screen in edit mode, tabing to elements obscured by the footer does not scroll to bring them into view
      • Gradebook in edit mode, abing to elements obscured by the footer does not scroll to bring them into view

       

      Reproduction steps

      Course screen

      1. Navigate to the Course screen (/course/view.php?id=<course_id>)
      2. scroll the page down without clicking anywhere so the first few items are off the page
      3. press "Tab" to activate the "Skip to Main Content" link

      Expected Result

          First item of the course content has the keyboard focus and is visible to the user

      Actual results  

         First item of the course content  has the keyboard focus but is scrolled off the page and not visible to the users.

      A video with an example with the edit a course is attached below.

      Course screen in edit mode/Gradebook in edit mode

      1. Navigate to the Course screen (/course/view.php?id=<course_id>) or Navigate to the Grade Report page (/grade/report/grader/index.php?id=<course_id>)
      2. Ensure the page has enough content or student to scroll off the page
      3. Enable Edit mode
      4. Tab to the last visible items using keyboard
      5. Continue to tab

      Expected Results

            Next item with keyboard focus is scrolled into view

      Actual Results

           Focused item is obscured by the sticky footer.

       

      This problem may exist in other areas that utilise the sticky footer.

      Attachments

        Issue Links

          Activity

            People

              mikelmartíncorrales Mikel Martín Corrales
              brett.dalton@moodle.com Brett Dalton
              Carlos Escobedo Carlos Escobedo
              Jun Pataleta Jun Pataleta
              Kim Jared Lucas Kim Jared Lucas
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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