fix(color-contrast): ignore nodes that don't contain text (#1837)

dequelabs · Oct 11, 2019 · 223a4bc · 223a4bc
1 parent 8df4fb5
commit 223a4bc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/lib/rules/color-contrast-matches.js b/lib/rules/color-contrast-matches.js
@@ -93,7 +93,15 @@ if (node.getAttribute('id')) {
 	}
 }
 
-if (axe.commons.text.visibleVirtual(virtualNode, false, true) === '') {
+const visibleText = axe.commons.text.visibleVirtual(virtualNode, false, true);
+if (
+	visibleText === '' ||
+	axe.commons.text.removeUnicode(visibleText, {
+		emoji: true,
+		nonBmp: true,
+		punctuations: true
+	}) === ''
+) {
 	return false;
 }
 

diff --git a/test/rule-matches/color-contrast-matches.js b/test/rule-matches/color-contrast-matches.js
@@ -39,6 +39,33 @@ describe('color-contrast-matches', function() {
 		assert.isTrue(rule.matches(target, axe.utils.getNodeFromTree(target)));
 	});
 
+	it('should not match when text only contains emoji', function() {
+		fixture.innerHTML =
+			'<div style="color: yellow; background-color: white;" id="target">' +
+			'🌎</div>';
+		var target = fixture.querySelector('#target');
+		axe.testUtils.flatTreeSetup(fixture);
+		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+	});
+
+	it('should not match when text only contains punctuation', function() {
+		fixture.innerHTML =
+			'<div style="color: yellow; background-color: white;" id="target">' +
+			'&rlm;</div>';
+		var target = fixture.querySelector('#target');
+		axe.testUtils.flatTreeSetup(fixture);
+		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+	});
+
+	it('should not match when text only contains nonBmp unicode', function() {
+		fixture.innerHTML =
+			'<div style="color: yellow; background-color: white;" id="target">' +
+			'◓</div>';
+		var target = fixture.querySelector('#target');
+		axe.testUtils.flatTreeSetup(fixture);
+		assert.isFalse(rule.matches(target, axe.utils.getNodeFromTree(target)));
+	});
+
 	it('should not match when there is text that is out of the container', function() {
 		fixture.innerHTML =
 			'<div style="color: yellow; text-indent: -9999px; background-color: white;" id="target">' +