Merge pull request #2501 from johanrd/fix/2471

Post-merge review of #2471 (`template-no-invalid-aria-attributes`)

Author: NullVoxPopuli

lib/rules/template-no-invalid-aria-attributes.js

@@ -62,6 +62,37 @@ function isValidAriaValue(attrName, value) {
   }
 }
 
+function getExpectedTypeDescription(attrName) {
+  const attrDef = aria.get(attrName);
+  if (!attrDef) {
+    return 'a valid value';
+  }
+  switch (attrDef.type) {
+    case 'tristate': {
+      return 'a boolean or the string "mixed".';
+    }
+    case 'token': {
+      const vals = attrDef.values.map((v) => (typeof v === 'boolean' ? v.toString() : v));
+      return `a single token from the following: ${vals.join(', ')}.`;
+    }
+    case 'tokenlist': {
+      return `a list of one or more tokens from the following: ${attrDef.values.join(', ')}.`;
+    }
+    case 'idlist': {
+      return 'a list of strings that represent DOM element IDs (idlist)';
+    }
+    case 'id': {
+      return 'a string that represents a DOM element ID';
+    }
+    case 'integer': {
+      return 'an integer.';
+    }
+    default: {
+      return `a ${attrDef.type}.`;
+    }
+  }
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -75,7 +106,7 @@ module.exports = {
     schema: [],
     messages: {
       noInvalidAriaAttribute: 'Invalid ARIA attribute: {{attribute}}',
-      invalidAriaAttributeValue: 'Invalid value for ARIA attribute {{attribute}}.',
+      invalidAriaAttributeValue: 'The value for {{attribute}} must be {{expectedType}}',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -118,7 +149,10 @@ module.exports = {
             context.report({
               node,
               messageId: 'invalidAriaAttributeValue',
-              data: { attribute: node.name },
+              data: {
+                attribute: node.name,
+                expectedType: getExpectedTypeDescription(node.name),
+              },
             });
           }
         }

tests/lib/rules/template-no-invalid-aria-attributes.js

@@ -171,52 +171,52 @@ hbsRuleTester.run('template-no-invalid-aria-attributes', rule, {
     {
       code: '<span role="checkbox" aria-checked="bad-value" tabindex="0" aria-label="Forget me"></span>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-checked.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<button type="submit" disabled="true" aria-disabled="123">Submit</button>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-disabled.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<input type="text" disabled="true" aria-errormessage="false" />',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-errormessage.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<button type="submit" aria-describedby="blah false">Continue at your own risk</button>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-describedby.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<div role="heading" aria-level="bogus">Inaccessible heading</div>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-level.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<div role="heading" aria-level="true">Another inaccessible heading</div>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-level.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<div role="slider" aria-valuenow=(2*2)  aria-valuemax="100" aria-valuemin="30">Broken slider</div>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-valuenow.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<div role="region" aria-live="no-such-value">Inaccessible live region</div>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-live.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<div role="region" aria-live="polite" aria-relevant="additions errors">Inaccessible live region</div>',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-relevant.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
     {
       code: '<input type="text" aria-required="undefined" />',
       output: null,
-      errors: [{ message: 'Invalid value for ARIA attribute aria-required.' }],
+      errors: [{ messageId: 'invalidAriaAttributeValue' }],
     },
   ],
 });