fix(multiple-label): considers explicit labels in the same shadow tree (

#1584)
dequelabs · May 24, 2019 · b9a324a · b9a324a
1 parent 381cadb
commit b9a324a
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/lib/checks/label/multiple-label.js b/lib/checks/label/multiple-label.js
@@ -1,6 +1,8 @@
 const id = axe.utils.escapeSelector(node.getAttribute('id'));
-let labels = Array.from(document.querySelectorAll(`label[for="${id}"]`));
 let parent = node.parentNode;
+let root = axe.commons.dom.getRootNode(node);
+root = root.documentElement || root;
+let labels = Array.from(root.querySelectorAll(`label[for="${id}"]`));
 
 if (labels.length) {
 	// filter out CSS hidden labels because they're fine

diff --git a/test/checks/label/multiple-label.js b/test/checks/label/multiple-label.js
@@ -2,7 +2,7 @@ describe('multiple-label', function() {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
-
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
 	var checkContext = axe.testUtils.MockCheckContext();
 
 	afterEach(function() {
@@ -176,4 +176,62 @@ describe('multiple-label', function() {
 		var target = fixture.querySelector('#Q');
 		assert.isTrue(checks['multiple-label'].evaluate.call(checkContext, target));
 	});
+
+	(shadowSupported ? it : xit)(
+		'should consider labels in the same document/shadow tree',
+		function() {
+			fixture.innerHTML = '<div id="target"></div>';
+			var target = document.querySelector('#target');
+			var shadowRoot = target.attachShadow({ mode: 'open' });
+			shadowRoot.innerHTML =
+				'<input id="myinput" /><label for="myinput">normal</label>';
+			var shadowTarget = target.shadowRoot;
+			assert.isFalse(
+				checks['multiple-label'].evaluate.call(
+					checkContext,
+					shadowTarget.firstElementChild
+				)
+			);
+		}
+	);
+
+	(shadowSupported ? it : xit)(
+		'should return false for valid multiple labels in the same document/shadow tree',
+		function() {
+			fixture.innerHTML = '<div id="target"></div>';
+			var target = document.querySelector('#target');
+			var shadowRoot = target.attachShadow({ mode: 'open' });
+			var innerHTML = '<input type="checkbox" id="D" aria-labelledby="E"/>';
+			innerHTML += '<label for="D" aria-hidden="true">Please</label>';
+			innerHTML += '<label for="D" id="E">Excuse</label>';
+			shadowRoot.innerHTML = innerHTML;
+			var shadowTarget = target.shadowRoot;
+			assert.isFalse(
+				checks['multiple-label'].evaluate.call(
+					checkContext,
+					shadowTarget.firstElementChild
+				)
+			);
+		}
+	);
+
+	(shadowSupported ? it : xit)(
+		'should return true for invalid multiple labels in the same document/shadow tree',
+		function() {
+			fixture.innerHTML = '<div id="target"></div>';
+			var target = document.querySelector('#target');
+			var shadowRoot = target.attachShadow({ mode: 'open' });
+			var innerHTML = '<input type="checkbox" id="Q"/>';
+			innerHTML += '<label for="Q" aria-hidden="true"></label>';
+			innerHTML += '<label for="Q" >Excuse</label>';
+			shadowRoot.innerHTML = innerHTML;
+			var shadowTarget = target.shadowRoot;
+			assert.isTrue(
+				checks['multiple-label'].evaluate.call(
+					checkContext,
+					shadowTarget.firstElementChild
+				)
+			);
+		}
+	);
 });