fix(color-contrast): handle text that is outside overflow: hidden anc…

…estor
dequelabs · Mar 5, 2024 · 4b5ab70 · 4b5ab70
1 parent c5e11de
commit 4b5ab70
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/lib/commons/dom/get-visible-child-text-rects.js b/lib/commons/dom/get-visible-child-text-rects.js
@@ -39,8 +39,14 @@ const getVisibleChildTextRects = memoize(
      * @see https://github.com/dequelabs/axe-core/issues/2178
      * @see https://github.com/dequelabs/axe-core/issues/2483
      * @see https://github.com/dequelabs/axe-core/issues/2681
+     *
+     * also need to resize the nodeRect to fit within the bounds of any overflow: hidden ancestors.
+     *
+     * @see https://github.com/dequelabs/axe-core/issues/4253
      */
-    return clientRects.length ? clientRects : [nodeRect];
+    return clientRects.length
+      ? clientRects
+      : filterHiddenRects([nodeRect], overflowHiddenNodes);
   }
 );
 export default getVisibleChildTextRects;

diff --git a/test/commons/dom/get-visible-child-text-rects.js b/test/commons/dom/get-visible-child-text-rects.js
@@ -120,4 +120,20 @@ describe('dom.getVisibleChildTextRects', () => {
 
     assert.lengthOf(actual, 2);
   });
+
+  it('changes nodeRect size if all text rects got outside ancestor overflow', () => {
+    fixtureSetup(`
+      <div style="overflow: hidden; width: 50px;">
+        <div style="overflow: hidden; width: 25px">
+          <div id="target" style="padding-left: 65px;">Hello World</div>
+        </div>
+      </div>
+    `);
+    const node = fixture.querySelector('#target');
+    const actual = getVisibleChildTextRects(node);
+    const rect = getClientRects(node)[0];
+    const expected = new DOMRect(rect.left, rect.top, 25, rect.height);
+
+    assertRectsEqual(actual, [expected]);
+  });
 });