fix(color-contrast): add special case for new sr-only technique (#2985)

* bump up height requirement for sr-only to 1px * add special case for sr-only method * use less than 2 Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * make if smaller Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
dequelabs · Jun 22, 2021 · 79cbf01 · 79cbf01
1 parent 8d4ca3c
commit 79cbf01
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/lib/commons/dom/is-visible.js b/lib/commons/dom/is-visible.js
@@ -156,11 +156,21 @@ function isVisible(el, screenReader, recursed) {
   }
 
   // hidden from visual users
+  const elHeight = parseInt(style.getPropertyValue('height'));
+
+  // ways to hide content visually
+  const scrollableWithZeroHeight = getScroll(el) && elHeight === 0;
+  const posAbsoluteOverflowHiddenAndSmall =
+    style.getPropertyValue('position') === 'absolute' &&
+    elHeight < 2 &&
+    style.getPropertyValue('overflow') === 'hidden';
+
   if (
     !screenReader &&
     (isClipped(style) ||
       style.getPropertyValue('opacity') === '0' ||
-      (getScroll(el) && parseInt(style.getPropertyValue('height')) === 0))
+      scrollableWithZeroHeight ||
+      posAbsoluteOverflowHiddenAndSmall)
   ) {
     return false;
   }

diff --git a/test/commons/dom/is-visible.js b/test/commons/dom/is-visible.js
@@ -356,6 +356,13 @@ describe('dom.isVisible', function() {
         assert.isFalse(axe.commons.dom.isVisible(el.actualNode));
       }
     );
+    it('should return false if element is visually hidden using position absolute, overflow hidden, and a very small height', function() {
+      fixture.innerHTML =
+        '<div id="target" style="position:absolute; height: 1px; overflow: hidden;">StickySticky</div>';
+      var el = document.getElementById('target');
+
+      assert.isFalse(axe.commons.dom.isVisible(el));
+    });
   });
 
   describe('screen readers', function() {