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

Fix accessibility of block_timeline menus

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      Prerequisites
      1. A screen reader software (e.g. JAWS, NVDA, ChromeVox, Voice Over)
      Test (Both Boost and Clean)
      1. Log in as a user
      2. Go to your dashboard
      3. Click on the Timeline block
      4. With your screen reader turned on, use your keyboard to navigate to the Day Filter control (e.g. via Shift + Tab or Tab).
      5. Confirm that you only hear "Filter timeline items" (except for the element's description)
      6. Confirm that it is being described as a button menu/submenu (depending on the screen reader).
      7. Press enter or space to open the Day Filter menu
      8. Go through each item on the menu.
      9. Confirm that the items are announced and are described as menu items and not links. (at least in JAWS and NVDA)
      10. Confirm that when you are on a currently-selected menu item, you hear "current" at the end. (at least in JAWS and NVDA, probably not working on ChromeVox and Voice Over)
      11. This time, navigate to the Sort-by control (e.g. via Shift + Tab or Tab).
      12. Confirm that you only hear "Sort timeline items" (except for the element's description)
      13. Confirm that it is being described as a button menu/submenu (depending on the screen reader).
      14. Press enter or space to open the Sort-by menu
      15. Go through each item on the menu.
      16. Confirm that the items are announced and are described as menu items and not links. (at least in JAWS and NVDA)
      17. Confirm that when you are on a currently-selected menu item, you hear "current" at the end. (at least in JAWS and NVDA, probably not working on ChromeVox and Voice Over)
      Show
      Prerequisites A screen reader software (e.g. JAWS, NVDA, ChromeVox, Voice Over) Test (Both Boost and Clean) Log in as a user Go to your dashboard Click on the Timeline block With your screen reader turned on, use your keyboard to navigate to the Day Filter control (e.g. via Shift + Tab or Tab). Confirm that you only hear "Filter timeline items" (except for the element's description) Confirm that it is being described as a button menu/submenu (depending on the screen reader). Press enter or space to open the Day Filter menu Go through each item on the menu. Confirm that the items are announced and are described as menu items and not links. (at least in JAWS and NVDA) Confirm that when you are on a currently-selected menu item, you hear "current" at the end. (at least in JAWS and NVDA, probably not working on ChromeVox and Voice Over) This time, navigate to the Sort-by control (e.g. via Shift + Tab or Tab). Confirm that you only hear "Sort timeline items" (except for the element's description) Confirm that it is being described as a button menu/submenu (depending on the screen reader). Press enter or space to open the Sort-by menu Go through each item on the menu. Confirm that the items are announced and are described as menu items and not links. (at least in JAWS and NVDA) Confirm that when you are on a currently-selected menu item, you hear "current" at the end. (at least in JAWS and NVDA, probably not working on ChromeVox and Voice Over)
    • Affected Branches:
      MOODLE_36_STABLE, MOODLE_37_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull from Repository:
    • Pull 3.6 Branch:
    • Pull 3.6 Diff URL:
    • Pull Master Branch:
      MDL-65005-master
    • Pull Master Diff URL:

      Description

      There are some accessibility issues for the menus on Timeline block. Quoting Damyon Wiese from MDL-64746:

      Looking at the dropdown in this issue, the button does not have any aria-label - but in the the content of the button there is some screen reader only text that contains the label.

      This is not great because the screen reader will merge this text with the selected item and use that for the label for the entire button. The result is a button which is labelled as "Sort timeline items Sort by courses" which is mixing the both the action of the button with the current value and is not really clear.

      If this button has an aria label "Sort timeline items" it would be better.

      Other accessibility problems include:

      • role attribute not defined for the menu items.
      • aria-controls not defined on the menu trigger.

        Attachments

          Activity

            People

            • Assignee:
              jpataleta Jun Pataleta
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Damyon Wiese
              Integrator:
              Eloy Lafuente (stronk7)
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                13/May/19

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 15 minutes
                1d 15m