fix(scrollable-region-focusable): treat overflow:clip as hidden (#3304)

dequelabs · Nov 24, 2021 · ef45377 · ef45377
1 parent 1fd4b00
commit ef45377
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/lib/core/utils/get-scroll.js b/lib/core/utils/get-scroll.js
@@ -6,7 +6,7 @@
  * @param {buffer} (Optional) allowed negligence in overflow
  * @returns {Object | undefined}
  */
-function getScroll(elm, buffer = 0) {
+ export default function getScroll(elm, buffer = 0) {
   const overflowX = elm.scrollWidth > elm.clientWidth + buffer;
   const overflowY = elm.scrollHeight > elm.clientHeight + buffer;
 
@@ -19,12 +19,8 @@ function getScroll(elm, buffer = 0) {
   }
 
   const style = window.getComputedStyle(elm);
-  const overflowXStyle = style.getPropertyValue('overflow-x');
-  const overflowYStyle = style.getPropertyValue('overflow-y');
-  const scrollableX =
-    overflowXStyle !== 'visible' && overflowXStyle !== 'hidden';
-  const scrollableY =
-    overflowYStyle !== 'visible' && overflowYStyle !== 'hidden';
+  const scrollableX = isScrollable(style, 'overflow-x');
+  const scrollableY = isScrollable(style, 'overflow-y');
 
   /**
    * check direction of `overflow` and `scrollable`
@@ -38,4 +34,7 @@ function getScroll(elm, buffer = 0) {
   }
 }
 
-export default getScroll;
+function isScrollable(style, prop) {
+  const overflowProp = style.getPropertyValue(prop);
+  return ['scroll', 'auto'].includes(overflowProp);
+}
diff --git a/test/core/utils/get-scroll.js b/test/core/utils/get-scroll.js
@@ -45,6 +45,18 @@ describe('axe.utils.getScroll', function() {
     assert.isUndefined(actual);
   });
 
+  it('returns undefined when element overflow is clip', function() {
+    var target = queryFixture(
+      '<div id="target" style="height: 200px; width: 200px; overflow: clip">' +
+        '<div style="height: 2000px; width: 100px; background-color: pink;">' +
+        '<p> Content </p>' +
+        '</div>' +
+        '</div>'
+    );
+    var actual = axe.utils.getScroll(target.actualNode);
+    assert.isUndefined(actual);
+  });
+
   it('returns scroll offset when element overflow is auto', function() {
     var target = queryFixture(
       '<div id="target" style="height: 200px; width: 200px; overflow: auto">' +

diff --git a/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html b/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html
@@ -126,3 +126,9 @@
     </div>
   </div>
 </div>
+
+<div id="inapplicable10" style="height: 200px; overflow-y: clip">
+  <div style="height: 2000px">
+    <p>Content</p>
+  </div>
+</div>