Skip to content

Commit

Permalink
fix: td-has-heading to ignore td with its role changed
Browse files Browse the repository at this point in the history
  • Loading branch information
WilcoFiers committed May 28, 2018
1 parent a343771 commit de656ee
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 7 deletions.
7 changes: 3 additions & 4 deletions lib/checks/tables/td-has-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ cells.forEach((cell) => {
!axe.commons.aria.label(cell)
) {
// Check if it has any headers
var hasHeaders = tableUtils.getHeaders(cell);
hasHeaders = hasHeaders.reduce(function (hasHeaders, header) {
return (hasHeaders || header !== null && !!axe.commons.dom.hasContent(header));
}, false);
const hasHeaders = tableUtils.getHeaders(cell).some(header => {
return header !== null && !!axe.commons.dom.hasContent(header);
});

// If no headers, put it on the naughty list
if (!hasHeaders) {
Expand Down
7 changes: 6 additions & 1 deletion lib/commons/table/is-data-cell.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,10 @@ table.isDataCell = function (cell) {
if (!cell.children.length && !cell.textContent.trim()) {
return false;
}
return cell.nodeName.toUpperCase() === 'TD';
const role = cell.getAttribute('role');
if (axe.commons.aria.isValidRole(role)) {
return ['cell', 'gridcell'].includes(role);
} else {
return cell.nodeName.toUpperCase() === 'TD';
}
};
38 changes: 38 additions & 0 deletions test/commons/table/is-data-cell.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,42 @@ describe('table.isDataCell', function () {
assert.isFalse(axe.commons.table.isDataCell(target));
});

it('should ignore TDs with a valid role other than (grid)cell', function () {
fixture.innerHTML = '<table>' +
'<tr><td id="target1" role="columnheader">heading</td></tr>' +
'<tr><td id="target2" role="rowheader">heading</td></tr>' +
'<tr><td id="target3" role="presentation">heading</td></tr>' +
'</table>';

var target1 = $id('target1');
var target2 = $id('target2');
var target3 = $id('target3');
assert.isFalse(axe.commons.table.isDataCell(target1));
assert.isFalse(axe.commons.table.isDataCell(target2));
assert.isFalse(axe.commons.table.isDataCell(target3));
});

it('should return true for elements with role="(grid)cell"', function () {
fixture.innerHTML = '<table>' +
'<tr><th id="target1" role="cell">heading</th></tr>' +
'<tr><th id="target2" role="gridcell">heading</th></tr>' +
'</table>';

var target1 = $id('target1');
var target2 = $id('target2');
assert.isTrue(axe.commons.table.isDataCell(target1));
assert.isTrue(axe.commons.table.isDataCell(target2));
});

it('should ignore invalid roles', function () {
fixture.innerHTML = '<table>' +
'<tr><td id="target1" role="foobar">heading</td></tr>' +
'<tr><th id="target2" role="foobar">heading</th></tr>' +
'</table>';

var target1 = $id('target1');
var target2 = $id('target2');
assert.isTrue(axe.commons.table.isDataCell(target1));
assert.isFalse(axe.commons.table.isDataCell(target2));
});
});
20 changes: 19 additions & 1 deletion test/integration/rules/td-has-header/td-has-header.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,32 @@
<tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
</table>

</table>
<table id="pass3">
<tr> <th>AXE</th> <th>AXE</th> <th>AXE</th> <th>AXE</th> </tr>
<tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <th>AXE</th> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
</table>

<table id="pass4">
<tr>
<td role="columnheader">AXE</td>
<td role="columnheader">AXE</td>
<td role="columnheader">AXE</td>
<td role="columnheader">AXE</td>
</tr>
<tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
</table>

<table id="pass5">
<tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
<tr> <td role="rowheader">AXE</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
</table>

<table id="fail1">
<tr> <th>AXE</th> <th>AXE</th> <th>AXE</th> <td>aXe</td> </tr>
<tr> <td>aXe</td> <td>aXe</td> <td>aXe</td> <td>aXe</td> </tr>
Expand Down
8 changes: 7 additions & 1 deletion test/integration/rules/td-has-header/td-has-header.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,11 @@
"description": "td-has-header test",
"rule": "td-has-header",
"violations": [["#fail1"], ["#fail2"]],
"passes": [["#pass1"], ["#pass2"], ["#pass3"]]
"passes": [
["#pass1"],
["#pass2"],
["#pass3"],
["#pass4"],
["#pass5"]
]
}

0 comments on commit de656ee

Please sign in to comment.