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

Autocomplete widget: Improve keyboard accessibility

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MDL-69466-master
    • Hide
      1. Login as admin.
      2. Edit your profile.
      3. Go to the "Interests" section within  Profile page.
      4. Add multiple tags into the list of tags.
      5. Using tab to go through elements on page.
      6. Tab to the list of interests area.
      7. Check the tag list is highlighted and the first item of list is immediately highlighted (it should be displayed bigger than the other).
      8. While the row is selected, press the Left and Right arrow key on the keyboard.
      9. Check the result is the same as press Up and Down arrow key (Left is the same as Up, Right is the same as Down).
      10. Check when tabs away from the row, the highlight should be removed so that no tags are highlighted.
      Show
      Login as admin. Edit your profile. Go to the "Interests" section within  Profile page. Add multiple tags into the list of tags. Using tab to go through elements on page. Tab to the list of interests area. Check the tag list is highlighted and the first item of list is immediately highlighted (it should be displayed bigger than the other). While the row is selected, press the Left and Right arrow key on the keyboard. Check the result is the same as press Up and Down arrow key (Left is the same as Up, Right is the same as Down). Check when tabs away from the row, the highlight should be removed so that no tags are highlighted.

      The tags widget that users can use to enter and remove tags (e.g. under Interests on the 'Edit profile' screen https://sandbox.moodledemo.net/user/editadvanced.php?id=2&course=1&returnto=profile ) has keyboard support but it is not working perfectly at the moment. Specifically:

      • When you tab to the list of tags (so as to delete one or cycle through them), there is no indication of focus.
      • When you tab to the list of tags, no tag is currently selected which seems weird - you have to press Up or Down to select one.
      • If you press Down it selects the first one, but if you press Up it selects the one before last (i.e. if there were tags 1,2,3,4,5 it will select 4, which is frankly weird.)
      • The keyboard controls are Up/Down whereas tags are normally shown left to right.

      I propose the following changes:

      • There should be a focus highlight on the tag list (even if there are no tags in it) so you can tell what you just tabbed to.
      • When the user tabs to the row, it should immediately highlight the first item, to indicate that they are selectable, instead of having nothing selected by default. For example, say the tags are 1,2,3,4,5 then when you tab to the row, '1' should immediately be selected. Pressing Down would then take you to 2, or Up would take you to 5.
      • When user tabs away from the row it should remove the highlight so that no tags are highlighted.
      • The Up key should take you to the correct item - initially, to the last item not the one before last.
      • Add support for the Left and Right arrow keys while keeping Up/Down as well (Left should do the same as Up, Right the same as Down).

      This list of tags has the Aria role 'list', which I think is OK, but it doesn't imply any particular navigation controls (lists are not usually active controls), so as far as I know we are free to change it.

      We plan to develop a patch for this.

        1. image-2020-09-10-10-44-49-327.png
          image-2020-09-10-10-44-49-327.png
          44 kB
        2. MDL-57682.png
          MDL-57682.png
          459 kB
        3. snip1.png
          snip1.png
          10 kB
        4. snip2.png
          snip2.png
          6 kB

            jbthong Thong Bui
            quen Sam Marshall
            Sam Marshall Sam Marshall
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h

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