refactor(table): rebase and refactor mobile JS

Kajabi · Nov 3, 2022 · dc30519 · dc30519
1 parent 5ba0e56
commit dc30519
Showing 1 changed file with 26 additions and 37 deletions.
diff --git a/packages/sage-system/lib/table.js b/packages/sage-system/lib/table.js
@@ -5,6 +5,7 @@ Sage.table = (function() {
 
   // const SELECTOR_TABLE = "[data-js-table]";
   const SELECTOR_TABLE = ".sage-table";
+  const MOBILE_TABLE_MAX_WIDTH = "767"; // SM_MAX
 
   // ==================================================
   // Functions
@@ -58,40 +59,29 @@ Sage.table = (function() {
     })
   }
 
-  // https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
-  // https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
-  function AddTableARIA() {
-    try {
-      var allTables = document.querySelectorAll('table');
-      for (var i = 0; i < allTables.length; i++) {
-        allTables[i].setAttribute('role','table');
-      }
-      var allRowGroups = document.querySelectorAll('thead, tbody, tfoot');
-      for (var i = 0; i < allRowGroups.length; i++) {
-        allRowGroups[i].setAttribute('role','rowgroup');
-      }
-      var allRows = document.querySelectorAll('tr');
-      for (var i = 0; i < allRows.length; i++) {
-        allRows[i].setAttribute('role','row');
-      }
-      var allCells = document.querySelectorAll('td');
-      for (var i = 0; i < allCells.length; i++) {
-        allCells[i].setAttribute('role','cell');
-      }
-      var allHeaders = document.querySelectorAll('th');
-      for (var i = 0; i < allHeaders.length; i++) {
-        allHeaders[i].setAttribute('role','columnheader');
-      }
-      // this accounts for scoped row headers
-      var allRowHeaders = document.querySelectorAll('th[scope=row]');
-      for (var i = 0; i < allRowHeaders.length; i++) {
-        allRowHeaders[i].setAttribute('role','rowheader');
-      }
-      // caption role not needed as it is not a real role and
-      // browsers do not dump their own role with display block
-    } catch (e) {
-      console.log("AddTableARIA(): " + e);
-    }
+  function applyAriaRoles(args) {
+    // expects an object of the form { items: "<selector(s)>", role: "<role to represent>" }
+    // based on:
+    // https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
+    // https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
+    const group = document.querySelectorAll(args.items);
+
+    group.forEach(el => {
+      el.setAttribute('role', args.role);
+    })
+  }
+
+  function addTableAria() {
+    const tableItems = [
+      { items: 'table', role: 'table' },
+      { items: 'thead, tbody, tfoot', role: 'rowgroup' },
+      { items: 'tr', role: 'row' },
+      { items: 'td', role: 'cell' },
+      { items: 'th', role: 'columnheader' },
+      { items: 'th[scope=row]', role: 'rowheader' },
+    ];
+
+    tableItems.map((item) => applyAriaRoles(item));
   }
 
   // reset classes on elements
@@ -106,11 +96,10 @@ Sage.table = (function() {
     if (document.querySelector('.sage-table--sortable') !== null) {
       sortEvents();
     }
-    if (document.querySelector('.sage-table--sortable') !== null) {
+    if (document.querySelector(SELECTOR_TABLE) !== null && window.innerWidth <= MOBILE_TABLE_MAX_WIDTH) {
+      addTableAria();
       ResponsiveCellHeaders(SELECTOR_TABLE);
     }
-
-    AddTableARIA();
   }