Fix: Use virtualNode in hidden-content rule

dequelabs · Jul 3, 2017 · 2beede6 · 2beede6
1 parent fea3b30
commit 2beede6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/lib/checks/visibility/hidden-content.js b/lib/checks/visibility/hidden-content.js
@@ -1,7 +1,7 @@
 let styles = window.getComputedStyle(node);
 
 let whitelist = ['SCRIPT', 'HEAD', 'TITLE', 'NOSCRIPT', 'STYLE', 'TEMPLATE'];
-if (!whitelist.includes(node.tagName.toUpperCase()) && axe.commons.dom.hasContent(node)) {
+if (!whitelist.includes(node.tagName.toUpperCase()) && axe.commons.dom.hasContent(virtualNode)) {
   if (styles.getPropertyValue('display') === 'none') {
     return undefined;
   } else if (styles.getPropertyValue('visibility') === 'hidden') {

diff --git a/test/checks/visibility/hidden-content.js b/test/checks/visibility/hidden-content.js
@@ -10,37 +10,44 @@ describe('hidden content', function () {
 		}
 	};
 
+	function checkSetup (html, options, target) {
+		fixture.innerHTML = html;
+    axe._tree = axe.utils.getFlattenedTree(fixture);
+		var node = fixture.querySelector(target || '#target');
+		var virtualNode = axe.utils.getNodeFromTree(axe._tree[0], node);
+		return [node, options, virtualNode];
+	}
+
 	afterEach(function () {
 		fixture.innerHTML = '';
 		checkContext._data = null;
+		axe._tree = undefined;
 	});
 
 	it('should return undefined with display:none and children', function () {
-    fixture.innerHTML = '<div id="target" style="display: none;"><p>Some paragraph text.</p></div>';
-		var node = fixture.querySelector('#target');
-		assert.isUndefined(checks['hidden-content'].evaluate.call(checkContext, node));
+    var params = checkSetup('<div id="target" style="display: none;"><p>Some paragraph text.</p></div>');
+		assert.isUndefined(checks['hidden-content'].evaluate.apply(checkContext, params));
 	});
 
 	it('should return undefined with visibility:hidden and children', function () {
-    fixture.innerHTML = '<div id="target" style="visibility: hidden;"><p>Some paragraph text.</p></div>';
-		var node = fixture.querySelector('#target');
-		assert.isUndefined(checks['hidden-content'].evaluate.call(checkContext, node));
+    var params = checkSetup('<div id="target" style="visibility: hidden;"><p>Some paragraph text.</p></div>');
+		assert.isUndefined(checks['hidden-content'].evaluate.apply(checkContext, params));
 	});
 
 	it('should return true with visibility:hidden and parent with visibility:hidden', function () {
-    fixture.innerHTML = '<div style="visibility: hidden;"><p id="target" style="visibility: hidden;">Some paragraph text.</p></div>';
-		var node = fixture.querySelector('#target');
-		assert.isTrue(checks['hidden-content'].evaluate.call(checkContext, node));
+    var params = checkSetup('<div style="visibility: hidden;"><p id="target" style="visibility: hidden;">Some paragraph text.</p></div>');
+		assert.isTrue(checks['hidden-content'].evaluate.apply(checkContext, params));
 	});
 
 	it('should return true with aria-hidden and no content', function () {
-		fixture.innerHTML = '<span id="target" class="icon" aria-hidden="true"></span>';
-		var node = fixture.querySelector('#target');
-		assert.isTrue(checks['hidden-content'].evaluate.call(checkContext, node));
+		var params = checkSetup('<span id="target" class="icon" aria-hidden="true"></span>');
+		assert.isTrue(checks['hidden-content'].evaluate.apply(checkContext, params));
 	});
 
 	it('should skip whitelisted elements', function () {
 		var node = document.querySelector('head');
-		assert.isTrue(checks['hidden-content'].evaluate.call(checkContext, node));
+    axe._tree = axe.utils.getFlattenedTree(document.documentElement);
+		var virtualNode = axe.utils.getNodeFromTree(axe._tree[0], node);
+		assert.isTrue(checks['hidden-content'].evaluate.call(checkContext, node, undefined, virtualNode));
 	});
 });