Merge pull request #2095 from dequelabs/tdHasHeaders

fix(td-has-headers): don't fail for empty headers attribute
dequelabs · Mar 18, 2020 · 7952a37 · 7952a37
2 parents b66f5b3 + 5197b54
commit 7952a37
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/lib/commons/table/get-headers.js b/lib/commons/table/get-headers.js
@@ -57,8 +57,14 @@ function traverseForHeaders(headerType, position, tableGrid) {
  * @return {Array<HTMLTableCellElement>} Array of headers associated to the table cell
  */
 table.getHeaders = function(cell, tableGrid) {
-	if (cell.hasAttribute('headers')) {
-		return commons.dom.idrefs(cell, 'headers');
+	if (cell.getAttribute('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
@@ -159,7 +159,7 @@ describe('td-has-header', function() {
 		]);
 	});
 
-	it('should return false if the headers element is empty', function() {
+	it('should return true if the headers element is empty', function() {
 		fixture.innerHTML =
 			'<table>' +
 			'  <tr> <th>Hello</th> <td headers="">goodbye</td> </tr>' +
@@ -168,10 +168,10 @@ 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 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
@@ -128,6 +128,44 @@ describe('table.getHeaders', function() {
 		]);
 	});
 
+	it('should handle empty 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="" 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 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>' +