[Refactor] use messageId instead of message

Co-authored-by: Michaël De Boey <[email protected]>
Co-authored-by: Jordan Harband <[email protected]>

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',
 };
 

__tests__/src/rules/html-has-lang-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/html-has-lang';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: '<html> elements must have the lang prop.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/iframe-has-title-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/iframe-has-title';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: '<iframe> elements must have a unique title property.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/img-redundant-alt-test.js

@@ -32,7 +32,7 @@ const componentsSettings = {
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/lang-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/lang';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'lang attribute must have a valid value.',
+  messageId: 'error',
   type: 'JSXAttribute',
 };
 

__tests__/src/rules/no-access-key-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/no-access-key';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard commands used by screen readers and keyboard-only users create a11y complications.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/no-aria-hidden-on-focusable-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/no-aria-hidden-on-focusable';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'aria-hidden="true" must not be set on focusable elements.',
+  messageId: 'error',
   type: 'JSXOpeningElement',
 };
 

__tests__/src/rules/no-autofocus-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/no-autofocus';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.',
+  messageId: 'error',
   type: 'JSXAttribute',
 };
 

__tests__/src/rules/no-distracting-elements-test.js

@@ -19,7 +19,8 @@ import rule from '../../../src/rules/no-distracting-elements';
 const ruleTester = new RuleTester();
 
 const expectedError = (element) => ({
-  message: `Do not use <${element}> elements as they can create visual accessibility issues and are deprecated.`,
+  messageId: 'error',
+  data: { element },
   type: 'JSXOpeningElement',
 });
 

__tests__/src/rules/prefer-tag-over-role-test.js

@@ -6,7 +6,8 @@ import rule from '../../../src/rules/prefer-tag-over-role';
 const ruleTester = new RuleTester();
 
 const expectedError = (role, tag) => ({
-  message: `Use ${tag} instead of the "${role}" role to ensure accessibility across all devices.`,
+  messageId: 'error',
+  data: { tag, role },
   type: 'JSXOpeningElement',
 });
 

__tests__/src/rules/role-has-required-aria-props-test.js

@@ -25,7 +25,8 @@ const errorMessage = (role) => {
   const requiredProps = Object.keys(roles.get(role).requiredProps);
 
   return {
-    message: `Elements with the ARIA role "${role}" must have the following attributes defined: ${requiredProps}`,
+    messageId: 'error',
+    data: { role, requiredProps },
     type: 'JSXAttribute',
   };
 };

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

@@ -23,16 +23,9 @@ import rule from '../../../src/rules/role-supports-aria-props';
 
 const ruleTester = new RuleTester();
 
-const generateErrorMessage = (attr, role, tag, isImplicit) => {
-  if (isImplicit) {
-    return `The attribute ${attr} is not supported by the role ${role}. This role is implicit on the element ${tag}.`;
-  }
-
-  return `The attribute ${attr} is not supported by the role ${role}.`;
-};
-
 const errorMessage = (attr, role, tag, isImplicit) => ({
-  message: generateErrorMessage(attr, role, tag, isImplicit),
+  messageId: isImplicit ? 'implicit' : 'explicit',
+  data: { attr, role, tag },
   type: 'JSXOpeningElement',
 });
 

__tests__/src/rules/scope-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/scope';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'The scope prop can only be used on <th> elements.',
+  messageId: 'error',
   type: 'JSXAttribute',
 };
 

__tests__/src/rules/tabindex-no-positive-test.js

@@ -19,7 +19,7 @@ import rule from '../../../src/rules/tabindex-no-positive';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Avoid positive integer values for tabIndex.',
+  messageId: 'error',
   type: 'JSXAttribute',
 };