fix(label): work with virtual nodes

lib/checks/label/explicit-evaluate.js

@@ -2,22 +2,26 @@ import { getRootNode, isVisible } from '../../commons/dom';
 import { accessibleText } from '../../commons/text';
 import { escapeSelector } from '../../core/utils';
 
-function explicitEvaluate(node) {
-	if (node.getAttribute('id')) {
-		const root = getRootNode(node);
-		const id = escapeSelector(node.getAttribute('id'));
-		const label = root.querySelector(`label[for="${id}"]`);
+function explicitEvaluate(node, options, virtualNode) {
+	try {
+		if (virtualNode.attr('id')) {
+			const root = getRootNode(virtualNode.actualNode);
+			const id = escapeSelector(virtualNode.attr('id'));
+			const label = root.querySelector(`label[for="${id}"]`);
 
-		if (label) {
-			// defer to hidden-explicit-label check for better messaging
-			if (!isVisible(label)) {
-				return true;
-			} else {
-				return !!accessibleText(label);
+			if (label) {
+				// defer to hidden-explicit-label check for better messaging
+				if (!isVisible(label)) {
+					return true;
+				} else {
+					return !!accessibleText(label);
+				}
 			}
 		}
+		return false;
+	} catch (e) {
+		return undefined;
 	}
-	return false;
 }
 
 export default explicitEvaluate;

lib/checks/label/explicit.json

@@ -5,7 +5,8 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Form element has an explicit <label>",
-			"fail": "Form element does not have an explicit <label>"
+			"fail": "Form element does not have an explicit <label>",
+			"incomplete": "Unable to determine if form element has an explicit <label>"
 		}
 	}
 }

lib/checks/label/help-same-as-label-evaluate.js

@@ -2,27 +2,31 @@ import { labelVirtual, accessibleText, sanitize } from '../../commons/text';
 import { idrefs } from '../../commons/dom';
 
 function helpSameAsLabelEvaluate(node, options, virtualNode) {
-	var labelText = labelVirtual(virtualNode),
-		check = node.getAttribute('title');
+	try {
+		const labelText = labelVirtual(virtualNode);
+		let check = virtualNode.attr('title');
 
-	if (!labelText) {
-		return false;
-	}
+		if (!labelText) {
+			return false;
+		}
 
-	if (!check) {
-		check = '';
+		if (!check) {
+			check = '';
 
-		if (node.getAttribute('aria-describedby')) {
-			var ref = idrefs(node, 'aria-describedby');
-			check = ref
-				.map(function(thing) {
-					return thing ? accessibleText(thing) : '';
-				})
-				.join('');
+			if (virtualNode.attr('aria-describedby')) {
+				const ref = idrefs(virtualNode.actualNode, 'aria-describedby');
+				check = ref
+					.map(function(thing) {
+						return thing ? accessibleText(thing) : '';
+					})
+					.join('');
+			}
 		}
-	}
 
-	return sanitize(check) === sanitize(labelText);
+		return sanitize(check) === sanitize(labelText);
+	} catch (e) {
+		return undefined;
+	}
 }
 
 export default helpSameAsLabelEvaluate;

lib/checks/label/help-same-as-label.json

@@ -6,7 +6,8 @@
 		"impact": "minor",
 		"messages": {
 			"pass": "Help text (title or aria-describedby) does not duplicate label text",
-			"fail": "Help text (title or aria-describedby) text is the same as the label text"
+			"fail": "Help text (title or aria-describedby) text is the same as the label text",
+			"incomplete": "Unable to determine if Help text (title or aria-describedby) text is the same as the label text"
 		}
 	}
 }

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

@@ -3,6 +3,10 @@ import { accessibleTextVirtual } from '../../commons/text';
 import { escapeSelector } from '../../core/utils';
 
 function hiddenExplicitLabelEvaluate(node, options, virtualNode) {
+	if (!node) {
+		return undefined;
+	}
+
 	if (node.getAttribute('id')) {
 		const root = getRootNode(node);
 		const id = escapeSelector(node.getAttribute('id'));

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

@@ -5,7 +5,8 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Form element has a visible explicit <label>",
-			"fail": "Form element has explicit <label> that is hidden"
+			"fail": "Form element has explicit <label> that is hidden",
+			"incomplete": "Unable to determine if form element has explicit <label> that is hidden"
 		}
 	}
 }

lib/checks/label/implicit-evaluate.js

@@ -1,12 +1,16 @@
-import { findUpVirtual } from '../../commons/dom';
-import { accessibleText } from '../../commons/text';
+import { closest } from '../../core/utils';
+import { accessibleTextVirtual } from '../../commons/text';
 
 function implicitEvaluate(node, options, virtualNode) {
-	const label = findUpVirtual(virtualNode, 'label');
-	if (label) {
-		return !!accessibleText(label, { inControlContext: true });
+	try {
+		const label = closest(virtualNode, 'label');
+		if (label) {
+			return !!accessibleTextVirtual(label, { inControlContext: true });
+		}
+		return false;
+	} catch (e) {
+		return undefined;
 	}
-	return false;
 }
 
 export default implicitEvaluate;

lib/checks/label/implicit.json

@@ -5,7 +5,8 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Form element has an implicit (wrapped) <label>",
-			"fail": "Form element does not have an implicit (wrapped) <label>"
+			"fail": "Form element does not have an implicit (wrapped) <label>",
+			"incomplete": "Unable to determine if form element has an implicit (wrapped} <label>"
 		}
 	}
 }

lib/commons/aria/label-virtual.js

@@ -8,15 +8,15 @@ import sanitize from '../text/sanitize';
  * @method labelVirtual
  * @memberof axe.commons.aria
  * @instance
- * @param  {Object} actualNode The virtualNode to test
+ * @param  {VirtualNode} virtualNode The virtualNode to test
  * @return {Mixed}  String of visible text, or `null` if no label is found
  */
-function labelVirtual({ actualNode }) {
+function labelVirtual(virtualNode) {
 	let ref, candidate;
 
-	if (actualNode.getAttribute('aria-labelledby')) {
+	if (virtualNode.attr('aria-labelledby')) {
 		// aria-labelledby
-		ref = idrefs(actualNode, 'aria-labelledby');
+		ref = idrefs(virtualNode.actualNode, 'aria-labelledby');
 		candidate = ref
 			.map(function(thing) {
 				// TODO: es-module-utils.getNodeFromTree
@@ -32,7 +32,7 @@ function labelVirtual({ actualNode }) {
 	}
 
 	// aria-label
-	candidate = actualNode.getAttribute('aria-label');
+	candidate = virtualNode.attr('aria-label');
 	if (candidate) {
 		candidate = sanitize(candidate).trim();
 		if (candidate) {

lib/commons/text/label-virtual.js

@@ -1,7 +1,7 @@
 import ariaLabelVirtual from '../aria/label-virtual';
 import visible from './visible';
 import getRootNode from '../dom/get-root-node';
-import findUpVirtual from '../dom/find-up-virtual';
+import { closest, escapeSelector } from '../../core/utils';
 
 /**
  * Gets the visible text of a label for a given input
@@ -12,28 +12,37 @@ import findUpVirtual from '../dom/find-up-virtual';
  * @param  {VirtualNode} node The virtual node mapping to the input to test
  * @return {Mixed} String of visible text, or `null` if no label is found
  */
-function labelVirtual(node) {
+function labelVirtual(virtualNode) {
 	var ref, candidate, doc;
 
-	candidate = ariaLabelVirtual(node);
+	candidate = ariaLabelVirtual(virtualNode);
 	if (candidate) {
 		return candidate;
 	}
 
 	// explicit label
-	if (node.actualNode.id) {
-		// TODO: es-module-utils.escapeSelector
-		const id = axe.utils.escapeSelector(node.actualNode.getAttribute('id'));
-		doc = getRootNode(node.actualNode);
+	if (virtualNode.attr('id')) {
+		if (!virtualNode.actualNode) {
+			throw new TypeError(
+				'Cannot resolve explicit label reference for non-DOM nodes'
+			);
+		}
+
+		const id = escapeSelector(virtualNode.attr('id'));
+		doc = getRootNode(virtualNode.actualNode);
 		ref = doc.querySelector('label[for="' + id + '"]');
 		candidate = ref && visible(ref, true);
 		if (candidate) {
 			return candidate;
 		}
 	}
 
-	ref = findUpVirtual(node, 'label');
-	candidate = ref && visible(ref, true);
+	if (!virtualNode.actualNode) {
+		throw new TypeError('Cannot determine if non-DOM node is visible');
+	}
+
+	ref = closest(virtualNode, 'label');
+	candidate = ref && visible(ref.actualNode, true);
 	if (candidate) {
 		return candidate;
 	}

lib/rules/label-matches.js

@@ -1,12 +1,12 @@
-function labelMatches(node) {
+function labelMatches(node, virtualNode) {
 	if (
-		node.nodeName.toLowerCase() !== 'input' ||
-		node.hasAttribute('type') === false
+		virtualNode.props.nodeName !== 'input' ||
+		virtualNode.hasAttr('type') === false
 	) {
 		return true;
 	}
 
-	var type = node.getAttribute('type').toLowerCase();
+	var type = virtualNode.attr('type').toLowerCase();
 	return (
 		['hidden', 'image', 'button', 'submit', 'reset'].includes(type) === false
 	);

test/checks/label/explicit.js

@@ -3,40 +3,45 @@ describe('explicit-label', function() {
 
 	var fixture = document.getElementById('fixture');
 	var fixtureSetup = axe.testUtils.fixtureSetup;
+	var queryFixture = axe.testUtils.queryFixture;
 	var shadowSupport = axe.testUtils.shadowSupport;
 
 	afterEach(function() {
 		fixture.innerHTML = '';
 	});
 
 	it('should return false if an empty label is present', function() {
-		fixtureSetup('<label for="target"></label><input type="text" id="target">');
-		var node = fixture.querySelector('#target');
-		assert.isFalse(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+		var vNode = queryFixture(
+			'<label for="target"></label><input type="text" id="target">'
+		);
+		assert.isFalse(
+			axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+		);
 	});
 
 	it('should return true if a non-empty label is present', function() {
-		fixtureSetup(
+		var vNode = queryFixture(
 			'<label for="target">Text</label><input type="text" id="target">'
 		);
-		var node = fixture.querySelector('#target');
-		assert.isTrue(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+		assert.isTrue(
+			axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+		);
 	});
 
 	it('should return true if an invisible non-empty label is present, to defer to hidden-explicit-label', function() {
-		fixtureSetup(
+		var vNode = queryFixture(
 			'<label for="target" style="display: none;">Text</label><input type="text" id="target">'
 		);
-		var node = fixture.querySelector('#target');
-		assert.isTrue(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+		assert.isTrue(
+			axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+		);
 	});
 
 	it('should return false if a label is not present', function() {
-		var node = document.createElement('input');
-		node.type = 'text';
-		fixtureSetup(node);
-
-		assert.isFalse(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+		var vNode = queryFixture('<input type="text" id="target" />');
+		assert.isFalse(
+			axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+		);
 	});
 
 	(shadowSupport.v1 ? it : xit)(
@@ -48,8 +53,10 @@ describe('explicit-label', function() {
 				'<label for="target">American band</label><input id="target">';
 			fixtureSetup(root);
 
-			var node = shadow.querySelector('#target');
-			assert.isTrue(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+			var vNode = axe.utils.getNodeFromTree(shadow.querySelector('#target'));
+			assert.isTrue(
+				axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+			);
 		}
 	);
 
@@ -63,8 +70,10 @@ describe('explicit-label', function() {
 				'<label for="target"><slot></slot></label><input id="target">';
 			fixtureSetup(root);
 
-			var node = shadow.querySelector('#target');
-			assert.isTrue(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+			var vNode = axe.utils.getNodeFromTree(shadow.querySelector('#target'));
+			assert.isTrue(
+				axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+			);
 		}
 	);
 
@@ -77,8 +86,10 @@ describe('explicit-label', function() {
 			shadow.innerHTML = '<slot></slot><input id="target">';
 			fixtureSetup(root);
 
-			var node = shadow.querySelector('#target');
-			assert.isFalse(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+			var vNode = axe.utils.getNodeFromTree(shadow.querySelector('#target'));
+			assert.isFalse(
+				axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+			);
 		}
 	);
 
@@ -92,8 +103,25 @@ describe('explicit-label', function() {
 				'<label for="target">American band</label><slot></slot>';
 			fixtureSetup(root);
 
-			var node = root.querySelector('#target');
-			assert.isFalse(axe.testUtils.getCheckEvaluate('explicit-label')(node));
+			var vNode = axe.utils.getNodeFromTree(root.querySelector('#target'));
+			assert.isFalse(
+				axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, vNode)
+			);
 		}
 	);
+
+	describe('SerialVirtualNode', function() {
+		it('should return undefined', function() {
+			var virtualNode = new axe.SerialVirtualNode({
+				nodeName: 'input',
+				attributes: {
+					type: 'text'
+				}
+			});
+
+			assert.isFalse(
+				axe.testUtils.getCheckEvaluate('explicit-label')(null, {}, virtualNode)
+			);
+		});
+	});
 });