From 888a1918d10d29ec704a4d9d4376c033ea8df0ea Mon Sep 17 00:00:00 2001
From: Steven Lambert <steven.lambert@deque.com>
Date: Tue, 28 Sep 2021 16:21:49 -0600
Subject: [PATCH] fix(color-contrast): account for 0 width scroll regions width
 children

---
 lib/commons/dom/is-visible.js                             | 8 ++++++--
 test/commons/dom/is-visible.js                            | 8 ++++++++
 test/integration/rules/color-contrast/color-contrast.html | 6 ++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/lib/commons/dom/is-visible.js b/lib/commons/dom/is-visible.js
index 2a3ae2ffa3..8cb847719d 100644
--- a/lib/commons/dom/is-visible.js
+++ b/lib/commons/dom/is-visible.js
@@ -186,12 +186,15 @@ 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 (
@@ -199,6 +202,7 @@ function isVisible(el, screenReader, recursed) {
     (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
index d1b390d4f8..a85276cab0 100644
--- 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
index 17a3d133c3..2a0d3ed153 100644
--- 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>