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

Fix core/form_autocomplete accessibility issues

XMLWordPrintable

    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-68167-master
    • Hide

      Requirements

      • You need a course with some students
      • You need the Axe Accessibility browser extension

      Test 1

      1. Log in as admin
      2. Enter the course
      3. Go to the course participants page
      4. From the filters above the page, click on the 'filter type' field (that's the dropdown menu with 'Select' text in it), then click on the field again so the dropdown menu is collapsed, but still highlighted.
      5. Verify that you can move between the options of the menu by pressing up and down keys on your keyboard
      6. Move between the options until you select 'Roles' and then press Enter
      7. Verify that the 'filter type' field is now disabled and a new field has appeared next to it.
      8. Click on the new field and then press the down arrow key multiple times to move between the options
      9. Verify that the selected option is highlighted clearly when moving between the options with keyboard
      10. Add 3 roles to the filter
      11. Press tab
      12. Verify that a box around the selected roles is highlighted
      13. Verify that you can move between the selected roles by pressing up and down keys on the keyboard
      14. Verify that you can delete the selected role by pressing Enter
      15. Open the developer console and go to the axe tab, and then Analyze the page
      16. Verify that you don't see the 'Elements must only use allowed ARIA attributes' error

       


      Regression test from MDL-68378:

      Requirements

      You need a course with at least:

      • 1 forum
      • 3 other activities of any type
      • at least 2 students
      • at least one student has posted in the forum

      This issue should be tested with:

      • all supported browsers.
      • a Mac computer as well as a non-Mac computer

      Test 2

      1. Log in as admin
      2. Go to the course and then go to the participants page
      3. Select the checkbox for one of the students
      4. Press the tab key several times until the dropdown element for 'With selected users...' get focus
      5. Press the down arrow key on your keyboard twice
      6. Verify that the dropdown shows 'Add a new note'
      7. Press Enter
        1. Verify that the 'Add a new note to 1 person' modal is shown
      8. Close the modal
      9. Use the keyboard to return focus to the dropdown
      10. Use the up/down arrows to choose the "Add a new note to 1 person"
      11. Press tab
        1. Verify that the 'Add a new note to 1 person' modal is shown
      12. Use the keyboard to return focus to the dropdown
      13. Use the up/down arrows to choose the "Add a new note to 1 person"
      14. Click somewhere outside of the dropdown
        1. Verify that the 'Add a new note to 1 person' modal is shown
      15. Using the mouse click on the dropdown to open it
      16. Click on the 'Add a new note' option
        1. Verify that the 'Add a new note to 1 person' modal is shown
      Show
      Requirements You need a course with some students You need the Axe Accessibility browser extension Test 1 Log in as admin Enter the course Go to the course participants page From the filters above the page, click on the 'filter type' field (that's the dropdown menu with 'Select' text in it), then click on the field again so the dropdown menu is collapsed, but still highlighted. Verify that you can move between the options of the menu by pressing up and down keys on your keyboard Move between the options until you select 'Roles' and then press Enter Verify that the 'filter type' field is now disabled and a new field has appeared next to it. Click on the new field and then press the down arrow key multiple times to move between the options Verify that the selected option is highlighted clearly when moving between the options with keyboard Add 3 roles to the filter Press tab Verify that a box around the selected roles is highlighted Verify that you can move between the selected roles by pressing up and down keys on the keyboard Verify that you can delete the selected role by pressing Enter Open the developer console and go to the axe tab, and then Analyze the page Verify that you don't see the 'Elements must only use allowed ARIA attributes' error   Regression test from  MDL-68378 : Requirements You need a course with at least: 1 forum 3 other activities of any type at least 2 students at least one student has posted in the forum This issue should be tested with: all supported browsers. a Mac computer as well as a non-Mac computer Test 2 Log in as admin Go to the course and then go to the participants page Select the checkbox for one of the students Press the tab key several times until the dropdown element for 'With selected users...' get focus Press the down arrow key on your keyboard twice Verify that the dropdown shows 'Add a new note' Press Enter Verify that the 'Add a new note to 1 person' modal is shown Close the modal Use the keyboard to return focus to the dropdown Use the up/down arrows to choose the "Add a new note to 1 person" Press tab Verify that the 'Add a new note to 1 person' modal is shown Use the keyboard to return focus to the dropdown Use the up/down arrows to choose the "Add a new note to 1 person" Click somewhere outside of the dropdown Verify that the 'Add a new note to 1 person' modal is shown Using the mouse click on the dropdown to open it Click on the 'Add a new note' option Verify that the 'Add a new note to 1 person' modal is shown
    • 0
    • International 4.0 - Sprint 2, International 4.0 - Sprint 3, International 4.0 - Sprint 4, International 4.0 - Sprint 5, International 4.0 - Sprint 6, International 4.0 - Sprint 7

      Analysing the enhanced select dropdown (as used in the participants page filter) using Axe Pro highlights some accessibility issues, such as invalid aria labels and the UL used by the dropdown needing some work. (I haven't included the results here, as they are probably best analysed and tested by whoever works on it).

      The new participants page filter will also utilise the same core functionality of that dropdown, so this needs to be solved in order for the new participants filter to pass accessibility testing.

      Other issues found:

      • The currently selected items cannot be removed by keyboard navigation. On core's autocomplete element, this cannot be done at all. On the participant filter's autocomplete element, the delete button can be tabbed into, but pressing enter or space does not do anything.
      • When hovering over each item on the autocomplete's dropdown via mouse, the items are being highlighted accordingly. However, during keyboard navigation, this is not the case. The current item gets highlighted in grey which is a bit hard to see.

        1. badge size.png
          badge size.png
          146 kB
        2. image-2020-10-30-05-43-41-862.png
          image-2020-10-30-05-43-41-862.png
          4 kB
        3. MDL-68167.jpg
          MDL-68167.jpg
          68 kB
        4. MDL-68167 (2).jpg
          MDL-68167 (2).jpg
          43 kB
        5. outline color.png
          outline color.png
          140 kB
        6. select-keyboardnav.png
          select-keyboardnav.png
          10 kB
        7. select-mousehover.png
          select-mousehover.png
          10 kB

            rezaie9 Shamim Rezaie
            michaelh Michael Hawkins
            Bas Brands Bas Brands
            Jun Pataleta Jun Pataleta
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            1 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 week, 2 days, 1 hour, 27 minutes
                1w 2d 1h 27m

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