loosing focus in sortable tables

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 (CONTRIB-1733 and MDL-41392) have a common problem : it is only a local fix; there is no global solution that will work for every moodle sortable table.
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