[Refactor] use messageId instead of message

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
Co-authored-by: Jordan Harband <ljharb@gmail.com>

Author: MichaelDeBoey

__tests__/src/rules/alt-text-test.js

@@ -18,39 +18,40 @@ import rule from '../../../src/rules/alt-text';
 
 const ruleTester = new RuleTester();
 
-const missingPropError = (type) => ({
-  message: `${type} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
+const missingPropError = (nodeType) => ({
+  messageId: 'img-no-alt',
+  data: { nodeType },
   type: 'JSXOpeningElement',
 });
 
-const altValueError = (type) => ({
-  message: `Invalid alt value for ${type}. \
-Use alt="" for presentational images.`,
+const altValueError = (nodeType) => ({
+  messageId: 'img-invalid-alt',
+  data: { nodeType },
   type: 'JSXOpeningElement',
 });
 
 const ariaLabelValueError = {
-  message: 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.',
+  messageId: 'img-no-aria-label-value',
 };
 const ariaLabelledbyValueError = {
-  message: 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.',
+  messageId: 'img-no-aria-labelledby-value',
 };
 
 const preferAltError = () => ({
-  message: 'Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.',
+  messageId: 'img-presentation-role',
   type: 'JSXOpeningElement',
 });
 
 const objectError = {
-  message: 'Embedded <object> elements must have alternative text by providing inner text, aria-label or aria-labelledby props.',
+  messageId: 'object',
 };
 
 const areaError = {
-  message: 'Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
+  messageId: 'area',
 };
 
 const inputImageError = {
-  message: '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
+  messageId: 'input-image',
 };
 
 const componentsSettings = {

__tests__/src/rules/anchor-has-content-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/anchor-has-content';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Anchors must have content and the content must be accessible by a screen reader.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/aria-activedescendant-has-tabindex-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/aria-activedescendant-has-tabindex';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'An element that manages focus with `aria-activedescendant` must have a tabindex',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/aria-props-test.js

@@ -23,18 +23,22 @@ const ariaAttributes = [...aria.keys()];
 
 const errorMessage = (name) => {
   const suggestions = getSuggestion(name, ariaAttributes);
-  const message = `${name}: This attribute is an invalid ARIA attribute.`;
 
   if (suggestions.length > 0) {
     return {
       type: 'JSXAttribute',
-      message: `${message} Did you mean to use ${suggestions}?`,
+      messageId: 'error-with-suggestions',
+      data: {
+        name,
+        suggestions,
+      },
     };
   }
 
   return {
     type: 'JSXAttribute',
-    message,
+    messageId: 'error',
+    data: { name },
   };
 };
 

__tests__/src/rules/aria-proptypes-test.js

@@ -29,27 +29,10 @@ const errorMessage = (name) => {
     values: permittedValues,
   } = aria.get(name.toLowerCase());
 
-  switch (type) {
-    case 'tristate':
-      return { message: `The value for ${name} must be a boolean or the string "mixed".` };
-    case 'token':
-      return { message: `The value for ${name} must be a single token from the following: ${permittedValues}.` };
-    case 'tokenlist':
-      return {
-        message: `The value for ${name} must be a list of one or more \
-tokens from the following: ${permittedValues}.`,
-      };
-    case 'idlist':
-      return { message: `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)` };
-    case 'id':
-      return { message: `The value for ${name} must be a string that represents a DOM element ID` };
-    case 'boolean':
-    case 'string':
-    case 'integer':
-    case 'number':
-    default:
-      return { message: `The value for ${name} must be a ${type}.` };
-  }
+  return {
+    messageId: type,
+    data: { name, permittedValues, type },
+  };
 };
 
 test('validityCheck', (t) => {

__tests__/src/rules/aria-role-test.js

@@ -20,7 +20,7 @@ import rule from '../../../src/rules/aria-role';
 const ruleTester = new RuleTester();
 
 const errorMessage = {
-  message: 'Elements with ARIA roles must use a valid, non-abstract ARIA role.',
+  messageId: 'error',
   type: 'JSXAttribute',
 };
 

__tests__/src/rules/aria-unsupported-elements-test.js

@@ -21,8 +21,8 @@ import rule from '../../../src/rules/aria-unsupported-elements';
 const ruleTester = new RuleTester();
 
 const errorMessage = (invalidProp) => ({
-  message: `This element does not support ARIA roles, states and properties. \
-Try removing the prop '${invalidProp}'.`,
+  messageId: 'error',
+  data: { invalidProp },
   type: 'JSXOpeningElement',
 });
 

__tests__/src/rules/autocomplete-valid-test.js

@@ -20,12 +20,14 @@ import rule from '../../../src/rules/autocomplete-valid';
 const ruleTester = new RuleTester();
 
 const invalidAutocomplete = [{
-  message: axeFailMessage('autocomplete-valid'),
+  messageId: 'error',
+  data: { message: axeFailMessage('autocomplete-valid') },
   type: 'JSXOpeningElement',
 }];
 
 const inappropriateAutocomplete = [{
-  message: axeFailMessage('autocomplete-appropriate'),
+  messageId: 'error',
+  data: { message: axeFailMessage('autocomplete-appropriate') },
   type: 'JSXOpeningElement',
 }];
 

__tests__/src/rules/click-events-have-key-events-test.js

@@ -18,10 +18,8 @@ import rule from '../../../src/rules/click-events-have-key-events';
 
 const ruleTester = new RuleTester();
 
-const errorMessage = 'Visible, non-interactive elements with click handlers must have at least one keyboard listener.';
-
 const expectedError = {
-  message: errorMessage,
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/heading-has-content-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/heading-has-content';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Headings must have content and the content must be accessible by a screen reader.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };