fix(deprecatedrole,color-contrast): fix message to properly include d…

…eprecated role, improve color-contrast pass messages (#3387) * fix(deprecatedrole): fix message to properly include deprecated role * add tests * ie11
dequelabs · Feb 28, 2022 · c8b4b27 · c8b4b27
1 parent 3c0f10f
commit c8b4b27
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/lib/checks/aria/deprecatedrole.json b/lib/checks/aria/deprecatedrole.json
@@ -5,7 +5,7 @@
     "impact": "minor",
     "messages": {
       "pass": "ARIA role is not deprecated",
-      "fail": "The role used is deprecated: ${data.values}"
+      "fail": "The role used is deprecated: ${data}"
     }
   }
 }
diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
@@ -30,6 +30,7 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
   } = options;
 
   if (!isVisible(node, false)) {
+    this.data({ messageKey: 'hidden' });
     return true;
   }
 
@@ -97,6 +98,7 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     (typeof minThreshold === 'number' && contrast < minThreshold) ||
     (typeof maxThreshold === 'number' && contrast > maxThreshold)
   ) {
+    this.data({ contrastRatio: contrast });
     return true;
   }
 

diff --git a/lib/checks/color/color-contrast.json b/lib/checks/color/color-contrast.json
@@ -22,7 +22,10 @@
   "metadata": {
     "impact": "serious",
     "messages": {
-      "pass": "Element has sufficient color contrast of ${data.contrastRatio}",
+      "pass": {
+        "default": "Element has sufficient color contrast of ${data.contrastRatio}",
+        "hidden": "Element is hidden"
+      },
       "fail": {
         "default": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
         "fgOnShadowColor": "Element has insufficient color contrast of ${data.contrastRatio} between the foreground and shadow color (foreground color: ${data.fgColor}, text-shadow color: ${data.shadowColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",

diff --git a/test/testutils.js b/test/testutils.js
@@ -483,6 +483,31 @@ testUtils.getCheckEvaluate = function getCheckEvaluate(checkId, testOptions) {
             result +
             noneCheckMessage
         );
+
+        var message = axe.utils.processMessage(
+          messages[key][messageKey],
+          this._data
+        );
+        assert.isTrue(
+          message.indexOf('${') === -1,
+          'Data object missing properties for ' +
+            key +
+            ' message key "' +
+            messageKey +
+            '": "' +
+            message +
+            '"'
+        );
+      } else {
+        var message = axe.utils.processMessage(messages[key], this._data);
+        assert.isTrue(
+          message.indexOf('${') === -1,
+          'Data object missing properties for ' +
+            key +
+            ' message: "' +
+            message +
+            '"'
+        );
       }
     }