fix: Do not flag font icons in color-contrast rule (#1095)

This fix ensures that font icons and other single character elements are put into needs review for the color-contrast rule. 

Closes #1068

## Reviewer checks

**Required fields, to be filled out by PR reviewer(s)**
- [x] Follows the commit message policy, appropriate for next version
- [x] Has documentation updated, a DU ticket, or requires no documentation change
- [x] Includes new tests, or was unnecessary
- [x] Code is reviewed for security by: @dylanb

lib/checks/color/color-contrast.js

@@ -1,42 +1,44 @@
-if (!axe.commons.dom.isVisible(node, false)) {
+const { dom, color, text } = axe.commons;
+
+if (!dom.isVisible(node, false)) {
 	return true;
 }
 
-var noScroll = !!(options || {}).noScroll;
-var bgNodes = [],
-	bgColor = axe.commons.color.getBackgroundColor(node, bgNodes, noScroll),
-	fgColor = axe.commons.color.getForegroundColor(node, noScroll);
+const noScroll = !!(options || {}).noScroll;
+const bgNodes = [];
+const bgColor = color.getBackgroundColor(node, bgNodes, noScroll);
+const fgColor = color.getForegroundColor(node, noScroll);
 
-var nodeStyle = window.getComputedStyle(node);
-var fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
-var fontWeight = nodeStyle.getPropertyValue('font-weight');
-var bold =
+const nodeStyle = window.getComputedStyle(node);
+const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
+const fontWeight = nodeStyle.getPropertyValue('font-weight');
+const bold =
 	['bold', 'bolder', '600', '700', '800', '900'].indexOf(fontWeight) !== -1;
 
-var cr = axe.commons.color.hasValidContrastRatio(
-	bgColor,
-	fgColor,
-	fontSize,
-	bold
-);
+const cr = color.hasValidContrastRatio(bgColor, fgColor, fontSize, bold);
 
 // truncate ratio to three digits while rounding down
 // 4.499 = 4.49, 4.019 = 4.01
-var truncatedResult = Math.floor(cr.contrastRatio * 100) / 100;
+const truncatedResult = Math.floor(cr.contrastRatio * 100) / 100;
 
 // if fgColor or bgColor are missing, get more information.
-var missing;
+let missing;
 if (bgColor === null) {
-	missing = axe.commons.color.incompleteData.get('bgColor');
+	missing = color.incompleteData.get('bgColor');
 }
 
-let equalRatio = false;
-if (truncatedResult === 1) {
-	equalRatio = true;
-	missing = axe.commons.color.incompleteData.set('bgColor', 'equalRatio');
+const equalRatio = truncatedResult === 1;
+const shortTextContent =
+	text.visibleVirtual(virtualNode, false, true).length === 1;
+if (equalRatio) {
+	missing = color.incompleteData.set('bgColor', 'equalRatio');
+} else if (shortTextContent) {
+	// Check that the text content is a single character long
+	missing = 'shortTextContent';
 }
+
 // need both independently in case both are missing
-var data = {
+const data = {
 	fgColor: fgColor ? fgColor.toHexString() : undefined,
 	bgColor: bgColor ? bgColor.toHexString() : undefined,
 	contrastRatio: cr ? truncatedResult : undefined,
@@ -48,13 +50,21 @@ var data = {
 
 this.data(data);
 
-//We don't know, so we'll put it into Can't Tell
-if (fgColor === null || bgColor === null || equalRatio) {
+// We don't know, so we'll put it into Can't Tell
+if (
+	fgColor === null ||
+	bgColor === null ||
+	equalRatio ||
+	(shortTextContent && !cr.isValid)
+) {
 	missing = null;
-	axe.commons.color.incompleteData.clear();
+	color.incompleteData.clear();
 	this.relatedNodes(bgNodes);
 	return undefined;
-} else if (!cr.isValid) {
+}
+
+if (!cr.isValid) {
 	this.relatedNodes(bgNodes);
 }
+
 return cr.isValid;

lib/checks/color/color-contrast.json

@@ -16,6 +16,7 @@
         "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",
         "default": "Unable to determine contrast ratio"
       }
     }