diff --git a/lib/commons/table/get-headers.js b/lib/commons/table/get-headers.js
index 60bbeb7d7c..927be785e3 100644
--- 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
index 7342923448..3a0b1e463c 100644
--- 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 =
+ '
' +
+ '' +
+ '' +
+ 'Product | ' +
+ 'Amount | ' +
+ 'Price | ' +
+ '
' +
+ '' +
+ '' +
+ 'No available products to display |
' +
+ '' +
+ '
';
+
+ 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 =
+ '' +
+ '' +
+ '' +
+ ' | Projects | Foo | ' +
+ '
' +
+ ' | Projects |
' +
+ ' | Projects |
' +
+ '' +
+ '
';
+
+ 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 =
+ '' +
+ '' +
+ '' +
+ 'Product | ' +
+ 'Amount | ' +
+ 'Price | ' +
+ '
' +
+ '' +
+ '' +
+ 'No available products to display |
' +
+ '' +
+ '
';
+
+ 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 =
+ '' +
+ '' +
+ '' +
+ ' | Projects | Foo | ' +
+ '
' +
+ ' | Projects |
' +
+ ' | Projects |
' +
+ '' +
+ '
';
+
+ var target = $id('target');
+
+ axe.testUtils.flatTreeSetup(fixture.firstChild);
+ assert.deepEqual(axe.commons.table.getHeaders(target), [$id('t1')]);
+ });
});