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

Keyboard navigation does not work quite as expected on Tabs

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-72481-master-v5
    • Testing Instructions:
      Hide

      Under boost theme

      1. Login as admin.
      2. Navigate to the Site administration page.
      3. Click on the link "Site administration" ( i.e, the from tabs listed as "Site administration", "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 "Site administration" 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.
      13. Press "Enter key", navigate to sub-menus inside "More" using the down arrow key. Say navigate after "Appearance" and reach till "Server" or "Reports".
      14. Now press the home key. It should focus on "Appearance".
      15. Now press the end key. It should focus on "Development".
      16. Now press the right arrow key. It should focus on "Site administration". The sub-menu in the "More" tab should be closed now.
      17. Press the right arrow till it reaches again "More" tab. Now it should show/open sub-menus automatically.
      18. Now using the down arrow key move to "Appearance" or "Server" in the sub-menu. 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.
      19. Now press the left arrow key. The "Plugins" tab should be the focus now. And the sub-menus in "More" should be closed now.

      Under boost theme test More menu

      1. Select "Server" under the "More" menu on the site administration page.
      2. Now select the "More" menu again. The "Server" should be shown as selected 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. Click the "More" menu. The "Server" should be highlighted. This helps users know that "System paths" belong to the "Server".

      Under boost theme

      1. Right click on the secondary nav of site administration page and inspect the HTML. You should see role="tablist" . As part of this change it has been changed to "tablist". Previously it was menubar.

      Under boost theme with inner menus

      1. Create a custom menu, by adding the following in the section "Custom menu items" found under Site administration -> Appearance -> Themes -> Theme Settings

      -All courses|/?redirect=0
      -Course search|/course/search.php
      -###
      -FAQ|https://someurl.xyz/faq
      -Preguntas más frecuentes|https://someurl.xyz/pmf||es
      Mobile app|http://google.com|Download our app

      1. The above change gets added to the primary navigation. Resize the browser window so that more menu is visible.
      2. Now click on the "More" menu in the primary nav or reach the "More" menu using the keyboard (say using tabs and arrow keys).
      3. Navigate down so that you reach "All courses".
      4. Now press the down arrow key. The "All courses" inner menu should open up and you should see "Course search" as highlighted.
      5. Now press the down arrow key again to reach the end of the inner menu i.e, "FAQ". Press the down arrow key again, it should take you to the "Course search".
      6. Now press the left/right arrow key to make the highlight move to the previous element of the "All courses" to be highlighted.

      Under classic theme

      1. Login as admin.
      2. Navigate to "Site Administration > Users". Click on the "Site administration" from the bread crumbs (i.e, from "Dashboard/ Site administration / Users"). This is to get the navbar shown up.
      3. Continue steps from (3) mentioned in the boost theme above (from section Under boost theme).
      4. The steps mentioned under section: "Under boost theme test More menu" are applicable here.

      Test for RTL (without page resize)

      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. Now change the language from the selector available on the left to "Edit mode" on the top right of the page. And select "Arabic".
      5. Navigate to the "Site administration" page.
      6. Select the "Site administration". Now press the left arrow key on your keyboard. The next focus should be on "Users". Press the left arrow key on the keyboard again. The next focus should be on "Courses".
      7. You may continue till "Development" and then press the left arrow key again. It should start from the "Site administration".
      8. Press the right arrow key on your keyboard. You should see the "Development" tab highlighted. Press the right arrow key again, you should see the previous tab highlighted and similarly you would reach the "Site administration" tab.
      9. If you press the "Home" key the focus should be on the "Site administration" tab.
      10. If you press the "End" key the focus should be on the "Development" tab.

       Test for RTL (with page resize)

      1. Login as admin. And enable the language "Arabic" as mentioned in the above test (from steps 1 to 4).
      2. Now reduce the page size so that you may view the "More" menu in the secondary navigation.
      3. Select the "Site administration" tab.
      4. On your keyboard press the "End" key. You should see the left-most tab in the secondary nav highlighted/focussed.
      5. Press the "Home" key on your keyboard. You should see the right-most tab in the secondary nav highligthed/focused.
      6. Press the left arrow key on your keyboard, you should see the next item on the secondary tab highlighted i.e, the focus now shifts to the second item on the left. Go on pressing the left arrow key. You should see the next items highlighted till you reach the last item on the secondary nav, i.e, the left-most tab. After that, if you press the left arrow key you should land on the first tab in the right-most end of the secondary nav.
      7. Press the right arrow key on your keyboard, you should see the previous item on the secondary tab highlighted i.e, the left-most end item on the secondary nav. Go on pressing the left arrow key. You should see the previous items highlighted till you reach the right-most end tab on the secondary nav highlighted.
      8. Also when you are on the left-most end of the secondary nav, press "Enter" key to see the sub menus.
      9. When you are on the sub-menus: Press home key, you should be on the top item on the list. Press "End" key, you should be on the last item on the sub menu. The up and down arrow keys should help you navigate to move up/down in the sub menu. Also pressing "Enter" key on any of the sub menu item should show the respective page.

       

      Show
      Under boost theme Login as admin. Navigate to the Site administration page. Click on the link "Site administration" ( i.e, the from tabs listed as "Site administration", "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 "Site administration" 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. 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". Now press the right arrow key. It should focus on "Site administration". The sub-menu in the "More" tab should be closed now. Press the right arrow till it reaches again "More" tab. Now it should show/open sub-menus automatically. Now using the down arrow key move to "Appearance" or "Server" in the sub-menu. 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. Now press the left arrow key. The "Plugins" tab should be the focus now. And the sub-menus in "More" should be closed now. Under boost theme test More menu Select "Server" under the "More" menu on the site administration page. Now select the "More" menu again. The "Server" should be shown as selected 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 be highlighted. This helps users know that "System paths" belong to the "Server". Under boost theme Right click on the secondary nav of site administration page and inspect the HTML. You should see role="tablist" . As part of this change it has been changed to "tablist". Previously it was menubar. Under boost theme with inner menus Create a custom menu, by adding the following in the section "Custom menu items" found under Site administration -> Appearance -> Themes -> Theme Settings -All courses|/?redirect=0 -Course search|/course/search.php -### -FAQ|https://someurl.xyz/faq -Preguntas más frecuentes|https://someurl.xyz/pmf||es Mobile app|http://google.com|Download our app The above change gets added to the primary navigation. Resize the browser window so that more menu is visible. Now click on the "More" menu in the primary nav or reach the "More" menu using the keyboard (say using tabs and arrow keys). Navigate down so that you reach "All courses". Now press the down arrow key. The "All courses" inner menu should open up and you should see "Course search" as highlighted. Now press the down arrow key again to reach the end of the inner menu i.e, "FAQ". Press the down arrow key again, it should take you to the "Course search". Now press the left/right arrow key to make the highlight move to the previous element of the "All courses" to be highlighted. Under classic theme Login as admin. Navigate to "Site Administration > Users". Click on the "Site administration" from the bread crumbs (i.e, from "Dashboard/ Site administration / Users"). This is to get the navbar shown up. Continue steps from (3) mentioned in the boost theme above (from section Under boost theme). The steps mentioned under section: "Under boost theme test More menu" are applicable here. Test for RTL (without page resize) 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)". Now change the language from the selector available on the left to "Edit mode" on the top right of the page. And select "Arabic". Navigate to the "Site administration" page. Select the "Site administration". Now press the left arrow key on your keyboard. The next focus should be on "Users". Press the left arrow key on the keyboard again. The next focus should be on "Courses". You may continue till "Development" and then press the left arrow key again. It should start from the "Site administration". Press the right arrow key on your keyboard. You should see the "Development" tab highlighted. Press the right arrow key again, you should see the previous tab highlighted and similarly you would reach the "Site administration" tab. If you press the "Home" key the focus should be on the "Site administration" tab. If you press the "End" key the focus should be on the "Development" tab.   Test for RTL (with page resize) Login as admin. And enable the language "Arabic" as mentioned in the above test (from steps 1 to 4). Now reduce the page size so that you may view the "More" menu in the secondary navigation. Select the "Site administration" tab. On your keyboard press the "End" key. You should see the left-most tab in the secondary nav highlighted/focussed. Press the "Home" key on your keyboard. You should see the right-most tab in the secondary nav highligthed/focused. Press the left arrow key on your keyboard, you should see the next item on the secondary tab highlighted i.e, the focus now shifts to the second item on the left. Go on pressing the left arrow key. You should see the next items highlighted till you reach the last item on the secondary nav, i.e, the left-most tab. After that, if you press the left arrow key you should land on the first tab in the right-most end of the secondary nav. Press the right arrow key on your keyboard, you should see the previous item on the secondary tab highlighted i.e, the left-most end item on the secondary nav. Go on pressing the left arrow key. You should see the previous items highlighted till you reach the right-most end tab on the secondary nav highlighted. Also when you are on the left-most end of the secondary nav, press "Enter" key to see the sub menus. When you are on the sub-menus: Press home key, you should be on the top item on the list. Press "End" key, you should be on the last item on the sub menu. The up and down arrow keys should help you navigate to move up/down in the sub menu. Also pressing "Enter" key on any of the sub menu item should show the respective page.  
    • Story Points:
      3
    • Sprint:
      Navigation push 6, Navigation push 7, Navigation push 8, Navigation push 9

      Description

      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.

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              sujith Sujith Haridasan
              Reporter:
              rezaie9 Shamim Rezaie
              Peer reviewer:
              Mathew May Mathew May
              Integrator:
              Jun Pataleta Jun Pataleta
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Fix Release Date:
                13/Dec/21

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 5 hours, 45 minutes
                  1w 5h 45m