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

Focus order in tabs

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Test 1

      1. Log in as admin
      2. Go to site administration
      3. Press the tab key multiple times until the focus reaches the tab buttons (Site administration, Users, Courses, ...)
      4. Verify that you can move the focus between the tabs using arrow keys on your keyboard
      5. Verify that pressing the home key moves the focus to the first tab button
      6. Verify that pressing the end key moves the focus to the last button
      7. Verify that pressing the right key when the last tab has the focus, moves the focus to the first tab
      8. Verify that pressing the left key when the first tab has the focus, moves the focus to the last tab
      9. Verify that you can activate each tab by pressing enter or space key
      10. Verify that if you press the tab key when a tab button has the focus, the focus jumps into the content of the active tab, and not to the next tab button
      11. Click on the first tab button
      12. Press the right key once
      13. Press the tab key
      14. Press shift + tab
      15. Verify that the focus is on the first tab button and not the second one
      16. Click on the second tab
      17. Refresh the page
      18. Verify that the second tab is active
      19. Press the tab key multiple times until you reach the tab keys
      20. Verify that it is the second tab button that got the focus and not any other buttons

      Test 2 (This test does not apply to 3.8)

      1. Log in as admin
      2. Go into a course and turn editing on
      3. Click on one of the "Add an activity or resource" links
      4. Press the tab key several times unto the focus reaches the tab buttons in the "Add an activity or resource" modal
      5. Follow the steps 4-15 from test 1

      Test 3

      1. Log in as admin
      2. Click on the messaging icon at the top right of the page to open the messaging drawer
      3. Click "Contacts"
      4. Press the tab key multiple times until the focus reaches the "Contacts" button
      5. Verify that you can move between the "Contacts" and the "Requests" buttons using arrow keys

      Test 4

      1. Log in as admin
      2. Go to Site administration > Appearance > Themes > Boost
      3. Press the tab key multiple times until the focus reaches the "General settings" tab
      4. Follow the steps 4-20 from test 1

      Test 5 (regression test copied from MDL-62139)

      1. Log into Moodle as an admin user, using the boost theme
      2. Go to the dashboard.
      3. If the dashboard is not in edit view (cog icons are not visible on each of the blocks), click "Customise this page".
      4. Verify the accessibility of any of the "cog icon menu" dropdowns as follows:
        • Use tab key to focus on the menu cog.
        • Verify the menu opens with "enter" key.
        • Verify the menu closes with "escape" key.
        • Verify the menu does not reopen with "escape" key.
        • Verify the menu opens with "spacebar" key.
        • Verify when the menu is opened, focus is on the first menu item.
        • Verify the up and down arrow keys move the focus up and down in the menu.
        • Verify that the home and end keys focus on the first and last entry in the menu.
        • Verify that pressing up on the first menu item, will move focus to the last menu item.
        • Verify that pressing down on the last menu item, will move focus to the first menu item.
        • Verify that typing the first letter of an entry in the menu will move focus to the first item that starts with that letter (case insensitive).

       

      Show
      Test 1 Log in as admin Go to site administration Press the tab key multiple times until the focus reaches the tab buttons (Site administration, Users, Courses, ...) Verify that you can move the focus between the tabs using arrow keys on your keyboard Verify that pressing the home key moves the focus to the first tab button Verify that pressing the end key moves the focus to the last button Verify that pressing the right key when the last tab has the focus, moves the focus to the first tab Verify that pressing the left key when the first tab has the focus, moves the focus to the last tab Verify that you can activate each tab by pressing enter or space key Verify that if you press the tab key when a tab button has the focus, the focus jumps into the content of the active tab, and not to the next tab button Click on the first tab button Press the right key once Press the tab key Press shift + tab Verify that the focus is on the first tab button and not the second one Click on the second tab Refresh the page Verify that the second tab is active Press the tab key multiple times until you reach the tab keys Verify that it is the second tab button that got the focus and not any other buttons Test 2 (This test does not apply to 3.8) Log in as admin Go into a course and turn editing on Click on one of the "Add an activity or resource" links Press the tab key several times unto the focus reaches the tab buttons in the "Add an activity or resource" modal Follow the steps 4-15 from test 1 Test 3 Log in as admin Click on the messaging icon at the top right of the page to open the messaging drawer Click "Contacts" Press the tab key multiple times until the focus reaches the "Contacts" button Verify that you can move between the "Contacts" and the "Requests" buttons using arrow keys Test 4 Log in as admin Go to Site administration > Appearance > Themes > Boost Press the tab key multiple times until the focus reaches the "General settings" tab Follow the steps 4-20 from test 1 Test 5 (regression test copied from MDL-62139 ) Log into Moodle as an admin user, using the boost theme Go to the dashboard. If the dashboard is not in edit view (cog icons are not visible on each of the blocks), click "Customise this page". Verify the accessibility of any of the "cog icon menu" dropdowns as follows: Use tab key to focus on the menu cog. Verify the menu opens with "enter" key. Verify the menu closes with "escape" key. Verify the menu does not reopen with "escape" key. Verify the menu opens with "spacebar" key. Verify when the menu is opened, focus is on the first menu item. Verify the up and down arrow keys move the focus up and down in the menu. Verify that the home and end keys focus on the first and last entry in the menu. Verify that pressing up on the first menu item, will move focus to the last menu item. Verify that pressing down on the last menu item, will move focus to the first menu item. Verify that typing the first letter of an entry in the menu will move focus to the first item that starts with that letter (case insensitive).  
    • Affected Branches:
      MOODLE_35_STABLE
    • Pull from Repository:
    • Pull 3.8 Branch:
    • Pull 3.9 Branch:
    • Pull 3.10 Branch:
      MDL-69301-310
    • Pull Master Branch:
      MDL-69301-master
    • Story Points:
      0
    • Sprint:
      International 4.0 - Sprint 6, International 4.0 - Sprint 7

      Description

      On 'Site administration' page the following links ('Site administration', 'Users', 'Courses', 'Grades', 'Plugins' and 'Reports') act as buttons to open the corresponding tab panels. The user can navigate from button to button using tab key or left and right arrows. These buttons can be selected by pressing the Enter key, which is excellent. But the navigation order is not logical. The focus goes to the tab buttons first. And only after the last button ('Reports') it lands on the content of the tab. It's not an expected behavior and it doesn't comply with WCAG 2.4.3 - Focus order. Which says that new content (in this case active tab panel) should get the focus first. This is not the only page in Moodle with this kind of malfunctioning tab functionality.

       https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

        Attachments

          Activity

            People

            Assignee:
            rezaie9 Shamim Rezaie
            Reporter:
            JuliaRie Julia Rietveld - Zjochova
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:

                Time Tracking

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 6 hours, 2 minutes
                2d 6h 2m