feat(td-headers-attr): report headers attribute referencing other <td> elements as unsupported

lib/checks/tables/td-headers-attr-evaluate.js

@@ -3,25 +3,32 @@ import { isVisibleToScreenReaders } from '../../commons/dom';
 
 export default function tdHeadersAttrEvaluate(node) {
   const cells = [];
-  const reviewCells = [];
   const badCells = [];
+  const reviewCells = [];
+  const tableHeaders = new Set();
 
   for (let rowIndex = 0; rowIndex < node.rows.length; rowIndex++) {
     const row = node.rows[rowIndex];
 
     for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
-      cells.push(row.cells[cellIndex]);
+      const cell = row.cells[cellIndex];
+      cells.push(cell);
+
+      // Save header id to set if it's th or td with roles columnheader/rowheader
+      const cellId = cell.getAttribute('id');
+      const role = cell.getAttribute('role');
+      if (
+        cellId &&
+        (cell.nodeName.toLowerCase() === 'th' ||
+          role === 'columnheader' ||
+          role === 'rowheader')
+      ) {
+        tableHeaders.add(cellId);
+      }
     }
   }
 
-  const ids = cells
-    .filter(cell => cell.getAttribute('id'))
-    .map(cell => cell.getAttribute('id'));
-
   cells.forEach(cell => {
-    let isSelf = false;
-    let notOfTable = false;
-
     if (!cell.hasAttribute('headers') || !isVisibleToScreenReaders(cell)) {
       return;
     }
@@ -33,24 +40,35 @@ export default function tdHeadersAttrEvaluate(node) {
 
     // Get a list all the values of the headers attribute
     const headers = tokenList(headersAttr);
+    const cellId = cell.getAttribute('id');
 
-    if (headers.length !== 0) {
-      // Check if the cell's id is in this list
-      if (cell.getAttribute('id')) {
-        isSelf = headers.indexOf(cell.getAttribute('id').trim()) !== -1;
-      }
-
-      // Check if the headers are of cells inside the table
-      notOfTable = headers.some(header => !ids.includes(header));
+    // Check: self reference and check that headers reference an existing header
+    const isSelf = cellId && headers.includes(cellId);
+    const notOfTable = headers.some(header => !tableHeaders.has(header));
 
-      if (isSelf || notOfTable) {
-        badCells.push(cell);
-      }
+    if (isSelf || notOfTable) {
+      badCells.push(cell);
     }
   });
 
   if (badCells.length > 0) {
+    const tdInTable = badCells.some(cell => {
+      const headers = tokenList(cell.getAttribute('headers'));
+      return headers.some(header => {
+        const referencedCell = cells.find(c => c.getAttribute('id') === header);
+        return (
+          referencedCell &&
+          referencedCell.nodeName.toLowerCase() === 'td' &&
+          !referencedCell.getAttribute('role')
+        );
+      });
+    });
+
+    const messageKey = tdInTable
+      ? 'header-is-data-cell'
+      : 'header-not-in-table';
     this.relatedNodes(badCells);
+    this.data({ messageKey });
     return false;
   }
 

lib/checks/tables/td-headers-attr.json

@@ -4,9 +4,12 @@
   "metadata": {
     "impact": "serious",
     "messages": {
-      "pass": "The headers attribute is exclusively used to refer to other cells in the table",
+      "pass": "The headers attribute is exclusively used to refer to other header cells in the table",
       "incomplete": "The headers attribute is empty",
-      "fail": "The headers attribute is not exclusively used to refer to other cells in the table"
+      "fail": {
+        "header-not-in-table": "The headers attribute is not exclusively used to refer to other header cells in the table",
+        "header-is-data-cell": "The header attribute refers a data cell, this must be a header cell so that all screen readers announce it"
+      }
     }
   }
 }

locales/_template.json

@@ -1096,9 +1096,12 @@
       "fail": "Some non-empty data cells do not have table headers"
     },
     "td-headers-attr": {
-      "pass": "The headers attribute is exclusively used to refer to other cells in the table",
+      "pass": "The headers attribute is exclusively used to refer to other header cells in the table",
       "incomplete": "The headers attribute is empty",
-      "fail": "The headers attribute is not exclusively used to refer to other cells in the table"
+      "fail": {
+        "header-not-in-table": "The headers attribute is not exclusively used to refer to other header cells in the table",
+        "header-is-data-cell": "The header attribute refers a data cell, this must be a header cell so that all screen readers announce it"
+      }
     },
     "th-has-data-cells": {
       "pass": "All table header cells refer to data cells",

test/checks/tables/td-headers-attr.js

@@ -102,6 +102,42 @@ describe('td-headers-attr', function () {
     assert.isFalse(check.call(checkContext, node));
   });
 
+  it('returns false if table cell referenced as header', function () {
+    fixtureSetup(
+      '<table>' +
+        '  <tr> <td id="hi">hello</td> </tr>' +
+        '  <tr> <td headers="hi">goodbye</td> </tr>' +
+        '</table>'
+    );
+
+    var node = fixture.querySelector('table');
+    assert.isFalse(check.call(checkContext, node));
+  });
+
+  it('returns true if table cell referenced as header with role rowheader or columnheader', function () {
+    var node;
+
+    fixtureSetup(
+      '<table>' +
+        '  <tr> <td role="rowheader" id="hi">hello</td> </tr>' +
+        '  <tr> <td headers="hi">goodbye</td> </tr>' +
+        '</table>'
+    );
+
+    node = fixture.querySelector('table');
+    assert.isTrue(check.call(checkContext, node));
+
+    fixtureSetup(
+      '<table>' +
+        '  <tr> <td role="columnheader" id="hi">hello</td> </tr>' +
+        '  <tr> <td headers="hi">goodbye</td> </tr>' +
+        '</table>'
+    );
+
+    node = fixture.querySelector('table');
+    assert.isTrue(check.call(checkContext, node));
+  });
+
   it('returns false if the header refers to the same cell', function () {
     fixtureSetup(
       '<table id="hi">' +

test/integration/rules/td-headers-attr/td-headers-attr.html

@@ -19,6 +19,11 @@
   <td id="self" headers="self" hidden>World</td>
 </table>
 
+<table id="pass5">
+  <td role="rowheader" id="hdr1">Hello</td>
+  <td headers="hdr1">World</td>
+</table>
+
 <table id="fail1">
   <th id="f1h1">Hello</th>
   <td headers="f1h1 non-existing">World</td>
@@ -32,6 +37,21 @@
   <td id="self" headers="self">World</td>
 </table>
 
+<table id="fail4">
+  <td id="hdr1">Hello</td>
+  <td headers="hdr1">World</td>
+</table>
+
+<table id="fail5">
+  <td role="cell" id="hdr1">Hello</td>
+  <td headers="hdr1">World</td>
+</table>
+
+<table id="fail6">
+  <td role="button" id="hdr1">Hello</td>
+  <td headers="hdr1">World</td>
+</table>
+
 <table id="inapplicable1" role="none">
   <td id="self" headers="self">World</td>
 </table>

test/integration/rules/td-headers-attr/td-headers-attr.json

@@ -1,6 +1,13 @@
 {
   "description": "td-headers-attr test",
   "rule": "td-headers-attr",
-  "violations": [["#fail1"], ["#fail2"], ["#fail3"]],
-  "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"]]
+  "violations": [
+    ["#fail1"],
+    ["#fail2"],
+    ["#fail3"],
+    ["#fail4"],
+    ["#fail5"],
+    ["#fail6"]
+  ],
+  "passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"]]
 }