MDL-72896 Accessibility: Make html_table responsive

The tables are generated by html_table will responsive across viewports

grade/report/grader/lib.php

@@ -1278,6 +1278,8 @@ public function get_grade_table($displayaverages = false) {
         $fulltable->id = 'user-grades';
         $fulltable->caption = get_string('summarygrader', 'gradereport_grader');
         $fulltable->captionhide = true;
+        // We don't want the table to be enclosed within in a .table-responsive div as it is heavily customised.
+        $fulltable->responsive = false;
 
         // Extract rows from each side (left and right) and collate them into one row each
         foreach ($leftrows as $key => $row) {

group/tests/behat/behat_groups.php

@@ -77,8 +77,8 @@ public function the_groups_overview_should_include_groups_in_grouping($groups, $
 
         foreach ($groups as $groupname) {
             // Find the table after the H3 containing the grouping name, then look for the group name in the first column.
-            $xpath = "//h3[normalize-space(.) = '{$grouping}']/following-sibling::table//tr//".
-                "td[contains(concat(' ', normalize-space(@class), ' '), ' c0 ')][normalize-space(.) = '{$groupname}' ]";
+            $xpath = "//h3[normalize-space(.) = '{$grouping}']/following-sibling::div[contains(@class, 'table-responsive')]" .
+                "/table//tr//td[contains(concat(' ', normalize-space(@class), ' '), ' c0 ')][normalize-space(.) = '{$groupname}' ]";
 
             $this->execute('behat_general::should_exist', array($xpath, 'xpath_element'));
         }

lib/outputcomponents.php

@@ -2321,6 +2321,10 @@ public static function table(html_table $table) {
         }
         $output .= html_writer::end_tag('table') . "\n";
 
+        if ($table->responsive) {
+            return self::div($output, 'table-responsive');
+        }
+
         return $output;
     }
 
@@ -2772,6 +2776,9 @@ class html_table {
      */
     public $captionhide = false;
 
+    /** @var bool Whether to make the table to be scrolled horizontally with ease. Make table responsive across all viewports. */
+    public $responsive = true;
+
     /**
      * Constructor
      */

lib/tests/html_writer_test.php

@@ -193,6 +193,7 @@ public function test_table() {
         $row->cells[] = $cell;
 
         $table = new html_table();
+        $table->responsive = false;
         // The attribute will get overwritten by the ID.
         $table->id = 'Jeffrey';
         $table->attributes['id'] = 'will get overwritten';
@@ -230,6 +231,7 @@ public function test_table_hidden_caption() {
         );
         $table->caption = "Who even knows?";
         $table->captionhide = true;
+        $table->responsive = false;
 
         $output = html_writer::table($table);
         $expected = <<<EOF

lib/upgrade.txt

@@ -115,6 +115,9 @@ completely removed from Moodle core too.
 * Final deprecation: The following functions along with associated tests have been removed:
   - core_grades_external::get_grades
   - core_grades_external::get_grade_item
+* New html_table attribute "$responsive" which defaults to true. When set to true, tables created via html_writer::table() will be enclosed
+  in a .table-responsive div container which will allow the table to be scrolled horizontally with ease, especially when the table is rendered in smaller viewports.
+  Set to false to prevent the table from being enclosed in the responsive container.
 
 === 3.11.4 ===
 * A new option dontforcesvgdownload has been added to the $options parameter of the send_file() function.

mod/lesson/renderer.php

@@ -253,7 +253,7 @@ public function display_edit_collapsed(lesson $lesson, $pageid) {
             $pageid = $page->nextpageid;
         }
 
-        return html_writer::div(html_writer::table($table), 'table-responsive');
+        return html_writer::table($table);
     }
 
     /**

mod/lesson/report.php

@@ -140,7 +140,7 @@
     }
 
     // The attempts table.
-    $attemptstable = html_writer::div(html_writer::table($table), 'table-responsive');
+    $attemptstable = html_writer::table($table);
 
     // The HTML that we will be displaying which includes the attempts table and bulk actions menu, if necessary.
     $attemptshtml = $attemptstable;
@@ -352,9 +352,7 @@
         } else {
             $table->data[] = array(get_string('didnotanswerquestion', 'lesson'), " ");
         }
-        echo html_writer::start_tag('div', ['class' => 'no-overflow table-responsive']);
         echo html_writer::table($table);
-        echo html_writer::end_tag('div');
     }
 } else {
     print_error('unknowaction');