Consider element with height or width of 0 as invisible unless th…

…e text overflows (#827)
Siteimprove · Jun 16, 2021 · 0ac1a28 · 0ac1a28
1 parent 32280b4
commit 0ac1a28
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/packages/alfa-rules/src/common/predicate/is-clipped.ts b/packages/alfa-rules/src/common/predicate/is-clipped.ts
@@ -42,10 +42,10 @@ function isClippedBySize(
       const { value: x } = style.computed("overflow-x");
       const { value: y } = style.computed("overflow-y");
 
-      if (x.value === "hidden" || y.value === "hidden") {
-        const { value: height } = style.computed("height");
-        const { value: width } = style.computed("width");
+      const { value: height } = style.computed("height");
+      const { value: width } = style.computed("width");
 
+      if (x.value === "hidden" || y.value === "hidden") {
         for (const dimension of [height, width]) {
           switch (dimension.type) {
             case "percentage":
@@ -64,6 +64,31 @@ function isClippedBySize(
           }
         }
       }
+
+      if (
+        x.value === "auto" ||
+        x.value === "scroll" ||
+        y.value === "auto" ||
+        y.value === "scroll"
+      ) {
+        for (const dimension of [height, width]) {
+          switch (dimension.type) {
+            case "percentage":
+              if (dimension.value <= 0) {
+                return true;
+              } else {
+                break;
+              }
+
+            case "length":
+              if (dimension.value <= 0) {
+                return true;
+              } else {
+                break;
+              }
+          }
+        }
+      }
     }
 
     for (const parent of node.parent({ flattened: true })) {

diff --git a/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx b/packages/alfa-rules/test/common/predicate/is-visible.spec.tsx
@@ -61,6 +61,42 @@ test(`isVisible() returns false when an element is hidden by reducing its size
   t.equal(isVisible(element), false);
 });
 
+test(`isVisible() returns false when an element scrolls its overflow and its size is reduced to 0 pixel, thus hidding the scrollbar`, (t) => {
+  for (const element of [
+    <div style={{ width: "0", overflowX: "scroll" }}>Hello World</div>,
+
+    <div style={{ width: "0", overflowY: "scroll" }}>Hello World</div>,
+
+    <div style={{ height: "0", overflowX: "scroll" }}>Hello World</div>,
+
+    <div style={{ height: "0", overflowY: "scroll" }}>Hello World</div>,
+
+    <div style={{ width: "0", height: "0", overflow: "scroll" }}>
+      Hello World
+    </div>,
+  ]) {
+    t.equal(isVisible(element), false);
+  }
+});
+
+test(`isVisible() returns false when an element has its overflow set to auto and its size is reduced to 0 pixel, thus hidding the scrollbar`, (t) => {
+  for (const element of [
+    <div style={{ width: "0", overflowX: "auto" }}>Hello World</div>,
+
+    <div style={{ width: "0", overflowY: "auto" }}>Hello World</div>,
+
+    <div style={{ height: "0", overflowX: "auto" }}>Hello World</div>,
+
+    <div style={{ height: "0", overflowY: "auto" }}>Hello World</div>,
+
+    <div style={{ width: "0", height: "0", overflow: "auto" }}>
+      Hello World
+    </div>,
+  ]) {
+    t.equal(isVisible(element), false);
+  }
+});
+
 test("isVisible() returns false on empty elements", (t) => {
   const element = <div />;