Merge pull request #2094 from dequelabs/thHasCells

fix(th-has-data-cells): fail when data cell points to a different header
dequelabs · Mar 12, 2020 · d3bd416 · d3bd416
2 parents c3a7de2 + 2d420c3
commit d3bd416
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/lib/checks/tables/th-has-data-cells.js b/lib/checks/tables/th-has-data-cells.js
@@ -40,19 +40,29 @@ headers.forEach(header => {
 
 	const pos = tableUtils.getCellPosition(header, tableGrid);
 
-	// ensure column header has at least 1 non-header cell
+	// ensure column header has at least 1 non-header cell and that the cell is
+	// not pointing to a different header
 	let hasCell = false;
 	if (tableUtils.isColumnHeader(header)) {
 		hasCell = tableUtils
 			.traverse('down', pos, tableGrid)
-			.find(cell => !tableUtils.isColumnHeader(cell));
+			.find(
+				cell =>
+					!tableUtils.isColumnHeader(cell) &&
+					tableUtils.getHeaders(cell, tableGrid).includes(header)
+			);
 	}
 
-	// ensure row header has at least 1 non-header cell
+	// ensure row header has at least 1 non-header cell and that the cell is not
+	// pointing to a different header
 	if (!hasCell && tableUtils.isRowHeader(header)) {
 		hasCell = tableUtils
 			.traverse('right', pos, tableGrid)
-			.find(cell => !tableUtils.isRowHeader(cell));
+			.find(
+				cell =>
+					!tableUtils.isRowHeader(cell) &&
+					tableUtils.getHeaders(cell, tableGrid).includes(header)
+			);
 	}
 
 	// report the node as having failed

diff --git a/test/checks/tables/th-has-data-cells.js b/test/checks/tables/th-has-data-cells.js
@@ -139,6 +139,26 @@ describe('th-has-data-cells', function() {
 		);
 	});
 
+	it('should return undefined if table cell points to a different header', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<tr>' +
+			'<th id="col1">Column 1</th>' +
+			'<th id="Column2">Column 2</th>' +
+			'</tr>' +
+			'<tr>' +
+			'<td></td>' +
+			'<td headers="col1"></td>' +
+			'</tr>' +
+			'</table>';
+
+		axe.testUtils.flatTreeSetup(fixture);
+		var node = fixture.querySelector('table');
+		assert.isUndefined(
+			checks['th-has-data-cells'].evaluate.call(checkContext, node)
+		);
+	});
+
 	(shadowSupport ? it : xit)('recognizes shadow tree content', function() {
 		fixture.innerHTML = '<div id="shadow"> <b>data</b> </div>';
 		var shadow = fixture