fix(color-contrast): account for 0 width scroll regions with children (…

…#3172)
dequelabs · Oct 18, 2021 · ac913a1 · ac913a1
1 parent 76aa5ec
commit ac913a1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/lib/commons/dom/is-visible.js b/lib/commons/dom/is-visible.js
@@ -186,19 +186,23 @@ function isVisible(el, screenReader, recursed) {
 
   // hidden from visual users
   const elHeight = parseInt(style.getPropertyValue('height'));
+  const elWidth = parseInt(style.getPropertyValue('width'));
 
   // ways to hide content visually
-  const scrollableWithZeroHeight = getScroll(el) && elHeight === 0;
+  const scroll = getScroll(el);
+  const scrollableWithZeroHeight = scroll && elHeight === 0;
+  const scrollableWithZeroWidth = scroll && elWidth === 0;
   const posAbsoluteOverflowHiddenAndSmall =
     style.getPropertyValue('position') === 'absolute' &&
-    elHeight < 2 &&
+    (elHeight < 2 || elWidth < 2) &&
     style.getPropertyValue('overflow') === 'hidden';
 
   if (
     !screenReader &&
     (isClipped(style) ||
       style.getPropertyValue('opacity') === '0' ||
       scrollableWithZeroHeight ||
+      scrollableWithZeroWidth ||
       posAbsoluteOverflowHiddenAndSmall)
   ) {
     return false;

diff --git a/test/commons/dom/is-visible.js b/test/commons/dom/is-visible.js
@@ -261,6 +261,14 @@ describe('dom.isVisible', function() {
       assert.isFalse(axe.commons.dom.isVisible(el));
     });
 
+    it('should return false for 0 width scrollable region', function() {
+      fixture.innerHTML =
+        '<div style="overflow: scroll; width: 0"><div id="target">Hello!</div></div>';
+      var el = document.getElementById('target');
+
+      assert.isFalse(axe.commons.dom.isVisible(el));
+    });
+
     it('returns false for `AREA` without closest `MAP` element', function() {
       var vNode = queryFixture(
         '<area id="target" role="link" shape="circle" coords="130,136,60" aria-label="MDN"/>'

diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
@@ -248,3 +248,9 @@
     &#x20A0; &#x20A1; &#x20A2; &#x20A3;
   </div>
 </div>
+
+<div style="width: 0; height: 50px; overflow: scroll">
+  <div id="ignore7" style="width: 200px; height: 200px; background-color: blue">
+    Hello World
+  </div>
+</div>