fix(color-contrast): dont error for floating element (#2444)

* Update reduce-to-elements-below-floating.js Found this as a bug when testing on a site. * add test
dequelabs · Sep 8, 2020 · 45eb746 · 45eb746
1 parent e1fa11b
commit 45eb746
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/lib/commons/dom/reduce-to-elements-below-floating.js b/lib/commons/dom/reduce-to-elements-below-floating.js
@@ -9,7 +9,7 @@
  */
 function reduceToElementsBelowFloating(elements, targetNode) {
 	const floatingPositions = ['fixed', 'sticky'];
-	const finalElements = [];
+	let finalElements = [];
 	let targetFound = false;
 
 	// Filter out elements that are temporarily floating above the target

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -188,6 +188,20 @@ describe('color-contrast', function() {
 		assert.deepEqual(checkContext._relatedNodes, [expectedRelatedNodes]);
 	});
 
+	it('should ignore position:fixed elements directly above the target', function() {
+		var params = checkSetup(
+			'<div style="background-color: #e5f1e5;" id="background">' +
+				'<div style="width:100%; position:fixed; top:0; height:400px; background: #F0F0F0; z-index: 200; color:#fff" >header</div>' +
+				'<div style="height: 10px;"></div>' +
+				'stuff <span id="target" style="color: rgba(91, 91, 90, 0.7)">This is some text</span>' +
+				'<div style="height: 10px;"></div>' +
+				'</div>'
+		);
+		var expectedRelatedNodes = fixture.querySelector('#background');
+		assert.isFalse(contrastEvaluate.apply(checkContext, params));
+		assert.deepEqual(checkContext._relatedNodes, [expectedRelatedNodes]);
+	});
+
 	it('should find contrast issues on position:fixed elements', function() {
 		var params = checkSetup(
 			'<div style="background-color: #e5f1e5;" id="background">' +