MDL-78885 gradereport_grader: minor fixes to the collapse columns

grade/report/grader/amd/src/collapse.js

@@ -56,6 +56,7 @@ const selectors = {
     count: '[data-collapse="count"]',
     placeholder: '.collapsecolumndropdown [data-region="placeholder"]',
     fullDropdown: '.collapsecolumndropdown',
+    searchResultContainer: '.searchresultitemscontainer',
 };
 
 const countIndicator = document.querySelector(selectors.count);
@@ -98,6 +99,19 @@ export default class ColumnSearch extends search_combobox {
                 document.querySelector('.gradereport-grader-table').classList.remove('d-none');
             }, 10);
         }).then(() => pendingPromise.resolve()).catch(Notification.exception);
+
+        this.$component.on('hide.bs.dropdown', () => {
+            const searchResultContainer = this.component.querySelector(selectors.searchResultContainer);
+            searchResultContainer.scrollTop = 0;
+
+            // Use setTimeout to make sure the following code is executed after the click event is handled.
+            setTimeout(() => {
+                if (this.searchInput.value !== '') {
+                    this.searchInput.value = '';
+                    this.searchInput.dispatchEvent(new Event('input', {bubbles: true}));
+                }
+            });
+        });
     }
 
     /**
@@ -498,8 +512,12 @@ export default class ColumnSearch extends search_combobox {
             'results': this.getMatchedResults(),
             'searchTerm': this.getSearchTerm(),
         });
-        this.selectallEnable();
         replaceNodeContents(this.getHTMLElements().searchDropdown, html, js);
+        this.selectallEnable();
+        // Reset the expand button to be disabled as we have re-rendered the dropdown.
+        const form = this.component.querySelector(selectors.formDropdown);
+        const expandButton = form.querySelector(`[data-action="${selectors.formItems.save}"`);
+        expandButton.disabled = true;
     }
 
     /**

grade/report/grader/templates/collapse/collapsebody.mustache

@@ -39,20 +39,14 @@
         {{$placeholder}}{{#str}}
             searchcollapsedcolumns, core_grades
         {{/str}}{{/placeholder}}
-        {{$additionalattributes}}
-            role="combobox"
-            aria-expanded="true"
-            aria-controls="collapse-listbox"
-            aria-autocomplete="list"
-            data-input-element="collapse-input-{{uniqid}}"
-        {{/additionalattributes}}
     {{/ core/search_input_auto }}
-    <input type="hidden" name="search" id="collapse-input-{{uniqid}}"/>
-
     <form class="columnsdropdownform flex-column h-100">
-        <ul id="collapse-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" role="listbox" data-region="search-result-items-container" aria-label="{{#cleanstr}} aria:dropdowncolumns, gradereport_grader {{/cleanstr}}">
-            {{>gradereport_grader/collapse/collapseresults}}
-        </ul>
+        <fieldset>
+            <legend class="sr-only">{{#str}} aria:dropdowncolumns, gradereport_grader {{/str}}</legend>
+            <ul id="collapse-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" data-region="search-result-items-container">
+                {{>gradereport_grader/collapse/collapseresults}}
+            </ul>
+        </fieldset>
         <div class="d-flex mt-2">
             <div class="d-flex align-items-center form-check">
                 <label id="check-all" class="selected-option-info text-truncate form-check-label d-block">

grade/report/grader/templates/collapse/collapseresultitems.mustache

@@ -26,9 +26,9 @@
         "category": "Hitchhikers grade category"
     }
 }}
-<li class="w-100 result-row form-check mb-1" role="none">
-    <input id="check-{{name}}-input" class="form-check-input" role="option" data-collapse="{{name}}" type="checkbox" value="">
-    <label id="check-{{name}}" for="check-{{name}}-input" class="selected-option-info d-block pr-3 text-truncate form-check-label" tabindex="-1">
+<li class="w-100 result-row form-check mb-1">
+    <label class="selected-option-info d-block pr-3 text-truncate form-check-label">
+        <input class="form-check-input" data-collapse="{{name}}" type="checkbox" value="">
         <span class="selected-option-text w-100 p-0">
             {{{displayName}}}
         </span>

grade/report/grader/tests/behat/column_collapsing.feature

@@ -110,9 +110,9 @@ Feature: Within the grader report, test that we can collapse columns
     And I click on "Collapsed columns" "combobox"
     # This is checking that the column name search dropdown exists.
     When I wait until "Search collapsed columns" "field" exists
-    And I click on "Test assignment one" "option_role" in the "form" "gradereport_grader > collapse search"
-    And I click on "Test assignment three" "option_role" in the "form" "gradereport_grader > collapse search"
-    And I click on "Phone" "option_role" in the "form" "gradereport_grader > collapse search"
+    And I click on "Test assignment one" "checkbox" in the "form" "gradereport_grader > collapse search"
+    And I click on "Test assignment three" "checkbox" in the "form" "gradereport_grader > collapse search"
+    And I click on "Phone" "checkbox" in the "form" "gradereport_grader > collapse search"
     And I click on "Expand" "button" in the "form" "gradereport_grader > collapse search"
     And "Test assignment one" "link" in the "First name / Last name" "table_row" should be visible
     And "Test assignment three" "link" in the "First name / Last name" "table_row" should be visible
@@ -184,27 +184,12 @@ Feature: Within the grader report, test that we can collapse columns
     And the page should meet accessibility standards with "wcag131, wcag141, wcag412" extra tests
     # Move onto general keyboard navigation testing.
     Then the focused element is "Search collapsed columns" "field"
-    And I press the down key
-    And the focused element is "Search collapsed columns" "field"
-    And ".active" "css_element" should exist in the "Email address" "option_role"
-    And I press the up key
-    And the focused element is "Search collapsed columns" "field"
-    And ".active" "css_element" should exist in the "Country" "option_role"
-    And I press the down key
-    And the focused element is "Search collapsed columns" "field"
-    And ".active" "css_element" should exist in the "Email address" "option_role"
-    And I press the tab key
-    And the focused element is "Select all" "checkbox"
     And I press the escape key
     And the focused element is "Collapsed columns" "combobox"
     And I click on "Collapsed columns" "combobox"
-    Then I set the field "Search collapsed columns" to "Goodmeme"
-    And I wait until "No results for \"Goodmeme\"" "text" exists
-    And I press the down key
-    And the focused element is "Search collapsed columns" "field"
     # Lets check the tabbing order.
     And I set the field "Search collapsed columns" to "phone"
-    And I wait until "Mobile phone" "option_role" exists
+    And I wait until "Mobile phone" "checkbox" exists
     And I press the tab key
     And the focused element is "Clear search input" "button" in the ".dropdown-menu.show" "css_element"
     And I press the escape key
@@ -298,6 +283,6 @@ Feature: Within the grader report, test that we can collapse columns
     And I wait until "Collapsed columns" "combobox" exists
     When I click on "Collapsed columns" "combobox"
     And I click on "Select all" "checkbox"
-    And I click on "Email" "option_role" in the "form" "gradereport_grader > collapse search"
+    And I click on "Email" "checkbox" in the "form" "gradereport_grader > collapse search"
     # The select all option should now be unchecked, Checking the form or option role is iffy with behat so we use the id.
-    Then "input#check-all-input:not([checked=checked])" "css_element" should exist
+    Then the field "Select all" matches value ""