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.

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

feat(duplicate-id): Add shadow DOM support #452

Merged
merged 3 commits into from
Aug 2, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
24 changes: 10 additions & 14 deletions lib/checks/shared/duplicate-id.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
const id = node.getAttribute('id').trim();
// Since empty ID's are not meaningful and are ignored by Edge, we'll
// let those pass.
if (!node.getAttribute('id').trim()) {
if (!id) {
return true;
}
const root = axe.commons.dom.getRootNode(node);
const matchingNodes = Array.from(root.querySelectorAll(
`[id="${ axe.commons.utils.escapeSelector(id) }"]`
)).filter(foundNode => foundNode !== node);

const id = axe.commons.utils.escapeSelector(node.getAttribute('id'));
var matchingNodes = document.querySelectorAll(`[id="${id}"]`);
var related = [];

for (var i = 0; i < matchingNodes.length; i++) {
if (matchingNodes[i] !== node) {
related.push(matchingNodes[i]);
}
}
if (related.length) {
this.relatedNodes(related);
if (matchingNodes.length) {
this.relatedNodes(matchingNodes);
}
this.data(node.getAttribute('id'));
this.data(id);

return (matchingNodes.length <= 1);
return (matchingNodes.length === 0);
54 changes: 51 additions & 3 deletions test/checks/shared/duplicate-id.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ describe('duplicate-id', function () {
'use strict';

var fixture = document.getElementById('fixture');

var shadowSupport = axe.testUtils.shadowSupport;

var checkContext = {
_relatedNodes: [],
Expand All @@ -27,7 +27,6 @@ describe('duplicate-id', function () {
assert.isTrue(checks['duplicate-id'].evaluate.call(checkContext, node));
assert.equal(checkContext._data, node.id);
assert.deepEqual(checkContext._relatedNodes, []);

});

it('should return false if there are multiple elements with an ID', function () {
Expand All @@ -39,7 +38,8 @@ describe('duplicate-id', function () {
});

it('should return remove duplicates', function () {
assert.deepEqual(checks['duplicate-id'].after([{data: 'a'}, {data: 'b'}, {data: 'b'}]), [{data: 'a'}, {data: 'b'}]);
assert.deepEqual(checks['duplicate-id'].after([
{data: 'a'}, {data: 'b'}, {data: 'b'}]), [{data: 'a'}, {data: 'b'}]);
});

it('should ignore empty ids', function () {
Expand All @@ -58,4 +58,52 @@ describe('duplicate-id', function () {
assert.isTrue(checks['duplicate-id'].evaluate.call(checkContext, node));
});

(shadowSupport.v1 ? it : xit)('should find duplicate IDs in the same shadow DOM', function () {
var div = document.createElement('div');
div.id = 'target';
var shadow = div.attachShadow({ mode: 'open' });
shadow.innerHTML = '<span id="target"></span><p id="target">text</p>';
var node = shadow.querySelector('span');
fixture.appendChild(div);

assert.isFalse(checks['duplicate-id'].evaluate.call(checkContext, node));
assert.lengthOf(checkContext._relatedNodes, 1);
assert.deepEqual(checkContext._relatedNodes, [shadow.querySelector('p')]);
});

(shadowSupport.v1 ? it : xit)('should ignore duplicate IDs if they are in different document roots', function () {
var node = document.createElement('div');
node.id = 'target';
var shadow = node.attachShadow({ mode: 'open' });
shadow.innerHTML = '<span id="target"></span>';
fixture.appendChild(node);

assert.isTrue(checks['duplicate-id'].evaluate.call(checkContext, node));
assert.lengthOf(checkContext._relatedNodes, 0);
});

(shadowSupport.v1 ? it : xit)('should ignore same IDs outside shadow trees', function () {
var div = document.createElement('div');
div.id = 'target';
var shadow = div.attachShadow({ mode: 'open' });
shadow.innerHTML = '<span id="target"></span>';
var node = shadow.querySelector('#target');
fixture.appendChild(div);

assert.isTrue(checks['duplicate-id'].evaluate.call(checkContext, node));
assert.lengthOf(checkContext._relatedNodes, 0);
});

(shadowSupport.v1 ? it : xit)('should compare slotted content with the light DOM', function () {
var node = document.createElement('div');
node.id = 'target';
node.innerHTML = '<p id="target">text</p>';
var shadow = node.attachShadow({ mode: 'open' });
shadow.innerHTML = '<span id="target"><slot></slot></span>';
fixture.appendChild(node);

assert.isFalse(checks['duplicate-id'].evaluate.call(checkContext, node));
assert.lengthOf(checkContext._relatedNodes, 1);
assert.deepEqual(checkContext._relatedNodes, [node.querySelector('p')]);
Copy link
Contributor

@marcysutton marcysutton Jul 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The result of this looks like it is being ignored–there are 3 ids of target, and the result doesn't seem to include anything about the one inside the Shadow DOM. To me it seems like it should be ignored, but I wasn't sure how the <slot> came into it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDs are scoped to their respective root. In this example, the div and p both have document as the root, and so p is the duplicate in this example. But because span is in the shadow tree, it can have an ID that already exists in the document (or even in another shadow tree).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the description of the test is just confusing? it should not ignore slotted elements

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the description of the test because it describes what is actually happening i.e. that the slotted content (light DOM) is being compared with the light DOM and not the shadow DOM it is slotted into. You could slightly clarify it by saying

Compare slotted content with the light DOM

});
});