fix: td-has-heading to ignore td with its role changed (#928)

Author: WilcoFiers

lib/checks/tables/td-has-header.js

@@ -9,10 +9,9 @@ cells.forEach((cell) => {
 		!axe.commons.aria.label(cell)
 	) {
 		// Check if it has any headers
-		var hasHeaders = tableUtils.getHeaders(cell);
-		hasHeaders = hasHeaders.reduce(function (hasHeaders, header) {
-			return (hasHeaders || header !== null && !!axe.commons.dom.hasContent(header));
-		}, false);
+		const hasHeaders = tableUtils.getHeaders(cell).some(header => {
+			return header !== null && !!axe.commons.dom.hasContent(header);
+		});
 
 		// If no headers, put it on the naughty list
 		if (!hasHeaders) {

lib/commons/table/is-data-cell.js

@@ -13,5 +13,10 @@ table.isDataCell = function (cell) {
 	if (!cell.children.length && !cell.textContent.trim()) {
 		return false;
 	}
-	return cell.nodeName.toUpperCase() === 'TD';
+	const role = cell.getAttribute('role');
+	if (axe.commons.aria.isValidRole(role)) {
+		return ['cell', 'gridcell'].includes(role);
+	} else {
+		return cell.nodeName.toUpperCase() === 'TD';
+	}
 };

test/commons/table/is-data-cell.js

@@ -40,4 +40,42 @@ describe('table.isDataCell', function () {
 		assert.isFalse(axe.commons.table.isDataCell(target));
 	});
 
+	it('should ignore TDs with a valid role other than (grid)cell', function () {
+		fixture.innerHTML = '<table>' +
+			'<tr><td id="target1" role="columnheader">heading</td></tr>' +
+			'<tr><td id="target2" role="rowheader">heading</td></tr>' +
+			'<tr><td id="target3" role="presentation">heading</td></tr>' +
+			'</table>';
+
+		var target1 = $id('target1');
+		var target2 = $id('target2');
+		var target3 = $id('target3');
+		assert.isFalse(axe.commons.table.isDataCell(target1));
+		assert.isFalse(axe.commons.table.isDataCell(target2));
+		assert.isFalse(axe.commons.table.isDataCell(target3));
+	});
+
+	it('should return true for elements with role="(grid)cell"', function () {
+		fixture.innerHTML = '<table>' +
+			'<tr><th id="target1" role="cell">heading</th></tr>' +
+			'<tr><th id="target2" role="gridcell">heading</th></tr>' +
+			'</table>';
+
+		var target1 = $id('target1');
+		var target2 = $id('target2');
+		assert.isTrue(axe.commons.table.isDataCell(target1));
+		assert.isTrue(axe.commons.table.isDataCell(target2));
+	});
+
+	it('should ignore invalid roles', function () {
+		fixture.innerHTML = '<table>' +
+			'<tr><td id="target1" role="foobar">heading</td></tr>' +
+			'<tr><th id="target2" role="foobar">heading</th></tr>' +
+			'</table>';
+
+		var target1 = $id('target1');
+		var target2 = $id('target2');
+		assert.isTrue(axe.commons.table.isDataCell(target1));
+		assert.isFalse(axe.commons.table.isDataCell(target2));
+	});
 });

test/integration/rules/td-has-header/td-has-header.html

@@ -27,14 +27,32 @@
   <tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
 </table>
 
-</table>
 <table id="pass3">
   <tr> <th>AXE</th> <th>AXE</th> <th>AXE</th> <th>AXE</th> </tr>
   <tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
   <tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
   <tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
 </table>
 
+<table id="pass4">
+  <tr>
+    <td role="columnheader">AXE</td>
+    <td role="columnheader">AXE</td>
+    <td role="columnheader">AXE</td>
+    <td role="columnheader">AXE</td>
+  </tr>
+  <tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+  <tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+  <tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+</table>
+
+<table id="pass5">
+  <tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+  <tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+  <tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+  <tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
+</table>
+
 <table id="fail1">
   <tr> <th>AXE</th> <th>AXE</th> <th>AXE</th> <td>aXe</td> </tr>
   <tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>

test/integration/rules/td-has-header/td-has-header.json

@@ -2,5 +2,11 @@
 	"description": "td-has-header test",
 	"rule": "td-has-header",
 	"violations": [["#fail1"], ["#fail2"]],
-	"passes": [["#pass1"], ["#pass2"], ["#pass3"]]
+	"passes": [
+    ["#pass1"],
+    ["#pass2"],
+    ["#pass3"],
+    ["#pass4"],
+    ["#pass5"]
+  ]
 }