ensure pseudo elements also return required contrast information (#3453)

* ensure pseudo elements also return required contrast information * Update test/checks/color/color-contrast.js Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com> * remove rule description changes Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>
dequelabs · May 12, 2022 · 1a9d95e · 1a9d95e
1 parent 5a4babb
commit 1a9d95e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
@@ -40,14 +40,33 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     return undefined;
   }
 
+  const nodeStyle = window.getComputedStyle(node);
+  const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
+  const fontWeight = nodeStyle.getPropertyValue('font-weight');
+  const bold = parseFloat(fontWeight) >= boldValue || fontWeight === 'bold';
+
+  const ptSize = Math.ceil(fontSize * 72) / 96;
+  const isSmallFont =
+    (bold && ptSize < boldTextPt) || (!bold && ptSize < largeTextPt);
+
+  const { expected, minThreshold, maxThreshold } = isSmallFont
+    ? contrastRatio.normal
+    : contrastRatio.large;
+
   // if element or a parent has pseudo content then we need to mark
   // as needs review
   const pseudoElm = findPseudoElement(virtualNode, {
     ignorePseudo,
     pseudoSizeThreshold
   });
   if (pseudoElm) {
-    this.data({ messageKey: 'pseudoContent' });
+    this.data({
+      fontSize: `${((fontSize * 72) / 96).toFixed(1)}pt (${fontSize}px)`,
+      fontWeight: bold ? 'bold' : 'normal',
+      messageKey: 'pseudoContent',
+      expectedContrastRatio: expected + ':1'
+    });
+
     this.relatedNodes(pseudoElm.actualNode);
     return undefined;
   }
@@ -61,11 +80,6 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     maxRatio: shadowOutlineEmMax
   });
 
-  const nodeStyle = window.getComputedStyle(node);
-  const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
-  const fontWeight = nodeStyle.getPropertyValue('font-weight');
-  const bold = parseFloat(fontWeight) >= boldValue || fontWeight === 'bold';
-
   let contrast = null;
   let contrastContributor = null;
   let shadowColor = null;
@@ -84,13 +98,6 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     }
   }
 
-  const ptSize = Math.ceil(fontSize * 72) / 96;
-  const isSmallFont =
-    (bold && ptSize < boldTextPt) || (!bold && ptSize < largeTextPt);
-
-  const { expected, minThreshold, maxThreshold } = isSmallFont
-    ? contrastRatio.normal
-    : contrastRatio.large;
   const isValid = contrast > expected;
 
   // ratio is outside range

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -409,7 +409,10 @@ describe('color-contrast', function() {
 
       assert.isUndefined(contrastEvaluate.apply(checkContext, params));
       assert.deepEqual(checkContext._data, {
-        messageKey: 'pseudoContent'
+        fontSize: '12.0pt (16px)',
+        fontWeight: 'normal',
+        messageKey: 'pseudoContent',
+        expectedContrastRatio: '4.5:1'
       });
       assert.equal(
         checkContext._relatedNodes[0],
@@ -425,7 +428,10 @@ describe('color-contrast', function() {
 
       assert.isUndefined(contrastEvaluate.apply(checkContext, params));
       assert.deepEqual(checkContext._data, {
-        messageKey: 'pseudoContent'
+        fontSize: '12.0pt (16px)',
+        fontWeight: 'normal',
+        messageKey: 'pseudoContent',
+        expectedContrastRatio: '4.5:1'
       });
       assert.equal(
         checkContext._relatedNodes[0],
@@ -449,7 +455,10 @@ describe('color-contrast', function() {
 
       assert.isUndefined(contrastEvaluate.apply(checkContext, params));
       assert.deepEqual(checkContext._data, {
-        messageKey: 'pseudoContent'
+        fontSize: '12.0pt (16px)',
+        fontWeight: 'normal',
+        messageKey: 'pseudoContent',
+        expectedContrastRatio: '4.5:1'
       });
       assert.equal(
         checkContext._relatedNodes[0],
@@ -880,7 +889,7 @@ describe('color-contrast', function() {
       assert.equal(checkContext._data.messageKey, 'shadowOnBgColor');
     });
 
-    it('fails if thick text shadows don\'t have sufficient contrast', function() {
+    it("fails if thick text shadows don't have sufficient contrast", function() {
       var params = checkSetup(
         '<div id="target" style="background-color: #aaa; color:#666; ' +
           'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +
@@ -890,7 +899,7 @@ describe('color-contrast', function() {
       assert.isTrue(contrastEvaluate.apply(checkContext, params));
     });
 
-    it('passes if thin text shadows don\'t have sufficient contrast, but the text and background do', function() {
+    it("passes if thin text shadows don't have sufficient contrast, but the text and background do", function() {
       var params = checkSetup(
         '<div id="target" style="background-color: #aaa; color:#666; ' +
           'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +