Skip to content

Commit

Permalink
fix: Have table rules use shadow DOM
Browse files Browse the repository at this point in the history
  • Loading branch information
@WilcoFiers
WilcoFiers committed Jul 6, 2017
1 parent 70985b0 commit 453be1b
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 0 deletions.
3 changes: 3 additions & 0 deletions lib/commons/aria/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
*/
aria.label = function (node) {
var ref, candidate;
if (node.actualNode instanceof Node === false) {
node = axe.utils.getNodeFromTree(axe._tree[0], node);
}

if (node.actualNode.getAttribute('aria-labelledby')) {
// aria-labelledby
Expand Down
3 changes: 3 additions & 0 deletions lib/commons/dom/has-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
* @return boolean
*/
dom.hasContent = function hasContent(elm) {
if (elm.actualNode instanceof Node === false) {
elm = axe.utils.getNodeFromTree(axe._tree[0], elm);
}
if (
elm.actualNode.textContent.trim() ||
aria.label(elm)
Expand Down
14 changes: 14 additions & 0 deletions test/checks/tables/td-has-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('td-has-header', function () {
fixture.innerHTML = '';
checkContext._relatedNodes = [];
checkContext._data = null;
axe._tree = null;
});

it('should not be fooled by rowspan and colspan', function () {
Expand Down Expand Up @@ -44,6 +45,7 @@ describe('td-has-header', function () {
' </tr>' +
' </tbody>' +
'</table>';
axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
var result = checks['td-has-header'].evaluate.call(checkContext, node);

Expand All @@ -57,6 +59,7 @@ describe('td-has-header', function () {
' <tr> <th>hi</th> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -68,6 +71,7 @@ describe('td-has-header', function () {
' <tr> <td>hi</td> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -79,6 +83,7 @@ describe('td-has-header', function () {
' <tr> <td aria-label="one">hi</td> <td aria-label="two">hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -90,6 +95,7 @@ describe('td-has-header', function () {
' <tr> <td aria-labelledby="one">hi</td> <td aria-labelledby="two">hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -102,6 +108,7 @@ describe('td-has-header', function () {
' <tr> <td headers="one">hi</td> <td headers="two">hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -113,6 +120,7 @@ describe('td-has-header', function () {
' <tr> <th></th> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -123,6 +131,7 @@ describe('td-has-header', function () {
' <tr> <td></td> <td></td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand All @@ -133,6 +142,7 @@ describe('td-has-header', function () {
' <tr> <td>hi</td> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');

assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
Expand All @@ -148,6 +158,7 @@ describe('td-has-header', function () {
' <tr> <td>hi</td> <td>hello</td> <td>Ok</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');

assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
Expand All @@ -162,6 +173,7 @@ describe('td-has-header', function () {
' <tr> <th>Hello</th> <td headers="">goodbye</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');

assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
Expand All @@ -174,6 +186,7 @@ describe('td-has-header', function () {
' <tr> <th>Hello</th> <td headers="beatles">goodbye</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');

assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
Expand All @@ -186,6 +199,7 @@ describe('td-has-header', function () {
' <tr> <td>hi</td> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isFalse(checks['td-has-header'].evaluate.call(checkContext, node));
});
Expand Down
9 changes: 9 additions & 0 deletions test/checks/tables/th-has-data-cells.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ describe('th-has-data-cells', function () {
' <tr> <th>hi</th> <td>hello</td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -37,6 +38,7 @@ describe('th-has-data-cells', function () {
' <tr> <td>hi</td> <td>hello</td></tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -48,6 +50,7 @@ describe('th-has-data-cells', function () {
' <tr> <th id="a">H</th> <th id="b">H</th> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -59,6 +62,7 @@ describe('th-has-data-cells', function () {
' <tr> <th id="a">H</th> <th id="b">H</th> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -69,6 +73,7 @@ describe('th-has-data-cells', function () {
' <tr> <th></th> <th></th> </tr>' +
' <tr> <th></th> <th></th> </tr>' +
'</table>';
axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -85,6 +90,7 @@ describe('th-has-data-cells', function () {
' <tr> <th>hi</th> <td><span role="img"></span></td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isTrue(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -96,6 +102,7 @@ describe('th-has-data-cells', function () {
' <tr> <th>hi</th> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isUndefined(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -107,6 +114,7 @@ describe('th-has-data-cells', function () {
' <tr> <th>hi</th> <td></td> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isUndefined(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand All @@ -117,6 +125,7 @@ describe('th-has-data-cells', function () {
' <tr> <td>aXe</td> <td role="columnheader">AXE</th> </tr>' +
'</table>';

axe._tree = axe.utils.getFlattenedTree(fixture);
var node = fixture.querySelector('table');
assert.isUndefined(checks['th-has-data-cells'].evaluate.call(checkContext, node));
});
Expand Down
17 changes: 17 additions & 0 deletions test/commons/aria/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@ describe('aria.label', function() {
axe._tree = undefined;
});

it('accepts DOM Nodes and virtual nodes', function () {
it('should join text with a single space', function() {
fixture.innerHTML = '<div id="monkeys">monkeys</div><div id="bananas">bananas</div>' +
'<input id="target" aria-labelledby="monkeys bananas">';
var tree = axe._tree = axe.utils.getFlattenedTree(document.body);

// Virtual node
assert.equal(axe.commons.text.label(
axe.utils.querySelectorAll(tree, '#target')[0]
), 'monkeys bananas');
// DOM Node
assert.equal(axe.commons.text.label(
fixture.querySelector('#target')
), 'monkeys bananas');
});
});

describe('aria-labelledby', function() {
it('should join text with a single space', function() {
fixture.innerHTML = '<div id="monkeys">monkeys</div><div id="bananas">bananas</div>' +
Expand Down
15 changes: 15 additions & 0 deletions test/commons/dom/has-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,19 @@ describe('dom.hasContent', function () {
hasContent(axe.utils.querySelectorAll(tree, '#target')[0])
);
});

it('accepts DOM Nodes and virtual nodes', function () {
fixture.innerHTML = '<div id="target"> text </div>';
axe._tree = axe.utils.getFlattenedTree(fixture);

// Virtual node
assert.isTrue(
hasContent(axe.utils.querySelectorAll(axe._tree, '#target')[0])
);
// DOM node
assert.isTrue(
hasContent(fixture.querySelector('#target'))
);
axe._tree = null;
});
});

0 comments on commit 453be1b

Please sign in to comment.