Skip to content

Commit

Permalink
MDL-68167 user: Improve keyboard navigation on autocomplete fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@rezaies
rezaies committed Oct 30, 2020
1 parent 2a02fba commit ce484f2
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 16 deletions.
2 changes: 1 addition & 1 deletion group/tests/behat/create_groups.feature
View file
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion user/templates/local/participantsfilter/autocomplete_selection.mustache
View file
Expand Up @@ -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"{{!
Expand Down
7 changes: 2 additions & 5 deletions user/templates/local/participantsfilter/autocomplete_selection_items.mustache
View file
Expand Up @@ -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}}
Expand Down
18 changes: 9 additions & 9 deletions user/tests/behat/filter_participants.feature
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit ce484f2

Please sign in to comment.