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

Some more accessibility issues for the tabs and tab panels in the revamped activity chooser

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Login as Admin,
      2. Create a Course.
      3. Go to the Course.
      4. Turn editing on
      5. Open the activity chooser (click on any 'Add an activity or resource' link)

      Test 1 (Test tabs keyboard navigation)

      1. Star several activities
        • make sure you can see the "Starred" tab
      2. Using the keyboard (left/right keys) to navigate to the "Activities" tab and activate it's tab panel by pressing enter/space key
      3. After the "Activities" tab panel is displayed, press "Tab"
        • make sure the focus moves to the first item (chooser option) in the "Activities" tab panel
      4. Using the keyboard  (left/right keys) navigate to the "Starred" tab and activate it's tab panel.  
      5. After the "Starred" tab panel is displayed, press "Tab"
        • make sure the focus moves to the first item (starred chooser option) in the "Starred" tab panel

      NOTE: Please test this in multiple different browsers (e.g Chrome, Firefox, etc.)

       Test 2 (Screen reader announces the correct number of tabs)

      1. Use a screen reader.
      2. In the activity choosers
        • make sure you can see only one tab ("Activities")
      3. Using the keyboard navigate to the tabs section (The "Activities" tab should be active by default )
        • make sure the Screen reader announces
          • the name of the focused tab (ex. The "Default" modules)
          • whether the tab is activated (ex. "selected")
          • the total number of visible tabs and the order number of the focused tab (ex. "1 of 1") 
      4. Star several activities
        • make sure you can see the "Starred" tab in the tabs navigation list.
      5. Using the keyboard navigate to the "Starred" tab (without activating it)
        • make sure the Screen reader announces
          • the name of the focused tab (ex. Your "Starred" modules)
          • whether the tab is activated (ex. "not selected")
          • the total number of visible tabs and the order number of the focused tab (ex. "1 of 2") 
      Show
      Login as Admin, Create a Course. Go to the Course. Turn editing on Open the activity chooser (click on any 'Add an activity or resource' link) Test 1 (Test tabs keyboard navigation) Star several activities make sure you can see the "Starred" tab Using the keyboard (left/right keys) to navigate to the "Activities" tab and activate it's tab panel by pressing enter/space key After the "Activities" tab panel is displayed, press "Tab" make sure the focus moves to the first item (chooser option) in the "Activities" tab panel Using the keyboard  (left/right keys) navigate to the "Starred" tab and activate it's tab panel.   After the "Starred" tab panel is displayed, press "Tab" make sure the focus moves to the first item (starred chooser option) in the "Starred" tab panel NOTE: Please test this in multiple different browsers (e.g Chrome, Firefox, etc.)  Test 2 (Screen reader announces the correct number of tabs) Use a screen reader. In the activity choosers make sure you can see only one tab ("Activities") Using the keyboard navigate to the tabs section (The "Activities" tab should be active by default ) make sure the Screen reader announces the name of the focused tab (ex. The "Default" modules) whether the tab is activated (ex. "selected") the total number of visible tabs and the order number of the focused tab (ex. "1 of 1")   Star several activities make sure you can see the "Starred" tab in the tabs navigation list. Using the keyboard navigate to the "Starred" tab (without activating it) make sure the Screen reader announces the name of the focused tab (ex. Your "Starred" modules) whether the tab is activated (ex. "not selected") the total number of visible tabs and the order number of the focused tab (ex. "1 of 2")  
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull Master Branch:
      MDL-68051-master-2
    • Story Points:
      1
    • Sprint:
      Activity Sprint 8, Activity Sprint 9, Activity Sprint 10

      Description

      Seems like we missed some items about the accessibility of the tabs for the activity chooser.

      Switching tabs

      The keyboard navigation between the tabs and their respective tab panels seem to be broken after switching between tabs. To reproduce:

        1. Switch to another tab using the keyboard.
        2. Press tab again. Expected behaviour:

          When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.
          

          However, the focus does not move to the tab panel.

      Number of tabs
      1. Even when the Favourites or Recommended tabs are hidden, the screen reader keeps announcing that there are 3 tabs on the list. This will be confusing to the user.
      Axe
      1. Axe is reporting the following violation about the tab list:

        <li> elements must be contained in a <ul> or <ol>
         
        Issue description: Ensures <li> elements are used semantically
         
        Impact: serious
         
        Element location
        #activities-5 > .nav-item:nth-child(1)
         
        Element source
        <li class="nav-item">
         
        To solve this violation, you need to:
        Fix the following:
        List item does not have a <ul>, <ol> without a role, or a role="list" parent element
        

        Perhaps we can render the tab list as not an unordered list, similar to https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html?

      Tabs keyboard navigation
      1.  Tabs keyboard navigation is not working in certain browsers (ex. Firefox).
         This is due to the usages of 'e.srcElement' which is not supported in every browser. 

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Geshoski Mihail Geshoski
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Peter Dias
              Integrator:
              Andrew Nicols
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 3 hours, 30 minutes
                  1d 3h 30m