MDL-77991 gradereport_grader: Collapse a11y fixes

moodle · Aug 4, 2023 · b3d888f · b3d888f
1 parent 567f4c0
commit b3d888f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/grade/report/grader/templates/collapse/collapsebody.mustache b/grade/report/grader/templates/collapse/collapsebody.mustache
@@ -53,13 +53,11 @@
         <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" tabindex="-1" aria-label="{{#cleanstr}} aria:dropdowncolumns, gradereport_grader {{/cleanstr}}" aria-busy="true">
             {{>gradereport_grader/collapse/collapseresults}}
         </ul>
-        <div class="d-flex px-1 mt-2">
+        <div class="d-flex mt-2">
             <div class="d-flex align-items-center form-check">
-                <input disabled id="check-all-input" class="btn form-check-input" type="checkbox" value="" role="option" data-action="selectall" aria-labelledby="check-all">
-                <label id="check-all" class="selected-option-info text-truncate form-check-label" tabindex="-1" aria-label="{{#str}}selectall, core{{/str}}">
-                <span class="selected-option-text w-100 p-0">
+                <label id="check-all" for="check-all-input" class="selected-option-info text-truncate form-check-label d-block" tabindex="-1">
+                    <input disabled id="check-all-input" class="form-check-input" type="checkbox" data-action="selectall" aria-label="{{#str}}selectall, core{{/str}}">
                     {{#str}}selectall, core{{/str}}
-                </span>
                 </label>
             </div>
             <div class="flex-row ml-auto">

diff --git a/grade/report/grader/tests/behat/column_collapsing.feature b/grade/report/grader/tests/behat/column_collapsing.feature
@@ -192,13 +192,16 @@ Feature: Within the grader report, test that we can collapse columns
     And I press the down key
     And the focused element is "Email address" "option_role"
     And I press the end key
-    And the focused element is "Select all" "option_role"
+    And the focused element is "Country" "option_role"
     And I press the home key
     And the focused element is "Email address" "option_role"
     And I press the up key
-    And the focused element is "Select all" "option_role"
+    And the focused element is "Country" "option_role"
     And I press the down key
     And the focused element is "Email address" "option_role"
+    And I press the end key
+    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"
@@ -286,9 +289,9 @@ Feature: Within the grader report, test that we can collapse columns
     And I click on user profile field menu "Country"
     And I choose "Collapse" in the open action menu
     # Ensure we are ready to move onto the next step.
-    And I wait until "Collapsed columns 4" "button" exists
-    When I click on "Collapsed columns" "button"
-    And I click on "Select all" "option_role"
+    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 "Expand" "button" in the "form" "gradereport_grader > collapse search"
     # All of the previously collapsed columns should now be visible.
     Then I should see "Email" in the "First name / Last name" "table_row"
@@ -303,9 +306,9 @@ Feature: Within the grader report, test that we can collapse columns
     And I click on user profile field menu "Country"
     And I choose "Collapse" in the open action menu
     # Ensure we are ready to move onto the next step.
-    And I wait until "Collapsed columns 2" "button" exists
-    When I click on "Collapsed columns" "button"
-    And I click on "Select all" "option_role"
+    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"
     # 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