fix(color-contrast-matches): don't check aria-disabled explicit label…

… element (#1741)

* fix(color-contrast-matches): don't check aria-disabled explicit label element

* typo

lib/rules/color-contrast-matches.js

@@ -1,7 +1,7 @@
 /* global document */
 
-var nodeName = node.nodeName.toUpperCase(),
-	nodeType = node.type;
+const nodeName = node.nodeName.toUpperCase();
+const nodeType = node.type;
 
 if (
 	node.getAttribute('aria-disabled') === 'true' ||
@@ -45,25 +45,35 @@ if (
 }
 
 // check if the element is a label or label descendant for a disabled control
-var nodeParentLabel = axe.commons.dom.findUpVirtual(virtualNode, 'label');
+const nodeParentLabel = axe.commons.dom.findUpVirtual(virtualNode, 'label');
 if (nodeName === 'LABEL' || nodeParentLabel) {
-	var relevantNode = node;
-	var relevantVirtualNode = virtualNode;
+	let relevantNode = node;
+	let relevantVirtualNode = virtualNode;
 
 	if (nodeParentLabel) {
 		relevantNode = nodeParentLabel;
 		// we need an input candidate from a parent to account for label children
 		relevantVirtualNode = axe.utils.getNodeFromTree(nodeParentLabel);
 	}
 	// explicit label of disabled input
-	let doc = axe.commons.dom.getRootNode(relevantNode);
-	var candidate =
+	const doc = axe.commons.dom.getRootNode(relevantNode);
+	let candidate =
 		relevantNode.htmlFor && doc.getElementById(relevantNode.htmlFor);
-	if (candidate && candidate.disabled) {
+	const candidateVirtualNode = axe.utils.getNodeFromTree(candidate);
+
+	if (
+		candidate &&
+		(candidate.disabled ||
+			candidate.getAttribute('aria-disabled') === 'true' ||
+			axe.commons.dom.findUpVirtual(
+				candidateVirtualNode,
+				'[aria-disabled="true"]'
+			))
+	) {
 		return false;
 	}
 
-	var candidate = axe.utils.querySelectorAll(
+	candidate = axe.utils.querySelectorAll(
 		relevantVirtualNode,
 		'input:not([type="hidden"]):not([type="image"])' +
 			':not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea'
@@ -76,8 +86,8 @@ if (nodeName === 'LABEL' || nodeParentLabel) {
 // label of disabled control associated w/ aria-labelledby
 if (node.getAttribute('id')) {
 	const id = axe.utils.escapeSelector(node.getAttribute('id'));
-	let doc = axe.commons.dom.getRootNode(node);
-	var candidate = doc.querySelector('[aria-labelledby~=' + id + ']');
+	const doc = axe.commons.dom.getRootNode(node);
+	const candidate = doc.querySelector('[aria-labelledby~=' + id + ']');
 	if (candidate && candidate.disabled) {
 		return false;
 	}
@@ -87,11 +97,11 @@ if (axe.commons.text.visibleVirtual(virtualNode, false, true) === '') {
 	return false;
 }
 
-var range = document.createRange(),
-	childNodes = virtualNode.children,
-	length = childNodes.length,
-	child,
-	index;
+const range = document.createRange();
+const childNodes = virtualNode.children;
+let length = childNodes.length;
+let child = null;
+let index = 0;
 
 for (index = 0; index < length; index++) {
 	child = childNodes[index];
@@ -104,7 +114,7 @@ for (index = 0; index < length; index++) {
 	}
 }
 
-var rects = range.getClientRects();
+const rects = range.getClientRects();
 length = rects.length;
 
 for (index = 0; index < length; index++) {

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

@@ -238,6 +238,22 @@ describe('color-contrast-matches', function() {
 		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
 	});
 
+	it("should not match an aria-disabled input's label - explicit label", function() {
+		fixture.innerHTML =
+			'<label for="t1">Test</label><input type="text" id="t1" aria-disabled="true">';
+		var target = fixture.querySelector('label');
+		axe.testUtils.flatTreeSetup(fixture);
+		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+	});
+
+	it("should not match a parent aria-disabled input's label - explicit label", function() {
+		fixture.innerHTML =
+			'<label for="t1">Test</label><div aria-disabled="true"><input type="text" id="t1"></div>';
+		var target = fixture.querySelector('label');
+		axe.testUtils.flatTreeSetup(fixture);
+		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+	});
+
 	it("should not match a disabled input's label - implicit label (input)", function() {
 		fixture.innerHTML = '<label>Test<input type="text" disabled></label>';
 		var target = fixture.querySelector('label');