diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js index c3fd792410..9a75b04b2f 100644 --- 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 index b4ec638294..c9afeba4d8 100644 --- 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 = + '