fix(color-contrast): mark as needs review for text that contains only…

… non-BMP characters (#2005)

* fix(color-contrast): mark as needs review for text that contains only non-BMP characters

* Update lib/checks/color/color-contrast.json

Co-Authored-By: Wilco Fiers <WilcoFiers@users.noreply.github.com>

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

lib/checks/color/color-contrast.js

@@ -6,14 +6,17 @@ if (!dom.isVisible(node, false)) {
 
 const visibleText = text.visibleVirtual(virtualNode, false, true);
 const ignoreUnicode = !!(options || {}).ignoreUnicode;
-const textContainsOnlyUnicode = !text.removeUnicode(visibleText, {
-	emoji: false,
-	nonBmp: true,
-	punctuations: false
-}).length;
+const textContainsOnlyUnicode = !text.sanitize(
+	text.removeUnicode(visibleText, {
+		emoji: false,
+		nonBmp: true,
+		punctuations: false
+	})
+).length;
 
 if (textContainsOnlyUnicode && ignoreUnicode) {
-	return true;
+	this.data({ messageKey: 'nonBmp' });
+	return undefined;
 }
 
 const noScroll = !!(options || {}).noScroll;

lib/checks/color/color-contrast.json

@@ -22,7 +22,8 @@
 				"elmPartiallyObscuring": "Element's background color could not be determined because it partially overlaps other elements",
 				"outsideViewport": "Element's background color could not be determined because it's outside the viewport",
 				"equalRatio": "Element has a 1:1 contrast ratio with the background",
-				"shortTextContent": "Element content is too short to determine if it is actual text content"
+				"shortTextContent": "Element content is too short to determine if it is actual text content",
+				"nonBmp": "Element content contains only non-text characters"
 			}
 		}
 	}

lib/commons/text/unicode.js

@@ -93,7 +93,8 @@ function getUnicodeNonBmpRegExp() {
 		'\u2600-\u26FF' + // Misc Symbols
 		'\u2700-\u27BF' + // Dingbats
 		'\uE000-\uF8FF' + // Private Use
-			']'
+			']',
+		'g'
 	);
 }
 

test/checks/color/color-contrast.js

@@ -328,16 +328,19 @@ describe('color-contrast', function() {
 		assert.equal(checkContext._data.messageKey, 'shortTextContent');
 	});
 
-	it('should return undefined when the text only contains nonBmp unicode by default', function() {
+	it('should return undefined when the text only contains nonBmp unicode when the ignoreUnicode option is true', function() {
 		var params = checkSetup(
 			'<div style="background-color: #FFF;">' +
-				'<div style="color:#DDD;" id="target">◓</div>' +
-				'</div>'
+				'<div style="color:#DDD;" id="target">&#x20A0; &#x20A1; &#x20A2; &#x20A3;</div>' +
+				'</div>',
+			{
+				ignoreUnicode: true
+			}
 		);
 
 		var actual = contrastEvaluate.apply(checkContext, params);
 		assert.isUndefined(actual);
-		assert.equal(checkContext._data.messageKey, 'shortTextContent');
+		assert.equal(checkContext._data.messageKey, 'nonBmp');
 	});
 
 	it('should return true when the text only contains nonBmp unicode when the ignoreUnicode option is false, and there is sufficient contrast', function() {

test/commons/text/unicode.js

@@ -160,7 +160,7 @@ describe('text.hasUnicode', function() {
 
 describe('text.removeUnicode', function() {
 	it('returns string by removing non BMP unicode ', function() {
-		var actual = axe.commons.text.removeUnicode('₨20000', {
+		var actual = axe.commons.text.removeUnicode('₨₨20000₨₨', {
 			nonBmp: true
 		});
 		assert.equal(actual, '20000');