fix(get-headers): fix for rowspan and colspan (#2545)

* fix(get-headers): fix for rowspan and colspan * fix for invalid row/colspan values
dequelabs · Oct 15, 2020 · 3f02d14 · 3f02d14
1 parent 1be4354
commit 3f02d14
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 2 deletions.
diff --git a/lib/commons/table/get-headers.js b/lib/commons/table/get-headers.js
@@ -15,13 +15,23 @@ import findUp from '../dom/find-up';
 function traverseForHeaders(headerType, position, tableGrid) {
 	const property = headerType === 'row' ? '_rowHeaders' : '_colHeaders';
 	const predicate = headerType === 'row' ? isRowHeader : isColumnHeader;
+	const startCell = tableGrid[position.y][position.x];
+
+	// adjust position by rowspan and colspan
+	// subtract 1 from col/rowspan to make them 0 indexed
+	const colspan = startCell.colSpan - 1;
+	const rowspan = startCell.rowSpan - 1;
+
+	const rowStart = position.y + rowspan;
+	const colStart = position.x + colspan;
+
 	const rowEnd = headerType === 'row' ? position.y : 0;
 	const colEnd = headerType === 'row' ? 0 : position.x;
 
 	let headers;
 	const cells = [];
-	for (let row = position.y; row >= rowEnd && !headers; row--) {
-		for (let col = position.x; col >= colEnd; col--) {
+	for (let row = rowStart; row >= rowEnd && !headers; row--) {
+		for (let col = colStart; col >= colEnd; col--) {
 			const cell = tableGrid[row] ? tableGrid[row][col] : undefined;
 
 			if (!cell) {

diff --git a/test/commons/table/get-headers.js b/test/commons/table/get-headers.js
@@ -174,4 +174,88 @@ describe('table.getHeaders', function() {
 		axe.testUtils.flatTreeSetup(fixture.firstChild);
 		assert.deepEqual(axe.commons.table.getHeaders(target), []);
 	});
+
+	it('should handle multiple headers with colspan', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<thead>' +
+			'<tr>' +
+			'<th id="t1">Product</th>' +
+			'<th id="t2">Amount</th>' +
+			'<th id="t3">Price</th>' +
+			'</tr>' +
+			'</thead>' +
+			'<tbody>' +
+			'<tr><td colspan="2" id="target">No available products to display</td></tr>' +
+			'</thead>' +
+			'</table>';
+
+		var target = $id('target');
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		assert.deepEqual(axe.commons.table.getHeaders(target), [
+			$id('t1'),
+			$id('t2')
+		]);
+	});
+
+	it('should handle multiple headers with rowspan', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<tbody>' +
+			'<tr>' +
+			'<th id="t1"><td>Projects</td><td rowspan="2" id="target">Foo</td>' +
+			'</tr>' +
+			'<tr><th id="t2"><td>Projects</td></tr>' +
+			'<tr><th id="t3"><td>Projects</td></tr>' +
+			'</thead>' +
+			'</table>';
+
+		var target = $id('target');
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		assert.deepEqual(axe.commons.table.getHeaders(target), [
+			$id('t1'),
+			$id('t2')
+		]);
+	});
+
+	it('should handle negative colspan', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<thead>' +
+			'<tr>' +
+			'<th id="t1">Product</th>' +
+			'<th id="t2">Amount</th>' +
+			'<th id="t3">Price</th>' +
+			'</tr>' +
+			'</thead>' +
+			'<tbody>' +
+			'<tr><td colspan="-3" id="target">No available products to display</td></tr>' +
+			'</thead>' +
+			'</table>';
+
+		var target = $id('target');
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		assert.deepEqual(axe.commons.table.getHeaders(target), [$id('t1')]);
+	});
+
+	it('should handle negative rowspan', function() {
+		fixture.innerHTML =
+			'<table>' +
+			'<tbody>' +
+			'<tr>' +
+			'<th id="t1"><td>Projects</td><td rowspan="-3" id="target">Foo</td>' +
+			'</tr>' +
+			'<tr><th id="t2"><td>Projects</td></tr>' +
+			'<tr><th id="t3"><td>Projects</td></tr>' +
+			'</thead>' +
+			'</table>';
+
+		var target = $id('target');
+
+		axe.testUtils.flatTreeSetup(fixture.firstChild);
+		assert.deepEqual(axe.commons.table.getHeaders(target), [$id('t1')]);
+	});
 });