fix(color-contrast): do not check contrast on elemets that are inerted (

#3894)
dequelabs · Jan 26, 2023 · da19946 · da19946
1 parent cef96be
commit da19946
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js
@@ -1,6 +1,11 @@
 /* global document */
 import { getAccessibleRefs } from '../commons/aria';
-import { findUpVirtual, visuallyOverlaps, getRootNode } from '../commons/dom';
+import {
+  findUpVirtual,
+  visuallyOverlaps,
+  getRootNode,
+  isInert
+} from '../commons/dom';
 import {
   visibleVirtual,
   removeUnicode,
@@ -35,7 +40,7 @@ function colorContrastMatches(node, virtualNode) {
     return false;
   }
 
-  if (isDisabled(virtualNode)) {
+  if (isDisabled(virtualNode) || isInert(virtualNode)) {
     return false;
   }
 

diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
@@ -440,3 +440,11 @@
     <span id="pass22">This div will be on top of the stack</span>
   </div>
 </div>
+
+<div id="ignore11" style="background: #000; color: #333" inert>hello</div>
+
+<div inert>
+  <div>
+    <div id="ignore12" style="background: #000; color: #333">hello</div>
+  </div>
+</div>
diff --git a/test/rule-matches/color-contrast-matches.js b/test/rule-matches/color-contrast-matches.js
@@ -404,6 +404,20 @@ describe('color-contrast-matches', function () {
     assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
   });
 
+  it('should not match inert', function () {
+    fixture.innerHTML = '<div inert>hi</div>';
+    var target = fixture.querySelector('div');
+    axe.testUtils.flatTreeSetup(fixture);
+    assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+  });
+
+  it('should not match a descendant of inert', function () {
+    fixture.innerHTML = '<div inert><span>hi</span></div>';
+    var target = fixture.querySelector('span');
+    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 =