-
Improvement
-
Resolution: Won't Do
-
Minor
-
None
-
3.3.2
-
None
-
MOODLE_33_STABLE
Hi everyone,
We recently had an accessibility audit on one of our moodle platforms and the losing of the focus when sorting a table was an issue that we needed to fix.
This 'bug report' and the similar issues on the tracker ( and CONTRIB-1733) have a common problem : it is only a local fix; there is no global solution that will work for every moodle sortable table.MDL-41392
So here I will explain the issue we've faced, the solution we've found and the thought we had to generalize the process.
The problem
The concerned table is the 'Participant' page of a course.
- go to a course
- click on 'Participant' link located in the flatmenu
You can also go to this page with the url <moodle_url>/user/index.php?id=<course_id>
To reproduce the issue, navigate with the keyboard to a column header, then press <enter>
The table is sorted by the selected column, but the focus is reset at the top of the page.
The solution
We included this javascript script to re-focus on the right header :
var QueryString = function () { |
// This function is anonymous, is executed immediately and |
// the return value is assigned to QueryString! |
var query_string = {}; |
var query = window.location.search.substring(1); |
var vars = query.split("&"); |
for (var i=0;i<vars.length;i++) { |
var pair = vars[i].split("="); |
// If first entry with this name |
if (typeof query_string[pair[0]] === "undefined") { |
query_string[pair[0]] = decodeURIComponent(pair[1]);
|
// If second entry with this name |
} else if (typeof query_string[pair[0]] === "string") { |
var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ]; |
query_string[pair[0]] = arr;
|
// If third or later entry with this name |
} else { |
query_string[pair[0]].push(decodeURIComponent(pair[1]));
|
}
|
}
|
return query_string; |
}();
|
if (typeof QueryString["sifirst"] !== "undefined") { |
$(".firstinitial strong").attr("tabindex", 0).focus(); |
}
|
if (typeof QueryString["silast"] !== "undefined") { |
$(".lastinitial strong").attr("tabindex", 0).focus(); |
}
|
if (typeof QueryString["ssort"] !== "undefined") { |
$('a[href$="'+QueryString["ssort"]+'"]').focus(); |
}
|
As I said, this solution is only hiding the problem on this page but I think it's a good lead to think about it in a larger scale.
What's next?
Now couldn't we imagine forcing the client to load a piece of js script (like this one, or maybe a better one) on each page displaying a sortable table?
Do a conversation like this already exists ?
Regards,
Guillaume