fix: consider element's accessible names when labels are hidden (#1187)

* fix: consider element's accessible names when labels are hidden

Closes #1176

* chore: revert condition for pr review

* chore: update to use `isVisble` sr mode

lib/checks/label/hidden-explicit-label.js

@@ -3,8 +3,10 @@ if (node.getAttribute('id')) {
 	const id = axe.commons.utils.escapeSelector(node.getAttribute('id'));
 	const label = root.querySelector(`label[for="${id}"]`);
 
-	if (label && !axe.commons.dom.isVisible(label)) {
-		return true;
+	if (label && !axe.commons.dom.isVisible(label, true)) {
+		const name = axe.commons.text.accessibleTextVirtual(virtualNode).trim();
+		const isNameEmpty = name === '';
+		return isNameEmpty;
 	}
 }
 return false;

test/checks/label/hidden-explicit-label.js

@@ -1,38 +1,37 @@
 describe('hidden-explicit-label', function() {
 	'use strict';
 
-	var fixture = document.getElementById('fixture');
-	var fixtureSetup = axe.testUtils.fixtureSetup;
 	var shadowSupport = axe.testUtils.shadowSupport;
 	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 	var checkContext = axe.testUtils.MockCheckContext();
+	var checkSetup = axe.testUtils.checkSetup;
+	var check = checks['hidden-explicit-label'];
 
 	afterEach(function() {
 		checkContext.reset();
 	});
 
 	it('should return true if a hidden non-empty label is present', function() {
-		fixtureSetup(
-			'<label for="target" style="display:none">Text</label><input type="text" id="target">'
+		var args = checkSetup(
+			'<label for="target" style="display:none">Text</label><input type="text" id="target">',
+			{},
+			'#target'
 		);
-		var node = fixture.querySelector('#target');
-		assert.isTrue(checks['hidden-explicit-label'].evaluate(node));
+		assert.isTrue(check.evaluate.apply(check, args));
 	});
 
 	it('should return false if a visible non-empty label is present', function() {
-		fixtureSetup(
+		var args = checkSetup(
 			'<label for="target">Label</label><input type="text" id="target">'
 		);
-		var node = fixture.querySelector('#target');
-		assert.isFalse(checks['hidden-explicit-label'].evaluate(node));
+		assert.isFalse(check.evaluate.apply(check, args));
 	});
 
 	it('should return true if an invisible empty label is present', function() {
-		fixtureSetup(
+		var args = checkSetup(
 			'<label for="target" style="display: none;"></label><input type="text" id="target">'
 		);
-		var node = fixture.querySelector('#target');
-		assert.isTrue(checks['explicit-label'].evaluate(node));
+		assert.isTrue(check.evaluate.apply(check, args));
 	});
 
 	(shadowSupport.v1 ? it : xit)(
@@ -43,9 +42,7 @@ describe('hidden-explicit-label', function() {
 				'<label for="target" style="display:none">Text</label><input type="text" id="target">'
 			);
 
-			assert.isTrue(
-				checks['hidden-explicit-label'].evaluate.apply(shadowCheckSetup, params)
-			);
+			assert.isTrue(check.evaluate.apply(shadowCheckSetup, params));
 		}
 	);
 
@@ -57,9 +54,37 @@ describe('hidden-explicit-label', function() {
 				'<input type="text" id="target">'
 			);
 
-			assert.isFalse(
-				checks['hidden-explicit-label'].evaluate.apply(shadowCheckSetup, params)
-			);
+			assert.isFalse(check.evaluate.apply(shadowCheckSetup, params));
 		}
 	);
+
+	it('should fail when the label has aria-hidden=true', function() {
+		var html = '';
+		html += '<div>';
+		html += '  <label for="target" aria-hidden="true">';
+		html += '    Hello world';
+		html += '  </label>';
+		html += '  <input id="target">';
+		html += '</div>';
+		var args = checkSetup(html, {}, '#target');
+		assert.isTrue(check.evaluate.apply(check, args));
+	});
+
+	describe('if the label is hidden', function() {
+		describe('and the element has an accessible name', function() {
+			it('should not fail', function() {
+				var html = '';
+
+				html += '<div>';
+				html += '  <label for="target" style="display:none">';
+				html += '    Hello world';
+				html += '  </label>';
+				html += '  <input id="target" title="Hi">';
+				html += '</div>';
+
+				var args = checkSetup(html, {}, '#target');
+				assert.isFalse(check.evaluate.apply(check, args));
+			});
+		});
+	});
 });

test/integration/rules/label/label.html

@@ -14,17 +14,19 @@
 	<select aria-labelledby="label" id="pass5"></select>
 	<textarea aria-labelledby="label" id="pass6"></textarea>
 	<div id="label">Label</div>
-	<label>Label 	<input type="text" id="pass7"></label>
-	<label>Label 	<select id="pass8"></select></label>
-	<label>Label 	<textarea id="pass9"></textarea></label>
+	<label>Label <input type="text" id="pass7"></label>
+	<label>Label <select id="pass8"></select></label>
+	<label>Label <textarea id="pass9"></textarea></label>
 
 	<label><input type="text" id="fail4"></label>
 	<label><select id="fail5"></select></label>
 	<label><textarea id="fail6"></textarea></label>
 	<label for="fail7"></label><input type="text" id="fail7">
 	<label for="fail8"></label><select id="fail8"></select>
 	<label for="fail9"></label><textarea id="fail9"></textarea>
-	<label for="fail10"><select id="fail10"><option>Thing</option></select></label>
+	<label for="fail10"><select id="fail10">
+			<option>Thing</option>
+		</select></label>
 	<label for="fail11" style="display: none;">Text</label><input type="text" id="fail11">
 	<label for="pass10">Label</label><input type="text" id="pass10">
 	<label for="pass11">Label</label><select id="pass11"></select>
@@ -57,5 +59,13 @@
 		<input type="text" id="fail25" />
 	</div>
 
+
+	<div>
+		<label for="pass-gh1176" style="display:none">
+			Hello world
+		</label>
+		<input id="pass-gh1176" title="Hi">
+	</div>
+
 	</div>
-</form>
+</form>

test/integration/rules/label/label.json

@@ -35,6 +35,7 @@
 		["#pass13"],
 		["#pass14"],
 		["#pass15"],
-		["#pass16"]
+		["#pass16"],
+		["#pass-gh1176"]
 	]
 }