Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(td-has-headers): don't fail for empty headers attribute #2095

Merged
merged 3 commits into from
Mar 18, 2020
Merged

fix(td-has-headers): don't fail for empty headers attribute #2095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d7cb0f
fix(td-has-headers): don't fail for empty headers attribute
straker Mar 11, 2020
4c94962
fix test
straker Mar 11, 2020
5197b54
fix
straker Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions lib/commons/table/get-headers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
8 changes: 4 additions & 4 deletions test/checks/tables/td-has-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand All @@ -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>' +
Expand All @@ -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() {
Expand Down
38 changes: 38 additions & 0 deletions test/commons/table/get-headers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand Down