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

Focus order in tabs

    XMLWordPrintable

Details

    • MOODLE_35_STABLE
    • MOODLE_310_STABLE, MOODLE_39_STABLE
    • MDL-69301-311
    • MDL-69301-master
    • 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

      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 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).  
    • 0
    • International 4.0 - Sprint 6, International 4.0 - Sprint 7, Internationals - 3.11 Sprint 1, Internationals - 3.11 Sprint 2

    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

        1. grader.png
          421 kB
          Bas Brands
        2. MDL-69301.jpg
          60 kB
          Anna Carissa Sadia
        3. MDL-69301 (2).jpg
          44 kB
          Anna Carissa Sadia
        4. MDL-69301 (3).jpg
          48 kB
          Anna Carissa Sadia
        5. MDL-69301 (4).jpg
          96 kB
          Anna Carissa Sadia

        Issue Links

          Activity

            People

              rezaie9 Shamim Rezaie
              JuliaRie Julia Rietveld - Zjochova
              Bas Brands Bas Brands
              Adrian Greeve Adrian Greeve
              Anna Carissa Sadia Anna Carissa Sadia
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                18/Jan/21

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 3 hours, 12 minutes
                  4d 3h 12m