feat: Make explicit check consider shadow DOM (#442)

dequelabs · Jul 17, 2017 · 9ddfc0f · 9ddfc0f
1 parent ebe1858
commit 9ddfc0f
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/test/checks/label/explicit.js b/test/checks/label/explicit.js
@@ -3,6 +3,7 @@ describe('explicit-label', function () {
 
 	var fixture = document.getElementById('fixture');
 	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var shadowSupport = axe.testUtils.shadowSupport;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
@@ -34,4 +35,47 @@ describe('explicit-label', function () {
 		assert.isFalse(checks['explicit-label'].evaluate(node));
 	});
 
+	(shadowSupport.v1 ? it : xit)('should return true if input and label are in the same shadow root', function () {
+		var root = document.createElement('div');
+		var shadow = root.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<label for="target">American band</label><input id="target">';
+		fixtureSetup(root);
+
+		var node = shadow.querySelector('#target');
+		assert.isTrue(checks['explicit-label'].evaluate(node));
+	});
+
+	(shadowSupport.v1 ? it : xit)('should return true if label content is slotted', function () {
+		var root = document.createElement('div');
+		root.innerHTML = 'American band';
+		var shadow = root.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<label for="target"><slot></slot></label><input id="target">';
+		fixtureSetup(root);
+
+		var node = shadow.querySelector('#target');
+		assert.isTrue(checks['explicit-label'].evaluate(node));
+	});
+
+	(shadowSupport.v1 ? it : xit)('should return false if input is inside shadow DOM and the label is not', function () {
+		var root = document.createElement('div');
+		root.innerHTML = '<label for="target">American band</label>';
+		var shadow = root.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<slot></slot><input id="target">';
+		fixtureSetup(root);
+
+		var node = shadow.querySelector('#target');
+		assert.isFalse(checks['explicit-label'].evaluate(node));
+	});
+
+	(shadowSupport.v1 ? it : xit)('should return false if label is inside shadow DOM and the input is not', function () {
+		var root = document.createElement('div');
+		root.innerHTML = '<input id="target">';
+		var shadow = root.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<label for="target">American band</label><slot></slot>';
+		fixtureSetup(root);
+
+		var node = root.querySelector('#target');
+		assert.isFalse(checks['explicit-label'].evaluate(node));
+	});
+
 });