Shadow DOM support for color contrast matches #413

marcysutton · 2017-07-07T22:44:06Z

This PR builds on #404 to pull in some of the commons already in use.

Closes #393.

dylanb

@marcysutton There are a bunch of changes that need to be made in lib/rules/color-contrast-matches.js to get it to support shadow DOM correctly.

When finding the appropriate document object to use for idref lookups, you need to use axe.commons.dom.getRootNode(node). So for example before line 43, you need to call getRootNode to get the document for the relevantNode so the idref dereferences correctly.
On line 50, where the code is looking for a wrapped input element, we need to use the axe.utils.querySelectorAll() function on the virtual node of the element.
On line 58, need to use getRootNode for the correct lookup
On line 69, we need to use the virtualNode.children array instead of node.childNodes and then in the for loop, make sure we are looking at the actualNode for each virtual child node.
Finally, we need some tests that test all of these conditions

marcysutton · 2017-07-11T21:04:35Z

@dylanb I've completed the changes and added some more tests. Ready for another review.

dylanb · 2017-07-11T22:11:06Z

lib/rules/color-contrast-matches.js

@@ -2,7 +2,7 @@

 var nodeName = node.nodeName.toUpperCase(),
 	nodeType = node.type,
-	doc = document;
+	doc = axe.commons.dom.getRootNode(node);


on line 40, the relevantNode can change and therefore the doc might change too for the lookup on line 43. I think this code should be moved to where the doc is actually being used

dylanb · 2017-07-11T22:14:33Z

test/rule-matches/color-contrast-matches.js

+			var shadowRoot = document.getElementById('parent').attachShadow({ mode: 'open' });
+			shadowRoot.innerHTML = '<div id="shadowParent">' +
+					'<label for="input" id="shadowLabel">Label' +


This is another explicit label

dylanb · 2017-07-11T22:16:09Z

test/rule-matches/color-contrast-matches.js

+		});
+
+		it('should look at the children of a virtual node for overlap', function () {


Shouldn't this test be one that overlaps and therefore returns false?

Doesn't the default CSS overlap since the text node is a child?

Also that conditional returns true–I thought it was checking to see if there was overlapping content worth evaluating.

dylanb · 2017-07-11T22:19:14Z

test/rule-matches/color-contrast-matches.js

+			assert.isTrue(rule.matches(firstChild, axe.utils.getNodeFromTree(tree[0], firstChild)));
+		});
+	}


I think we should add a test where the implicit label is in the light DOM and the input in the shadow DOM

fixture.innerHTML = '<label>Text<div id="firstChild"></div></label>' ... shadowRoot.innerHTML = '<input id="shadowTarget" type="text" />' ...

Test added.

actually, I was thinking of the disabled case where the input that is inside the shadow DOM is disabled and it gets excluded from the color contrast check - apologies for not being clear enough.

The approach I took with other tests was to put a second, enabled input in the light DOM with the same ID and an explicit pairing with the label–that way it would return true if the shadow boundary wasn't being handled properly. Otherwise it's difficult to test the isFalse case by itself since that would mean it didn't get matched (and could have occurred for any number of reasons). The problem with this one is the <label> is already in the light DOM, so it would get paired with the first input. for/id pairings also don't span shadow boundaries, because of scoping. So I'll find a different way to write this test.

dylanb · 2017-07-11T22:20:38Z

lib/rules/color-contrast-matches.js

@@ -40,41 +39,43 @@ if (nodeName === 'LABEL' || nodeParentLabel) {
 		relevantNode = nodeParentLabel;
 	}
 	// explicit label of disabled input
+	var doc = axe.commons.dom.getRootNode(node);


should be var doc = axe.commons.dom.getRootNode(relevantNode);

Also, probably use let to block scope it

marcysutton · 2017-07-13T17:02:21Z

@dylanb I've incorporated those two test changes, it's ready for another review.

marcysutton requested review from WilcoFiers and dylanb July 7, 2017 22:44

dylanb requested changes Jul 11, 2017

View reviewed changes

marcysutton force-pushed the sd/color-contrast-matches branch from 66b1df7 to 6785537 Compare July 11, 2017 21:03

dylanb reviewed Jul 11, 2017

View reviewed changes

marcysutton force-pushed the sd/color-contrast-matches branch from a4294c7 to f1d6a51 Compare July 11, 2017 22:44

Marcy Sutton added 9 commits July 13, 2017 10:01

feat: add SD support to color-contrast-matches

b595b42

chore: tell jshint virtualNode is ok for matches

15a3457

test: add coverage for shadowDOM

a0636a8

chore: add a comment about text nodes in .visible

70f597e

chore: fix indentation

6a5f3f1

fix: complete shadow support for color matches

f0fe551

fix: ensure document is fetched from correct node

b28597c

test: add test for shadow boundary, fix implicit

615170e

test: make input disabled, add slotted example

3a5be92

marcysutton force-pushed the sd/color-contrast-matches branch from f1d6a51 to 3a5be92 Compare July 13, 2017 17:01

dylanb approved these changes Jul 13, 2017

View reviewed changes

dylanb merged commit 3087e90 into shadowDOM Jul 13, 2017

marcysutton deleted the sd/color-contrast-matches branch July 15, 2017 15:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shadow DOM support for color contrast matches #413

Shadow DOM support for color contrast matches #413

marcysutton commented Jul 7, 2017

dylanb left a comment •

edited

Loading

marcysutton commented Jul 11, 2017

dylanb Jul 11, 2017

dylanb Jul 11, 2017

dylanb Jul 11, 2017

marcysutton Jul 11, 2017

marcysutton Jul 11, 2017

dylanb Jul 12, 2017

dylanb Jul 11, 2017

marcysutton Jul 11, 2017

dylanb Jul 12, 2017

marcysutton Jul 12, 2017 •

edited

Loading

dylanb Jul 11, 2017

dylanb Jul 11, 2017

marcysutton commented Jul 13, 2017

		});

		it('should look at the children of a virtual node for overlap', function () {

Shadow DOM support for color contrast matches #413

Shadow DOM support for color contrast matches #413

Conversation

marcysutton commented Jul 7, 2017

dylanb left a comment • edited Loading

Choose a reason for hiding this comment

marcysutton commented Jul 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcysutton Jul 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcysutton commented Jul 13, 2017

dylanb left a comment •

edited

Loading

marcysutton Jul 12, 2017 •

edited

Loading