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

Autocomplete widget: Improve keyboard accessibility

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.9.1
    • Fix Version/s: 3.8.5, 3.9.2
    • Component/s: Forms Library
    • Labels:

      Description

      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.

        Attachments

        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

          Activity

            People

            Assignee:
            jbthong Thong Bui
            Reporter:
            quen Sam Marshall
            Peer reviewer:
            Sam Marshall
            Integrator:
            Sara Arjona (@sarjona)
            Tester:
            Janelle Barcega
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Fix Release Date:
              14/Sep/20

                Time Tracking

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