fix

dequelabs · Mar 16, 2020 · 5197b54 · 5197b54
1 parent 4c94962
commit 5197b54
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/lib/commons/table/get-headers.js b/lib/commons/table/get-headers.js
@@ -58,7 +58,13 @@ function traverseForHeaders(headerType, position, tableGrid) {
  */
 table.getHeaders = function(cell, tableGrid) {
 	if (cell.getAttribute('headers')) {
-		return commons.dom.idrefs(cell, 'headers');
+		const headers = commons.dom.idrefs(cell, 'headers');
+
+		// testing has shown that if the headers attribute is incorrect the browser
+		// will default to the table row/column headers
+		if (headers.filter(header => header).length) {
+			return headers;
+		}
 	}
 	if (!tableGrid) {
 		tableGrid = commons.table.toGrid(commons.dom.findUp(cell, 'table'));

diff --git a/test/checks/tables/td-has-header.js b/test/checks/tables/td-has-header.js
@@ -171,7 +171,7 @@ describe('td-has-header', function() {
 		assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
 	});
 
-	it('should return false if the headers element refers to non-existing elements', function() {
+	it('should return true if the headers element refers to non-existing elements', function() {
 		fixture.innerHTML =
 			'<table>' +
 			'  <tr> <th>Hello</th> <td headers="beatles">goodbye</td> </tr>' +
@@ -180,7 +180,7 @@ describe('td-has-header', function() {
 		axe.testUtils.flatTreeSetup(fixture);
 		var node = fixture.querySelector('table');
 
-		assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
+		assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
 	});
 
 	it('should return false if all headers are empty', function() {

diff --git a/test/commons/table/get-headers.js b/test/commons/table/get-headers.js
@@ -147,6 +147,25 @@ describe('table.getHeaders', function() {
 		assert.deepEqual(axe.commons.table.getHeaders(target), [$id('t1')]);
 	});
 
+	it('should handle non-existent headers attribute', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<tr>' +
+			'<th scope="col" id="t1">Projects</th>' +
+			'<th scope="col" id="t2">Progress</th>' +
+			'</tr>' +
+			'<tr>' +
+			'<td headers="non-existent" id="target">My Project</td>' +
+			'<td>15%</td>' +
+			'</tr>' +
+			'</table>';
+
+		var target = $id('target');
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		assert.deepEqual(axe.commons.table.getHeaders(target), [$id('t1')]);
+	});
+
 	it('should work with tables that have inconsistent columns', function() {
 		fixture.innerHTML =
 			'<table>' +