MDL-68167 user: Improve keyboard navigation on autocomplete fields

group/tests/behat/create_groups.feature

@@ -56,7 +56,7 @@ Feature: Organize students into groups
     And I should see "Student 0"
     And I should see "Student 1"
     And I should not see "Student 2"
-    And I click on "Remove \"Group 1\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "Group 1" "autocomplete_selection"
     And I click on ".form-autocomplete-downarrow" "css_element" in the "Filter 1" "fieldset"
     And I click on "Group 2" "list_item"
     And I click on "Apply filters" "button"

user/templates/local/participantsfilter/autocomplete_selection.mustache

@@ -38,7 +38,7 @@
     ], "noSelectionString": "No selection" }
 }}
 <div{{!
-    }} class="d-inline-block mb-0{{#multiple}} form-autocomplete-multiple h5{{/multiple}}"{{!
+    }} class="form-autocomplete-selection d-inline-block my-0{{#multiple}} form-autocomplete-multiple h5{{/multiple}}"{{!
     }} id="{{selectionId}}"{{!
     }} role="list"{{!
     }} aria-atomic="true"{{!

user/templates/local/participantsfilter/autocomplete_selection_items.mustache

@@ -42,11 +42,8 @@
 }}
 {{#items}}
     <span role="listitem" data-value="{{value}}" aria-selected="true"
-            class="badge badge-secondary clickable text-wrap text-break line-height-4 mr-2 my-1">
-        {{label}}
-        <button class="btn btn-link text-reset p-0" aria-label='{{#str}}clearfilterselection, core_user, {{label}}{{/str}}'>
-            <i class="icon fa fa-times pl-2 mr-0"></i>
-        </button>
+            class="badge badge-secondary clickable text-wrap text-break line-height-4 m-1">
+        {{label}}<i class="icon fa fa-times pl-2 mr-0"></i>
     </span>
 {{/items}}
 {{^items}}

user/tests/behat/filter_participants.feature

@@ -290,7 +290,7 @@ Feature: Course participants can be filtered
     And I should not see "Student 2" in the "participants" "table"
     And I should not see "Student 4" in the "participants" "table"
     # Change the active status filter to inactive.
-    And I click on "Remove \"Active\" from filter" "button" in the "Filter 2" "fieldset"
+    And I click on "Active" "autocomplete_selection"
     And I click on ".form-autocomplete-downarrow" "css_element" in the "Filter 2" "fieldset"
     And I click on "Inactive" "list_item"
     And I click on "Apply filters" "button"
@@ -540,7 +540,7 @@ Feature: Course participants can be filtered
     And I should not see "Student 2" in the "participants" "table"
     And I should not see "Teacher 1" in the "participants" "table"
     # Search by idnumber (only).
-    And I click on "Remove \"student1@example.com\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "student1@example.com" "autocomplete_selection"
     And I set the field "Type..." to "SID"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
@@ -550,7 +550,7 @@ Feature: Course participants can be filtered
     And I should see "Student 4" in the "participants" "table"
     And I should not see "Teacher 1" in the "participants" "table"
     # Search by city (only).
-    And I click on "Remove \"SID\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "SID" "autocomplete_selection"
     And I set the field "Type..." to "SCITY"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
@@ -560,13 +560,13 @@ Feature: Course participants can be filtered
     And I should see "Student 4" in the "participants" "table"
     And I should not see "Teacher 1" in the "participants" "table"
     # Search by country text (only) - should not match.
-    And I click on "Remove \"SCITY\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "SCITY" "autocomplete_selection"
     And I set the field "Type..." to "GB"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
     And I should see "Nothing to display"
     # Check no match.
-    And I click on "Remove \"GB\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "GB" "autocomplete_selection"
     And I set the field "Type..." to "NOTHING"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
@@ -594,25 +594,25 @@ Feature: Course participants can be filtered
     And I should not see "Student 4" in the "participants" "table"
     And I should see "Teacher 1" in the "participants" "table"
     # Search for other fields - should only see own results.
-    And I click on "Remove \"@example.\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "@example." "autocomplete_selection"
     And I set the field "Type..." to "SID"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
     And I should see "Nothing to display"
-    And I click on "Remove \"SID\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "SID" "autocomplete_selection"
     And I set the field "Type..." to "TID"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
     And I should see "Teacher 1" in the "participants" "table"
     And I should not see "Student 1" in the "participants" "table"
-    And I click on "Remove \"TID\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "TID" "autocomplete_selection"
     And I set the field "Type..." to "CITY"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"
     And I should see "Teacher 1" in the "participants" "table"
     And I should not see "Student 1" in the "participants" "table"
     # Check no match.
-    And I click on "Remove \"CITY\" from filter" "button" in the "Filter 1" "fieldset"
+    And I click on "CITY" "autocomplete_selection"
     And I set the field "Type..." to "NOTHING"
     And I press key "13" in the field "Type..."
     And I click on "Apply filters" "button"