ignore element from matches

dequelabs · Mar 12, 2024 · 714ee9d · 714ee9d
1 parent 4b5ab70
commit 714ee9d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js
@@ -4,14 +4,16 @@ import {
   findUpVirtual,
   visuallyOverlaps,
   getRootNode,
-  isInert
+  isInert,
+  getOverflowHiddenAncestors
 } from '../commons/dom';
 import {
   visibleVirtual,
   removeUnicode,
   sanitize,
   isIconLigature
 } from '../commons/text';
+import { rectsOverlap } from '../commons/math';
 import { isDisabled } from '../commons/forms';
 import { getNodeFromTree, querySelectorAll, tokenList } from '../core/utils';
 
@@ -147,14 +149,22 @@ function colorContrastMatches(node, virtualNode) {
     }
   }
 
-  const rects = range.getClientRects();
-  for (let index = 0; index < rects.length; index++) {
+  const rects = Array.from(range.getClientRects());
+  const overflowNodes = getOverflowHiddenAncestors(virtualNode);
+  return rects.some(rect => {
     //check to see if the rectangle impinges
-    if (visuallyOverlaps(rects[index], node)) {
-      return true;
+    const overlapps = visuallyOverlaps(rect, node);
+
+    if (!overflowNodes.length) {
+      return overlapps;
     }
-  }
-  return false;
+
+    const withinOverflow = overflowNodes.some(overflowNode => {
+      return rectsOverlap(rect, overflowNode.boundingClientRect);
+    });
+
+    return overlapps && withinOverflow;
+  });
 }
 
 export default colorContrastMatches;

diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
@@ -459,3 +459,9 @@
 >
   Hello world
 </div>
+
+<div style="overflow: hidden; width: 50px">
+  <div style="overflow: hidden; width: 25px">
+    <div id="ignore13" style="padding-left: 65px">Hello World</div>
+  </div>
+</div>
diff --git a/test/rule-matches/color-contrast-matches.js b/test/rule-matches/color-contrast-matches.js
@@ -418,6 +418,19 @@ describe('color-contrast-matches', function () {
     assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
   });
 
+  it('should not match text outside overflow', () => {
+    fixture.innerHTML = `
+      <div style="overflow: hidden; width: 50px;">
+        <div style="overflow: hidden; width: 25px">
+          <div id="target" style="padding-left: 65px;">Hello World</div>
+        </div>
+      </div>
+    `;
+    var target = fixture.querySelector('#target');
+    axe.testUtils.flatTreeSetup(fixture);
+    assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+  });
+
   if (shadowSupport) {
     it('should match a descendant of an element across a shadow boundary', function () {
       fixture.innerHTML =