mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-78885 gradereport_grader: Collapsing a11y fixes

Browse Source
This commit is contained in:
Mathew May 2023-08-10 13:00:26 +08:00 committed by Shamim Rezaie
parent 39b8e198ff
commit 27c1692867
5 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
grade/report/grader/amd/build/collapse.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
grade/report/grader/amd/build/collapse.min.js.map
View File

File diff suppressed because one or more lines are too long

20
grade/report/grader/amd/src/collapse.js
View File

@ -230,8 +230,10 @@ export default class ColumnSearch extends search_combobox {
switch (e.key) {
case 'Tab':
if (e.target.closest(this.selectors.input)) {
e.preventDefault();
this.clearSearchButton.focus({preventScroll: true});
if (!this.clearSearchButton.classList.contains('d-none')) {
e.preventDefault();
this.clearSearchButton.focus({preventScroll: true});
}
}
break;
}
@ -505,6 +507,7 @@ export default class ColumnSearch extends search_combobox {
// Add a small BS listener so that we can set the focus correctly on open.
this.$component.on('shown.bs.dropdown', () => {
this.searchInput.focus({preventScroll: true});
this.selectallEnable();
});
}
@ -512,16 +515,23 @@ export default class ColumnSearch extends search_combobox {
* Build the content then replace the node.
*/
async renderDropdown() {
const form = this.component.querySelector(selectors.formDropdown);
const selectall = form.querySelector('[data-action="selectall"]');
const {html, js} = await renderForPromise('gradereport_grader/collapse/collapseresults', {
'results': this.getMatchedResults(),
'searchTerm': this.getSearchTerm(),
});
selectall.disabled = this.getMatchedResults().length === 0;
this.selectallEnable();
replaceNodeContents(this.getHTMLElements().searchDropdown, html, js);
}
/**
* Given we render the dropdown, Determine if we want to enable the select all checkbox.
*/
selectallEnable() {
const form = this.component.querySelector(selectors.formDropdown);
const selectall = form.querySelector('[data-action="selectall"]');
selectall.disabled = this.getMatchedResults().length === 0;
}
/**
* If we have any custom user profile fields, grab their system & readable names to add to our string map.
*

4
grade/report/grader/templates/collapse/collapseresultitems.mustache
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">
<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">
<span class="selected-option-text w-100 p-0">
{{{displayName}}}
</span>

2
grade/report/grader/tests/behat/column_collapsing.feature
View File

@ -181,8 +181,6 @@ Feature: Within the grader report, test that we can collapse columns
And I choose "Collapse" in the open action menu
# Basic tests for the page.
When I click on "Collapsed columns" "combobox"
And the page should meet accessibility standards
And the page should meet "wcag131, wcag141, wcag412" accessibility standards
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"