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

dequelabs · May 23, 2019 · e878f00 · e878f00
1 parent 93d59f4
commit e878f00
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/lib/checks/label/multiple-label.js b/lib/checks/label/multiple-label.js
@@ -1,12 +1,21 @@
 const id = axe.utils.escapeSelector(node.getAttribute('id'));
-let labels = Array.from(document.querySelectorAll(`label[for="${id}"]`));
 let parent = node.parentNode;
+let root = document;
+if (!axe.utils.contains(node.ownerDocument, node)) {
+	while (parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+		parent = parent.parentNode;
+	}
+	root = parent;
+}
+
+let labels = Array.from(root.querySelectorAll(`label[for="${id}"]`));
 
 if (labels.length) {
 	// filter out CSS hidden labels because they're fine
 	labels = labels.filter(label => axe.commons.dom.isVisible(label));
 }
 
+parent = node.parentNode;
 while (parent) {
 	if (
 		parent.nodeName.toUpperCase() === 'LABEL' &&

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,20 @@ 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 =
+				'<label for="myinput">normal</label><input id="myinput"></input>';
+			var shadowTarget = target.shadowRoot;
+			assert.isFalse(
+				checks['multiple-label'].evaluate.call(checkContext, shadowTarget)
+			);
+		}
+	);
 });