L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-80831 gradereport_grader: Fix collapsed columns menu accessibility

Browse Source 
- Increase the clickable size of the checkbox fields in the collapsed
columns menu, so they won't fail WCAG 2.2 SC 2.5.8 Target Size
(Level AA). This is done by moving the checkbox within the label element
which also fixes the issue of associating the label with the checkbox
instead of labelling the checkbox via `aria-labelledby`.
This commit is contained in:
Jun Pataleta
2024-05-29 10:40:40 +08:00
parent 436761ca31
commit 3c61ca4e6a
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
grade/report/grader/templates/collapse/collapseresultitems.mustache
+2 -2
View File
@@ -27,8 +27,8 @@
}
}}
<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="" aria-labelledby="check-{{name}}">
<label id="check-{{name}}" class="selected-option-info d-block pr-3 text-truncate form-check-label" tabindex="-1">
<label id="check-{{name}}" class="selected-option-info d-block pr-3 text-truncate form-check-label">
<input id="check-{{name}}-input" class="form-check-input" role="option" 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
+10 -10
View File
@@ -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
@@ -187,15 +187,15 @@ Feature: Within the grader report, test that we can collapse columns
# 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 "Email address" "option_role"
And the focused element is "Email address" "checkbox"
And I press the end key
And the focused element is "Country" "option_role"
And the focused element is "Country" "checkbox"
And I press the home key
And the focused element is "Email address" "option_role"
And the focused element is "Email address" "checkbox"
And I press the up key
And the focused element is "Country" "option_role"
And the focused element is "Country" "checkbox"
And I press the down key
And the focused element is "Email address" "option_role"
And the focused element is "Email address" "checkbox"
And I press the end key
And I press the tab key
And the focused element is "Select all" "checkbox"
@@ -208,7 +208,7 @@ Feature: Within the grader report, test that we can collapse columns
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 tab key
@@ -306,6 +306,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