Merge pull request #413 from dequelabs/sd/color-contrast-matches

Shadow DOM support for color contrast matches
dequelabs · Jul 13, 2017 · 3087e90 · 3087e90
2 parents 85deffa + 3a5be92
commit 3087e90
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 44 deletions.
diff --git a/lib/commons/text/visible.js b/lib/commons/text/visible.js
@@ -17,7 +17,7 @@ text.visible = function (element, screenReader, noRecursing) {
 	for (index = 0; index < length; index++) {
 		child = childNodes[index];
 
-		if (child.actualNode.nodeType === 3) {
+		if (child.actualNode.nodeType === 3) { // filter on text nodes
 			nodeValue = child.actualNode.nodeValue;
 			if (nodeValue && dom.isVisible(element.actualNode, screenReader)) {
 				result += nodeValue;

diff --git a/lib/rules/.jshintrc b/lib/rules/.jshintrc
@@ -2,6 +2,7 @@
 	"globals": {
 		"results": true,
 		"node": true,
+		"virtualNode": true,
 		"options": true,
 		"axe": true
 	},

diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js
@@ -1,8 +1,7 @@
 /* global document */
 
 var nodeName = node.nodeName.toUpperCase(),
-	nodeType = node.type,
-	doc = document;
+	nodeType = node.type;
 
 if (node.getAttribute('aria-disabled') === 'true' || axe.commons.dom.findUp(node, '[aria-disabled="true"]')) {
 	return false;
@@ -40,41 +39,43 @@ if (nodeName === 'LABEL' || nodeParentLabel) {
 		relevantNode = nodeParentLabel;
 	}
 	// explicit label of disabled input
+	let doc = axe.commons.dom.getRootNode(relevantNode);
 	var candidate = relevantNode.htmlFor && doc.getElementById(relevantNode.htmlFor);
 	if (candidate && candidate.disabled) {
 		return false;
 	}
 
-	var candidate = node.querySelector('input:not([type="hidden"]):not([type="image"])' +
+	var candidate = axe.utils.querySelectorAll(virtualNode, 'input:not([type="hidden"]):not([type="image"])' +
 		':not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea');
-	if (candidate && candidate.disabled) {
+	if (candidate.length && candidate[0].actualNode.disabled) {
 		return false;
 	}
 
 }
 
 // label of disabled control associated w/ aria-labelledby
 if (node.id) {
+	let doc = axe.commons.dom.getRootNode(node);
 	var candidate = doc.querySelector('[aria-labelledby~=' + axe.commons.utils.escapeSelector(node.id) + ']');
 	if (candidate && candidate.disabled) {
 		return false;
 	}
 }
 
-if (axe.commons.text.visible(node, false, true) === '') {
+if (axe.commons.text.visible(virtualNode, false, true) === '') {
 	return false;
 }
 
 var range = document.createRange(),
-	childNodes = node.childNodes,
+	childNodes = virtualNode.children,
 	length = childNodes.length,
 	child, index;
 
 for (index = 0; index < length; index++) {
 	child = childNodes[index];
 
-	if (child.nodeType === 3 && axe.commons.text.sanitize(child.nodeValue) !== '') {
-		range.selectNodeContents(child);
+	if (child.actualNode.nodeType === 3 && axe.commons.text.sanitize(child.actualNode.nodeValue) !== '') {
+		range.selectNodeContents(child.actualNode);
 	}
 }