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

Keyboard navigation does not work quite as expected on Tabs

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72481-master
    • Hide

      Perform the following tests using the Boost theme.

      Test 1

      1. Login as admin.
      2. Navigate to the Site administration page.
      3. Click on the link "General" ( i.e, the from tabs listed as "General", "Users", "Courses" etc.)
      4. Now press the right arrow key on your keyboard. It should focus on the "Users" tab.
      5. Now press the right arrow key on your keyboard. It should focus on the "Courses" tab.
      6. Now press the left arrow key on your keyboard. The "Users" tab should be focused.
      7. Press enter key. The links under the "Users" tab should be displayed.
      8. Press tab key. The "Accounts" link should be focused on.
      9. Press the shift-tab key. The "Users" tab should be focused.
      10. Press the home key. The "General" tab should be focused on.
      11. Press the end key. The "More" tab should be focused on if the page is resized to show the "More" page. Else the "Development" tab should be focused on.
      12. Resize the page so that the "More" menu is visible in the secondary nav, and it is placed after the "Plugins" tab.
      13. Click on the "General" tab
      14. Press "End"
      15. Press "Enter key", navigate to sub-menus inside "More" using the down arrow key. Say navigate after "Appearance" and reach till "Server" or "Reports".
      16. Now press the home key. It should focus on "Appearance".
      17. Now press the end key. It should focus on "Development".
      18. Continuously if you press the down arrow key inside the submenu you should see that all sub-menu items are navigated one by one repeatedly. Cyclic navigation.

      Test 2: The More menu

      1. Click on "Server" under the "More" menu on the site administration page.
      2. Now click on the "More" menu again. The "Server" should be shown as selected (with a tick mark) and no other items as selected.
        If the mouse is moved to other items or if using the keyboard user moves to other items inside "More" only then those items should be highlighted.
      3. Now select "System paths" in "Server" and reload the page.
      4. Click the "More" menu.
      5. The "Server" should still have the tick mark

      Test 3: RTL

      1. Login as admin.
      2. Navigate to "Site administration" -> Language -> Language packs.
      3. Select "Arabic" (ar) from the "Available language packs" list and click "Install selected language pack(s)".
      4. Go to site administration
      5. Open the user menu and then go to "Language" and then switch your language to Arabic
      6. Refresh the page
      7. Click on the first tab of the secondary nav
      8. Verify that the focus moves to left/right when you press left/right key on your keyboard
      9. Verify that pressing "End" moves the focus to the last tab (that's the far most left tab in RTL)
      10. Verify that pressing "Home" moves the focus to the first tab (that's the far most right tab in RTL)
      11. Press Shift+Tab several times so you get to the primary navigation tabs
      12. Repeat steps 8 to 10

       

      Show
      Perform the following tests using the Boost theme. Test 1 Login as admin. Navigate to the Site administration page. Click on the link "General" ( i.e, the from tabs listed as "General", "Users", "Courses" etc.) Now press the right arrow key on your keyboard. It should focus on the "Users" tab. Now press the right arrow key on your keyboard. It should focus on the "Courses" tab. Now press the left arrow key on your keyboard. The "Users" tab should be focused. Press enter key. The links under the "Users" tab should be displayed. Press tab key. The "Accounts" link should be focused on. Press the shift-tab key. The "Users" tab should be focused. Press the home key. The "General" tab should be focused on. Press the end key. The "More" tab should be focused on if the page is resized to show the "More" page. Else the "Development" tab should be focused on. Resize the page so that the "More" menu is visible in the secondary nav, and it is placed after the "Plugins" tab. Click on the "General" tab Press "End" Press "Enter key", navigate to sub-menus inside "More" using the down arrow key. Say navigate after "Appearance" and reach till "Server" or "Reports". Now press the home key. It should focus on "Appearance". Now press the end key. It should focus on "Development". Continuously if you press the down arrow key inside the submenu you should see that all sub-menu items are navigated one by one repeatedly. Cyclic navigation. Test 2: The More menu Click on "Server" under the "More" menu on the site administration page. Now click on the "More" menu again. The "Server" should be shown as selected (with a tick mark) and no other items as selected. If the mouse is moved to other items or if using the keyboard user moves to other items inside "More" only then those items should be highlighted. Now select "System paths" in "Server" and reload the page. Click the "More" menu. The "Server" should still have the tick mark Test 3: RTL Login as admin. Navigate to "Site administration" -> Language -> Language packs. Select "Arabic" (ar) from the "Available language packs" list and click "Install selected language pack(s)". Go to site administration Open the user menu and then go to "Language" and then switch your language to Arabic Refresh the page Click on the first tab of the secondary nav Verify that the focus moves to left/right when you press left/right key on your keyboard Verify that pressing "End" moves the focus to the last tab (that's the far most left tab in RTL) Verify that pressing "Home" moves the focus to the first tab (that's the far most right tab in RTL) Press Shift+Tab several times so you get to the primary navigation tabs Repeat steps 8 to 10  
    • 1
    • Navigation push 6, Navigation push 7, Navigation push 8, Navigation push 9, Navigation push 10, Navigation push 11, Navigation push 13, HQ Team International CIH2-220

      Some of the accessibility improvements I had done as part of MDL-69301 seem to be lost.

      • Pressing the 'End' key does not activate the last tab
      • tabindex is not properly set on the selected tab. It is always the first tab that is focusable. To test this:
        1. Log in as admin
        2. Go to site administration
        3. Click on the 'Users' tab
        4. Press the Tab key on the keyboard
        5. Press Shift + Tab
        6. The expected behaviour is that the 'Users' tab should be focused now.
      • When you go to the site administration page, the tab button that is related to the content you see (the first tab) is not active by default
      • There is no aria-selected attribute set on the selected tab.
      • Note: git grep for MDL-72481 and update any relevant styling if. this issue lands before MDL-72799

       

      According to https://www.w3.org/TR/wai-aria-1.1/#aria-current

      Authors SHOULD NOT use the aria-current attribute as a substitute for aria-selected in widgets where aria-selected has the same meaning. For example, in a tablist, aria-selected is used on a tab to indicate the currently-displayed tabpanel.

       

        1. custom-menu-submenu.png
          custom-menu-submenu.png
          9 kB
        2. Screenshot 2022-02-08 at 10.56.30.png
          Screenshot 2022-02-08 at 10.56.30.png
          107 kB
        3. Screenshot 2022-02-08 at 10.58.06.png
          Screenshot 2022-02-08 at 10.58.06.png
          94 kB
        4. Screenshot 2022-02-08 at 10.59.46.png
          Screenshot 2022-02-08 at 10.59.46.png
          227 kB
        5. Test 1_Evidence.avi
          11.17 MB
        6. Test 2 The More menu_Evidence.avi
          1.80 MB
        7. Test 3 RTL_Evidence.avi
          3.60 MB

            rezaie9 Shamim Rezaie
            rezaie9 Shamim Rezaie
            Bas Brands Bas Brands
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 weeks, 3 days, 2 hours, 47 minutes
                2w 3d 2h 47m

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