fix(getElementStack): do not add hidden elements to the stack (#1991)

* fix(getElementStack): do not add hidden elements to the stack * skip clip-path check for ie11
dequelabs · Jan 20, 2020 · 759d88d · 759d88d
1 parent b2373cb
commit 759d88d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/lib/commons/dom/get-element-stack.js b/lib/commons/dom/get-element-stack.js
@@ -418,7 +418,7 @@ function createGrid(
 		// (we don't do this before so we can calculate stacking context
 		// of parents with 0 width/height)
 		const rect = vNode.boundingClientRect;
-		if (rect.width !== 0 && rect.height !== 0) {
+		if (rect.width !== 0 && rect.height !== 0 && dom.isVisible(node)) {
 			addNodeToGrid(grid, vNode);
 		}
 

diff --git a/test/commons/dom/get-element-stack.js b/test/commons/dom/get-element-stack.js
@@ -4,6 +4,7 @@ describe('dom.getElementStack', function() {
 	var fixture = document.getElementById('fixture');
 	var getElementStack = axe.commons.dom.getElementStack;
 	var getClientElementStack = axe.commons.dom.getClientElementStack;
+	var isIE11 = axe.testUtils.isIE11;
 	var shadowSupported = axe.testUtils.shadowSupport.v1;
 
 	function mapToIDs(stack) {
@@ -291,6 +292,36 @@ describe('dom.getElementStack', function() {
 			assert.deepEqual(stack, ['1', 'fixture', 'target', '2']);
 		});
 
+		it('should not add hidden elements', function() {
+			fixture.innerHTML =
+				'<main id="1">' +
+				'<div id="2" style="position: absolute; display: none;">Some text</div>' +
+				'<div id="3" style="position: absolute; visibility: hidden">Some text</div>' +
+				'<span id="target">Hello World</span>' +
+				'</main>';
+			axe.testUtils.flatTreeSetup(fixture);
+			var target = fixture.querySelector('#target');
+			var stack = mapToIDs(getElementStack(target));
+			assert.deepEqual(stack, ['target', '1', 'fixture']);
+		});
+
+		// IE11 either only supports clip paths defined by url() or not at all,
+		// MDN and caniuse.com give different results...
+		(isIE11 ? it.skip : it)(
+			'should not add hidden elements using clip-path',
+			function() {
+				fixture.innerHTML =
+					'<main id="1">' +
+					'<div id="2" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);">Some text</div>' +
+					'<span id="target">Hello World</span>' +
+					'</main>';
+				axe.testUtils.flatTreeSetup(fixture);
+				var target = fixture.querySelector('#target');
+				var stack = mapToIDs(getElementStack(target));
+				assert.deepEqual(stack, ['target', '1', 'fixture']);
+			}
+		);
+
 		(shadowSupported ? it : xit)(
 			'should sort shadow dom elements correctly',
 			function() {