fix(color-contrast): skip ligature icons (#3867)

dequelabs · Jan 23, 2023 · 7dfbd9a · 7dfbd9a
1 parent 46c9499
commit 7dfbd9a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js
@@ -1,7 +1,12 @@
 /* global document */
 import { getAccessibleRefs } from '../commons/aria';
 import { findUpVirtual, visuallyOverlaps, getRootNode } from '../commons/dom';
-import { visibleVirtual, removeUnicode, sanitize } from '../commons/text';
+import {
+  visibleVirtual,
+  removeUnicode,
+  sanitize,
+  isIconLigature
+} from '../commons/text';
 import { isDisabled } from '../commons/forms';
 import { getNodeFromTree, querySelectorAll, tokenList } from '../core/utils';
 
@@ -121,13 +126,7 @@ function colorContrastMatches(node, virtualNode) {
     return false;
   }
 
-  const visibleText = visibleVirtual(virtualNode, false, true);
-  const removeUnicodeOptions = {
-    emoji: true,
-    nonBmp: false,
-    punctuations: true
-  };
-  if (!visibleText || !removeUnicode(visibleText, removeUnicodeOptions)) {
+  if (!hasRealTextChildren(virtualNode)) {
     return false;
   }
 
@@ -154,3 +153,22 @@ function colorContrastMatches(node, virtualNode) {
 }
 
 export default colorContrastMatches;
+
+const removeUnicodeOptions = {
+  emoji: true,
+  nonBmp: false,
+  punctuations: true
+};
+
+function hasRealTextChildren(virtualNode) {
+  const visibleText = visibleVirtual(virtualNode, false, true);
+  if (
+    visibleText === '' ||
+    removeUnicode(visibleText, removeUnicodeOptions) === ''
+  ) {
+    return false;
+  }
+  return virtualNode.children.some(
+    vChild => vChild.props.nodeName === '#text' && !isIconLigature(vChild)
+  );
+}
diff --git a/test/rule-matches/color-contrast-matches.js b/test/rule-matches/color-contrast-matches.js
@@ -537,4 +537,32 @@ describe('color-contrast-matches', function () {
       assert.isTrue(rule.matches(input, axe.utils.getNodeFromTree(input)));
     });
   }
+
+  describe('with font icons', () => {
+    before(async () => {
+      const materialFont = new FontFace(
+        'Material Icons',
+        'url(/test/assets/MaterialIcons.woff2)'
+      );
+      await materialFont.load();
+      document.fonts.add(materialFont);
+    });
+
+    it('is false for a single icon', () => {
+      fixture.innerHTML =
+        '<div id="target" style="font-family: \'Material Icons\'">delete</div>';
+      const target = fixture.querySelector('#target');
+      axe.testUtils.flatTreeSetup(fixture);
+      assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+    });
+
+    it('is false for multiple icons', () => {
+      fixture.innerHTML = `<div id="target" style="font-family: \'Material Icons\'">
+          check star favorite
+        </div>`;
+      const target = fixture.querySelector('#target');
+      axe.testUtils.flatTreeSetup(fixture);
+      assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+    });
+  });
 });