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

    • MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-68051-master-2
    • 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")  
    • 1
    • Activity Sprint 8, Activity Sprint 9, Activity Sprint 10

      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. 

       

        1. MDL-68051_Test1.jpg
          MDL-68051_Test1.jpg
          50 kB
        2. MDL-68051_Test2_Step3.mp4
          1.03 MB
        3. MDL-68051_Test2_Step5.mp4
          876 kB

            Geshoski Mihail Geshoski
            jpataleta Jun Pataleta
            Peter Dias Peter Dias
            Andrew Lyons Andrew Lyons
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

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