Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-60166

loosing focus in sortable tables

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 3.3.2
    • Accessibility
    • 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 (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

            Unassigned Unassigned
            tazoeur Guillaume Latour
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.