feat(aria-label): deprecate Element arg; use virtualNode (#1922)

* feat(aria-label): deprecate Element arg; use virtualNode * chore: fix typo * chore: use serial over virtual in tests
dequelabs · Dec 12, 2019 · d14981c · d14981c
1 parent e1ecd8e
commit d14981c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 39 deletions.
diff --git a/lib/checks/shared/aria-label.js b/lib/checks/shared/aria-label.js
@@ -1,2 +1,2 @@
 const { text, aria } = axe.commons;
-return !!text.sanitize(aria.arialabelText(node));
+return !!text.sanitize(aria.arialabelText(virtualNode));
diff --git a/lib/commons/aria/arialabel-text.js b/lib/commons/aria/arialabel-text.js
@@ -3,13 +3,16 @@
 /**
  * Get the text value of aria-label, if any
  *
+ * @deprecated Do not use Element directly. Pass VirtualNode instead
  * @param {VirtualNode|Element} element
  * @return {string} ARIA label
  */
 aria.arialabelText = function arialabelText(node) {
-	node = node.actualNode || node;
-	if (node.nodeType !== 1) {
-		return '';
+	if (node instanceof axe.AbstractVirtualNode === false) {
+		if (node.nodeType !== 1) {
+			return '';
+		}
+		node = axe.utils.getNodeFromTree(node);
 	}
-	return node.getAttribute('aria-label') || '';
+	return node.attr('aria-label') || '';
 };
diff --git a/lib/core/base/virtual-node/serial-virtual-node.js b/lib/core/base/virtual-node/serial-virtual-node.js
@@ -84,3 +84,5 @@ function normaliseAttrs({ attributes = {} }) {
 		return attrs;
 	}, {});
 }
+
+axe.SerialVirtualNode = SerialVirtualNode;
diff --git a/lib/core/base/virtual-node/virtual-node.js b/lib/core/base/virtual-node/virtual-node.js
@@ -124,3 +124,5 @@ class VirtualNode extends axe.AbstractVirtualNode {
 		return this._cache.boundingClientRect;
 	}
 }
+
+axe.VirtualNode = VirtualNode;
diff --git a/lib/rules/label-content-name-mismatch-matches.js b/lib/rules/label-content-name-mismatch-matches.js
@@ -26,7 +26,7 @@ if (!rolesWithNameFromContents.includes(role)) {
  * if no `aria-label` or `aria-labelledby` attribute - ignore `node`
  */
 if (
-	!text.sanitize(aria.arialabelText(node)) &&
+	!text.sanitize(aria.arialabelText(virtualNode)) &&
 	!text.sanitize(aria.arialabelledbyText(node))
 ) {
 	return false;

diff --git a/test/checks/shared/aria-label.js b/test/checks/shared/aria-label.js
@@ -2,39 +2,31 @@ describe('aria-label', function() {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
+	var checkSetup = axe.testUtils.checkSetup;
 
 	afterEach(function() {
 		fixture.innerHTML = '';
 	});
 
 	it('should return true if an aria-label is present', function() {
-		var node = document.createElement('div');
-		node.setAttribute('aria-label', 'woohoo');
-		fixture.appendChild(node);
-
-		assert.isTrue(checks['aria-label'].evaluate(node));
+		var checkArgs = checkSetup('<div id="target" aria-label="woohoo"></div>');
+		assert.isTrue(checks['aria-label'].evaluate.apply(null, checkArgs));
 	});
 
 	it('should return false if an aria-label is not present', function() {
-		var node = document.createElement('div');
-		fixture.appendChild(node);
-
-		assert.isFalse(checks['aria-label'].evaluate(node));
+		var checkArgs = checkSetup('<div id="target"></div>');
+		assert.isFalse(checks['aria-label'].evaluate.apply(null, checkArgs));
 	});
 
 	it('should return false if an aria-label is present, but empty', function() {
-		var node = document.createElement('div');
-		node.setAttribute('aria-label', ' ');
-		fixture.appendChild(node);
-
-		assert.isFalse(checks['aria-label'].evaluate(node));
+		var checkArgs = checkSetup('<div id="target" aria-label=" "></div>');
+		assert.isFalse(checks['aria-label'].evaluate.apply(null, checkArgs));
 	});
 
 	it('should collapse whitespace', function() {
-		var node = document.createElement('div');
-		node.setAttribute('aria-label', ' \t \n \r \t  \t\r\n ');
-		fixture.appendChild(node);
-
-		assert.isFalse(checks['aria-label'].evaluate(node));
+		var checkArgs = checkSetup(
+			'<div id="target" aria-label=" \t \n \r \t  \t\r\n "></div>'
+		);
+		assert.isFalse(checks['aria-label'].evaluate.apply(null, checkArgs));
 	});
 });
diff --git a/test/commons/aria/arialabel-text.js b/test/commons/aria/arialabel-text.js
@@ -3,28 +3,31 @@ describe('aria.arialabelText', function() {
 	var aria = axe.commons.aria;
 
 	it('returns "" if there is no aria-label', function() {
-		var node = document.createElement('div');
-		assert.equal(aria.arialabelText(node), '');
-	});
-
-	it('returns the aria-label attribute of nodes', function() {
-		var node = document.createElement('div');
-		var label = ' my label ';
-		node.setAttribute('aria-label', label);
-		assert.equal(aria.arialabelText(node), label);
+		var vNode = new axe.SerialVirtualNode({ nodeName: 'div' });
+		assert.equal(aria.arialabelText(vNode), '');
 	});
 
-	it('returns the aria-label attribute of virtual nodes', function() {
-		var node = document.createElement('div');
+	it('returns the aria-label attribute', function() {
 		var label = ' my label ';
-		node.setAttribute('aria-label', label);
-		var vNode = { actualNode: node };
+		var vNode = new axe.SerialVirtualNode({
+			nodeName: 'div',
+			attributes: { 'aria-label': label }
+		});
 		assert.equal(aria.arialabelText(vNode), label);
 	});
 
 	it('returns "" if there is no aria-label', function() {
+		var vNode = new axe.SerialVirtualNode({ nodeName: 'div' });
+		assert.equal(aria.arialabelText(vNode), '');
+	});
+
+	it('looks up the node in the flat tree', function() {
+		var label = 'harambe';
 		var node = document.createElement('div');
-		assert.equal(aria.arialabelText(node), '');
+		node.setAttribute('aria-label', label);
+
+		axe.utils.getFlattenedTree(node);
+		assert.equal(aria.arialabelText(node), label);
 	});
 
 	it('returns "" if the node is not an element', function() {