fix(rule): restore labelledBy on unlabeled select

dequelabs · Apr 23, 2018 · b7bdf66 · b7bdf66
1 parent 7da5c9a
commit b7bdf66
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 46 deletions.
diff --git a/lib/commons/text/accessible-text-virtual.js b/lib/commons/text/accessible-text-virtual.js
@@ -318,7 +318,7 @@ text.accessibleTextVirtual = function accessibleTextVirtual(element, inLabelledB
 		}
 
 		//Step 2f
-		if (!shouldNeverCheckSubtree(element) &&
+		if ((inLabelledByContext || !shouldNeverCheckSubtree(element)) &&
 					(!role || aria.getRolesWithNameFromContents().indexOf(role) !== -1)) {
 
 			returnText = getInnerText(element, inLabelledByContext, inControlContext);

diff --git a/test/checks/label/implicit.js b/test/checks/label/implicit.js
@@ -3,8 +3,6 @@ describe('implicit-label', function () {
 
 	var fixture = document.getElementById('fixture');
 	var fixtureSetup = axe.testUtils.fixtureSetup;
-	var checkSetup = axe.testUtils.checkSetup;
-	var checkContext = axe.testUtils.MockCheckContext();
 
 	afterEach(function () {
 		fixture.innerHTML = '';
@@ -40,40 +38,4 @@ describe('implicit-label', function () {
 		var virtualNode = axe.utils.getNodeFromTree(axe._tree[0], node);
 		assert.isFalse(checks['implicit-label'].evaluate(node, {}, virtualNode));
 	});
-
-	it('should return false if label is empty for select', function () {
-		var params = checkSetup('<label>' +
-	    '<span class="label"></span>' +
-	    '<select id="target">' +
-	        '<option value="1" selected="selected">Please choose a region</option>' +
-	        '<option value="2">Coastal</option>' +
-	        '<option value="3">Forest</option>' +
-	        '<option value="4">Grasslands</option>' +
-	        '<option value="5">Mountains</option>' +
-	    '</select>' +
-		'</label>');
-		assert.isFalse(checks['implicit-label'].evaluate.apply(checkContext, params));
-	});
-
-	it('should return false if input is labeled only by select options', function () {
-		var params = checkSetup('<label for="target">' +
-			'<select id="select">' +
-			'	<option selected="selected">Chosen</option>' +
-			'	<option>Not Selected</option>' +
-			'</select>' +
-		'</label>' +
-		'<input id="target" type="text" />');
-		assert.isFalse(checks['implicit-label'].evaluate.apply(checkContext, params));
-	});
-
-	it('should return false if input is aria-labelled only by select options', function () {
-		var params = checkSetup('<label for="target">' +
-			'<select id="select">' +
-			'	<option selected="selected">Chosen</option>' +
-			'	<option>Not Selected</option>' +
-			'</select>' +
-		'</label>' +
-		'<input aria-labelledby="select" type="text" id="target" />');
-		assert.isFalse(checks['implicit-label'].evaluate.apply(checkContext, params));
-	});
 });
diff --git a/test/commons/text/accessible-text.js b/test/commons/text/accessible-text.js
@@ -312,6 +312,62 @@ describe('text.accessibleTextVirtual', function() {
 		assert.equal(axe.commons.text.accessibleTextVirtual(target), 'This not a span is the value of everything');
 	});
 
+	it('should come up empty if input is labeled only by select options', function () {
+		fixture.innerHTML = '<label for="target">' +
+			'<select id="select">' +
+			'	<option selected="selected">Chosen</option>' +
+			'	<option>Not Selected</option>' +
+			'</select>' +
+		'</label>' +
+		'<input id="target" type="text" />';
+		axe._tree = axe.utils.getFlattenedTree(fixture);
+		var target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
+		assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+	});
+
+	it('should be empty if input is labeled by labeled select (ref\'d string labels have spotty support)', function () {
+		fixture.innerHTML = '<label for="select">My Select</label>' +
+		'<label for="target">' +
+			'<select id="select">' +
+			'	<option selected="selected">Chosen</option>' +
+			'	<option>Not Selected</option>' +
+			'</select>' +
+		'</label>' +
+		'<input id="target" type="text" />';
+		axe._tree = axe.utils.getFlattenedTree(fixture);
+		var target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
+		assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+	});
+
+	it('should be empty for an empty label wrapping a select', function () {
+		fixture.innerHTML = '<label>' +
+	    '<span class="label"></span>' +
+	    '<select id="target">' +
+	        '<option value="1" selected="selected">Please choose a region</option>' +
+	        '<option value="2">Coastal</option>' +
+	        '<option value="3">Forest</option>' +
+	        '<option value="4">Grasslands</option>' +
+	        '<option value="5">Mountains</option>' +
+	    '</select>' +
+		'</label>';
+		axe._tree = axe.utils.getFlattenedTree(fixture);
+		var target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
+		assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+	});
+
+	it('should return select options if input is aria-labelled by a select', function () {
+		fixture.innerHTML = '<label>' +
+			'<select id="select">' +
+			'	<option selected="selected">Chosen</option>' +
+			'	<option>Not Selected</option>' +
+			'</select>' +
+		'</label>' +
+		'<input aria-labelledby="select" type="text" id="target" />';
+		axe._tree = axe.utils.getFlattenedTree(fixture);
+		var target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
+		assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Chosen');
+	});
+
 	it('shoud properly fall back to title', function() {
 		fixture.innerHTML = '<a href="#" role="presentation" title="Hello"></a>';
 		axe._tree = axe.utils.getFlattenedTree(fixture);

diff --git a/test/integration/rules/label/label.html b/test/integration/rules/label/label.html
@@ -37,14 +37,24 @@
 	<label for="fail23">Hi</label><label for="fail23">Foo</label><input type="text" id="fail23">
 
 	<div>
-		<label for="fail24">My Select</label>
-		<label for="pass16">
+		<label>
 			<select id="fail24">
 				<option selected="selected">Chosen</option>
 				<option>Not Selected</option>
 			</select>
 		</label>
-		<input type="text" id="pass16" />
-		<input aria-labelledby="fail24" type="text" id="pass17" />
+		<input aria-labelledby="fail24" type="text" id="pass16" />
+	</div>
+
+	<div>
+		<label for="fail25">
+			<select id="fail26">
+				<option selected="selected">Chosen</option>
+				<option>Not Selected</option>
+			</select>
+		</label>
+		<input type="text" id="fail25" />
+	</div>
+
 	</div>
 </form>
diff --git a/test/integration/rules/label/label.json b/test/integration/rules/label/label.json
@@ -14,7 +14,9 @@
 		["#fail10"],
 		["#fail22"],
 		["#fail23"],
-		["#fail24"]
+		["#fail24"],
+		["#fail25"],
+		["#fail26"]
 	],
 	"passes": [
 		["#pass1"],
@@ -32,7 +34,6 @@
 		["#pass13"],
 		["#pass14"],
 		["#pass15"],
-		["#pass16"],
-		["#pass17"]
+		["#pass16"]
 	]
 }