fix(explicit-label): work with multiple labels (#2573)

dequelabs · Oct 21, 2020 · d26f106 · d26f106
1 parent 5000aa6
commit d26f106
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/lib/checks/label/explicit-evaluate.js b/lib/checks/label/explicit-evaluate.js
@@ -7,15 +7,17 @@ function explicitEvaluate(node, options, virtualNode) {
 		if (virtualNode.attr('id')) {
 			const root = getRootNode(virtualNode.actualNode);
 			const id = escapeSelector(virtualNode.attr('id'));
-			const label = root.querySelector(`label[for="${id}"]`);
+			const labels = Array.from(root.querySelectorAll(`label[for="${id}"]`));
 
-			if (label) {
-				// defer to hidden-explicit-label check for better messaging
-				if (!isVisible(label)) {
-					return true;
-				} else {
-					return !!accessibleText(label);
-				}
+			if (labels.length) {
+				return labels.some(label => {
+					// defer to hidden-explicit-label check for better messaging
+					if (!isVisible(label)) {
+						return true;
+					} else {
+						return !!accessibleText(label);
+					}
+				});
 			}
 		}
 		return false;

diff --git a/test/checks/label/explicit.js b/test/checks/label/explicit.js
@@ -44,6 +44,15 @@ describe('explicit-label', function() {
 		);
 	});
 
+	it('should work for multiple labels', function() {
+		var vNode = queryFixture(
+			'<label for="target"></label><label for="target">Text</label><input type="text" id="target">'
+		);
+		assert.isTrue(
+			axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+		);
+	});
+
 	(shadowSupport.v1 ? it : xit)(
 		'should return true if input and label are in the same shadow root',
 		function() {