feat: add shadow support to group-labelledby

Closes #426
dequelabs · Jul 21, 2017 · e2a9642 · e2a9642
1 parent 4874327
commit e2a9642
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/lib/checks/forms/labelledby.js b/lib/checks/forms/labelledby.js
@@ -3,7 +3,8 @@ this.data({
 	type: node.getAttribute('type')
 });
 
-var matchingNodes = document.querySelectorAll('input[type="' +
+var doc = axe.commons.dom.getRootNode(node);
+var matchingNodes = doc.querySelectorAll('input[type="' +
 	axe.commons.utils.escapeSelector(node.type) + '"][name="' + axe.commons.utils.escapeSelector(node.name) + '"]');
 if (matchingNodes.length <= 1) {
 	return true;
@@ -15,9 +16,9 @@ return [].map.call(matchingNodes, function (m) {
 	return l ? l.split(/\s+/) : [];
 }).reduce(function (prev, curr) {
 	return prev.filter(function (n) {
-		return curr.indexOf(n) !== -1;
+		return curr.includes(n);
 	});
 }).filter(function (n) {
-	var labelNode = document.getElementById(n);
+	var labelNode = doc.getElementById(n);
 	return labelNode && axe.commons.text.accessibleText(labelNode);
 }).length !== 0;
diff --git a/test/checks/forms/labelledby.js b/test/checks/forms/labelledby.js
@@ -3,13 +3,19 @@ describe('group-labelledby', function () {
 
 	var fixture = document.getElementById('fixture');
 	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var shadowSupport = axe.testUtils.shadowSupport.v1;
+
 	var checkContext = {
 		_data: null,
 		data: function (d) {
 			this._data = d;
 		}
 	};
 
+	beforeEach(function () {
+		axe._tree = undefined;
+	});
+
 	afterEach(function () {
 		fixture.innerHTML = '';
 		checkContext._data = null;
@@ -114,6 +120,38 @@ describe('group-labelledby', function () {
 				});
 			});
 
+			(shadowSupport ? it : xit)
+			('should return false if label is outside of shadow boundary', function () {
+				fixture.innerHTML = '<div id="container"><h2 id="shared">Label</h2></div>';
+				var shadowRoot = fixture.querySelector('#container').attachShadow({ mode: 'open' });
+				shadowRoot.innerHTML = '<input type="' + type + '" id="target" aria-labelledby="shared one" name="uniqueyname">' +
+					'<input type="' + type + '" aria-labelledby="shared two" name="uniqueyname">' +
+					'<input type="' + type + '" aria-labelledby="shared three" name="uniqueyname">';
+
+				var tree = axe._tree = axe.utils.getFlattenedTree(fixture);
+				var shadowContent = shadowRoot.querySelector('#target');
+				var virtualTarget = axe.utils.getNodeFromTree(tree[0], shadowContent);
+
+				var params = [shadowContent, undefined, virtualTarget];
+				assert.isFalse(check.evaluate.apply(checkContext, params));
+			});
+
+			(shadowSupport ? it : xit)
+			('should return true if all ' + type + ' components are in the shadow boundary', function () {
+				fixture.innerHTML = '<div id="container"></div>';
+
+				var shadowRoot = fixture.querySelector('#container').attachShadow({ mode: 'open' });
+				shadowRoot.innerHTML = '<p id="shared">Label</p>' +
+					'<input type="' + type + '" name="samename" aria-labelledby="shared one">' +
+					'<input type="' + type + '" id="target" name="samename" aria-labelledby="shared two">';
+
+				var tree = axe._tree = axe.utils.getFlattenedTree(fixture);
+				var shadowContent = shadowRoot.querySelector('#target');
+				var virtualTarget = axe.utils.getNodeFromTree(tree[0], shadowContent);
+
+				var params = [shadowContent, undefined, virtualTarget];
+				assert.isTrue(check.evaluate.apply(checkContext, params));
+			});
 		};
 
 	}