Use table HTML elements for a11y

CityOfDetroit · Oct 23, 2023 · a313578 · a313578
1 parent 3c6e696
commit a313578
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 34 deletions.
diff --git a/src/components/atoms/TableBody/TableBody.css b/src/components/atoms/TableBody/TableBody.css
@@ -0,0 +1,3 @@
+tbody {
+  display: block;
+}
diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js
@@ -15,8 +15,7 @@ export default class TableBody extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableBody = document.createElement('div');
-    this.tableBody.role = 'rowgroup';
+    this.tableBody = document.createElement('tbody');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {

diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css
@@ -1,16 +1,17 @@
-.table-cell {
+td {
+  display: block;
   padding: 0.5rem 0.5rem;
   background-color: var(--bs-table-bg);
   border-bottom: solid var(--bs-border-width) var(--bs-secondary);
   box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
   height: 100%;
 }
 
-.table-cell.table-striped,
-.table-cell.table-striped-columns {
+td.table-striped,
+td.table-striped-columns {
   --bs-table-accent-bg: var(--bs-table-striped-bg);
 }
 
-.table-cell.table-legacy-responsive {
+td.table-legacy-responsive {
   width: 5em;
 }
diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js
@@ -15,8 +15,7 @@ export default class TableCell extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableCell = document.createElement('div');
-    this.tableCell.role = 'cell';
+    this.tableCell = document.createElement('td');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
@@ -61,7 +60,7 @@ export default class TableCell extends HTMLElement {
     let extraClasses = this.getAttribute('data-extra-classes');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line prefer-const
-    let tableCellClasses = ['table-cell'];
+    let tableCellClasses = [];
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     verticalAlign != undefined && verticalAlign != null

diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css
@@ -1,4 +1,5 @@
-.table-cell-header {
+th {
+  display: block;
   padding: 0.5rem 0.5rem;
   background-color: var(--bs-table-bg);
   border-bottom: solid var(--bs-border-width) var(--bs-secondary);
@@ -7,10 +8,10 @@
   height: 100%;
 }
 
-.table-cell-header.table-striped-columns {
+th.table-striped-columns {
   --bs-table-accent-bg: var(--bs-table-striped-bg);
 }
 
-.table-cell-header.table-legacy-responsive {
+th.table-legacy-responsive {
   width: 5em;
 }
diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.js b/src/components/atoms/TableCellHeader/TableCellHeader.js
@@ -15,8 +15,7 @@ export default class TableCellHeader extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableCellHeader = document.createElement('div');
-    this.tableCellHeader.role = 'columnheader';
+    this.tableCellHeader = document.createElement('th');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
@@ -61,7 +60,7 @@ export default class TableCellHeader extends HTMLElement {
     let extraClasses = this.getAttribute('data-extra-classes');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line prefer-const
-    let tableCellHeaderClasses = ['table-cell-header'];
+    let tableCellHeaderClasses = [];
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     verticalAlign != undefined && verticalAlign != null

diff --git a/src/components/atoms/TableHeader/TableHeader.css b/src/components/atoms/TableHeader/TableHeader.css
@@ -0,0 +1,3 @@
+thead {
+  display: block;
+}
diff --git a/src/components/atoms/TableHeader/TableHeader.js b/src/components/atoms/TableHeader/TableHeader.js
@@ -15,8 +15,7 @@ export default class TableHeader extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableHeader = document.createElement('div');
-    this.tableHeader.role = 'rowgroup';
+    this.tableHeader = document.createElement('thead');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {

diff --git a/src/components/atoms/TableRow/TableRow.css b/src/components/atoms/TableRow/TableRow.css
@@ -1,36 +1,36 @@
-.table-row {
+tr {
   border-color: inherit;
   border-style: solid;
   border-width: 0;
   display: flex;
   align-items: stretch;
 }
 
-.table-row cod-table-cell,
-.table-row cod-table-cell-header {
+tr cod-table-cell,
+tr cod-table-cell-header {
   flex: 1;
 }
 
-.table-row cod-table-cell[colspan='2'],
-.table-row cod-table-cell-header[colspan='2'] {
+tr cod-table-cell[colspan='2'],
+tr cod-table-cell-header[colspan='2'] {
   flex: 2;
 }
 
-.table-row cod-table-cell[colspan='3'],
-.table-row cod-table-cell-header[colspan='3'] {
+tr cod-table-cell[colspan='3'],
+tr cod-table-cell-header[colspan='3'] {
   flex: 3;
 }
 
-.table-row cod-table-cell[colspan='4'],
-.table-row cod-table-cell-header[colspan='4'] {
+tr cod-table-cell[colspan='4'],
+tr cod-table-cell-header[colspan='4'] {
   flex: 4;
 }
 
-.table-row cod-table-cell[colspan='5'],
-.table-row cod-table-cell-header[colspan='5'] {
+tr cod-table-cell[colspan='5'],
+tr cod-table-cell-header[colspan='5'] {
   flex: 5;
 }
 
-.table-row.table-hover:hover {
+tr.table-hover:hover {
   --bs-table-accent-bg: var(--bs-table-hover-bg);
 }
diff --git a/src/components/atoms/TableRow/TableRow.js b/src/components/atoms/TableRow/TableRow.js
@@ -15,8 +15,7 @@ export default class TableBody extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableRow = document.createElement('div');
-    this.tableRow.role = 'row';
+    this.tableRow = document.createElement('tr');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
@@ -72,7 +71,7 @@ export default class TableBody extends HTMLElement {
     let hover = this.getAttribute('data-hover');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line prefer-const
-    let tableRowClasses = ['table-row'];
+    let tableRowClasses = [];
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     hover == 'true' ? tableRowClasses.push('table-hover') : 0;

diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js
@@ -16,8 +16,7 @@ export default class Table extends HTMLElement {
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
     this.tableContainer = document.createElement('div');
-    this.table = document.createElement('div');
-    this.table.role = 'table';
+    this.table = document.createElement('table');
     this.tableContainer.appendChild(this.table);
 
     // TODO: See CityOfDetroit/detroitmi#1099