Added reviewPayload and updated metadata

Author: mattscepter

build/tasks/validate.js

@@ -227,6 +227,15 @@ function createSchemas() {
           description: {
             required: true,
             type: 'string'
+          },
+          violationConfidence: {
+            type: 'number',
+          },
+          needsReviewConfidence: {
+            type: 'number',
+          },
+          defaultCategory: {
+            type: 'string',
           }
         }
       }

lib/checks/aria/aria-prohibited-attr-evaluate.js

@@ -59,7 +59,16 @@ export default function ariaProhibitedAttrEvaluate(
 
   let messageKey = role !== null ? 'hasRole' : 'noRole';
   messageKey += prohibited.length > 1 ? 'Plural' : 'Singular';
-  this.data({ role, nodeName, messageKey, prohibited });
+  // a11y-rule-aria-prohibited-attr: Add reviewPayload with accessible name from prohibited attr value
+  const accessibleName =
+    axe.commons.text.accessibleText(node)
+  this.data({
+    role,
+    nodeName,
+    messageKey,
+    prohibited,
+    reviewPayload: { visualHelperData: { accessibleName } }
+  });
 
   // `subtreeDescendant` to override namedFromContents
   const textContent = subtreeText(virtualNode, { subtreeDescendant: true });

lib/checks/color/color-contrast-evaluate.js

@@ -148,7 +148,16 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
       fontWeight: bold ? 'bold' : 'normal',
       messageKey: missing,
       expectedContrastRatio: expected + ':1',
-      shadowColor: shadowColor ? shadowColor.toHexString() : undefined
+      shadowColor: shadowColor ? shadowColor.toHexString() : undefined,
+      // a11y-rule-color-contrast: reviewPayload for bulk NR visual helper (violation and needs-review)
+      reviewPayload: {
+        visualHelperData: {
+          fgColor: fgColor ? fgColor.toHexString() : null,
+          bgColor: bgColor ? bgColor.toHexString() : null,
+          isLargeText: !isSmallFont,
+          textContent: visibleText ? visibleText.slice(0, 100) : null
+        }
+      }
     });
 
     // We don't know, so we'll put it into Can't Tell

lib/checks/label/label-content-name-mismatch-evaluate.js

@@ -140,10 +140,29 @@ function labelContentNameMismatchEvaluate(node, options, virtualNode) {
     isHumanInterpretable(accText) < 1 ||
     isHumanInterpretable(visibleText) < 1
   ) {
+    // a11y-rule-label-content-name-mismatch: reviewPayload for NR accessible name display
+    this.data({
+      reviewPayload: {
+        visualHelperData: {
+          accessibleName: accText
+        }
+      }
+    });
     return undefined;
   }
 
-  return isStringContained(visibleText, accText);
+  const result = isStringContained(visibleText, accText);
+  if (!result) {
+    // a11y-rule-label-content-name-mismatch: reviewPayload for violation accessible name display
+    this.data({
+      reviewPayload: {
+        visualHelperData: {
+          accessibleName: accText
+        }
+      }
+    });
+  }
+  return result;
 }
 
 export default labelContentNameMismatchEvaluate;

lib/rules/aria-prohibited-attr.json

@@ -14,7 +14,10 @@
   "actIds": ["5c01ea"],
   "metadata": {
     "description": "Ensure ARIA attributes are not prohibited for an element's role",
-    "help": "Elements must only use permitted ARIA attributes"
+    "help": "Elements must only use permitted ARIA attributes",
+    "violationConfidence": 90,
+    "needsReviewConfidence": 60,
+    "defaultCategory": "names-and-labels"
   },
   "all": [],
   "any": [],

lib/rules/color-contrast-enhanced.json

@@ -8,7 +8,9 @@
   "actIds": ["09o5cg"],
   "metadata": {
     "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds",
-    "help": "Elements must meet enhanced color contrast ratio thresholds"
+    "help": "Elements must meet enhanced color contrast ratio thresholds",
+    "needsReviewConfidence": 50,
+    "defaultCategory": "text-contrast-enhanced"
   },
   "all": [],
   "any": ["color-contrast-enhanced"],

lib/rules/color-contrast.json

@@ -18,7 +18,9 @@
   "actIds": ["afw4f7", "09o5cg"],
   "metadata": {
     "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-    "help": "Elements must meet minimum color contrast ratio thresholds"
+    "help": "Elements must meet minimum color contrast ratio thresholds",
+    "needsReviewConfidence": 50,
+    "defaultCategory": "text-contrast"
   },
   "all": [],
   "any": ["color-contrast"],

lib/rules/label-content-name-mismatch.json

@@ -17,7 +17,10 @@
   "actIds": ["2ee8b8"],
   "metadata": {
     "description": "Ensure that elements labelled through their content must have their visible text as part of their accessible name",
-    "help": "Elements must have their visible text as part of their accessible name"
+    "help": "Elements must have their visible text as part of their accessible name",
+    "violationConfidence": 80,
+    "needsReviewConfidence": 50,
+    "defaultCategory": "names-and-labels"
   },
   "all": [],
   "any": ["label-content-name-mismatch"],

lib/rules/link-in-text-block.json

@@ -17,7 +17,9 @@
   ],
   "metadata": {
     "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
-    "help": "Links must be distinguishable without relying on color"
+    "help": "Links must be distinguishable without relying on color",
+    "needsReviewConfidence": 50,
+    "defaultCategory": "links"
   },
   "any": ["link-in-text-block", "link-in-text-block-style"],
   "all": [

locales/_template.json

@@ -59,7 +59,10 @@
     },
     "aria-prohibited-attr": {
       "description": "Ensure ARIA attributes are not prohibited for an element's role",
-      "help": "Elements must only use permitted ARIA attributes"
+      "help": "Elements must only use permitted ARIA attributes",
+      "violationConfidence": 90,
+      "needsReviewConfidence": 60,
+      "defaultCategory": "names-and-labels"
     },
     "aria-required-attr": {
       "description": "Ensure elements with ARIA roles have all required ARIA attributes",
@@ -131,11 +134,17 @@
     },
     "color-contrast-enhanced": {
       "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds",
-      "help": "Elements must meet enhanced color contrast ratio thresholds"
+      "help": "Elements must meet enhanced color contrast ratio thresholds",
+      "violationConfidence": 90,
+      "needsReviewConfidence": 60,
+      "defaultCategory": "text-contrast-enhanced"
     },
     "color-contrast": {
       "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "help": "Elements must meet minimum color contrast ratio thresholds"
+      "help": "Elements must meet minimum color contrast ratio thresholds",
+      "violationConfidence": 90,
+      "needsReviewConfidence": 60,
+      "defaultCategory": "text-contrast"
     },
     "css-orientation-lock": {
       "description": "Ensure content is not locked to any specific display orientation, and the content is operable in all display orientations",
@@ -243,7 +252,10 @@
     },
     "label-content-name-mismatch": {
       "description": "Ensure that elements labelled through their content must have their visible text as part of their accessible name",
-      "help": "Elements must have their visible text as part of their accessible name"
+      "help": "Elements must have their visible text as part of their accessible name",
+      "violationConfidence": 90,
+      "needsReviewConfidence": 60,
+      "defaultCategory": "names-and-labels"
     },
     "label-title-only": {
       "description": "Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes",
@@ -291,7 +303,10 @@
     },
     "link-in-text-block": {
       "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
-      "help": "Links must be distinguishable without relying on color"
+      "help": "Links must be distinguishable without relying on color",
+      "violationConfidence": 90,
+      "needsReviewConfidence": 60,
+      "defaultCategory": "links"
     },
     "link-name": {
       "description": "Ensure links have discernible text",