refactor: update eslint-plugin-eslint-plugin

Author: MichaelDeBoey

package.json

@@ -52,7 +52,7 @@
     "eslint": "^8.57.0 || ^9.13.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-doc-generator": "^1.7.1",
-    "eslint-plugin-eslint-plugin": "^4.3.0",
+    "eslint-plugin-eslint-plugin": "^6.3.1",
     "eslint-plugin-flowtype": "^5.8.0 || ^8.0.3",
     "eslint-plugin-import": "^2.31.0",
     "estraverse": "^5.3.0",

src/rules/alt-text.js

@@ -53,8 +53,8 @@ const ruleByElement = {
     if (altProp === undefined) {
       if (isPresentationRole(nodeType, node.attributes)) {
         context.report({
+          messageId: 'img-presentation-role',
           node,
-          message: 'Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.',
         });
         return;
       }
@@ -65,8 +65,8 @@ const ruleByElement = {
       if (ariaLabelProp !== undefined) {
         if (!ariaLabelHasValue(ariaLabelProp)) {
           context.report({
+            messageId: 'img-no-aria-label-value',
             node,
-            message: 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.',
           });
         }
         return;
@@ -78,16 +78,19 @@ const ruleByElement = {
       if (ariaLabelledbyProp !== undefined) {
         if (!ariaLabelHasValue(ariaLabelledbyProp)) {
           context.report({
+            messageId: 'img-no-aria-labelledby-value',
             node,
-            message: 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.',
           });
         }
         return;
       }
 
       context.report({
+        data: {
+          nodeType,
+        },
+        messageId: 'img-no-alt',
         node,
-        message: `${nodeType} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
       });
       return;
     }
@@ -102,8 +105,11 @@ const ruleByElement = {
 
     // Undefined alt prop error.
     context.report({
+      data: {
+        nodeType,
+      },
+      messageId: 'img-invalid-alt',
       node,
-      message: `Invalid alt value for ${nodeType}. Use alt="" for presentational images.`,
     });
   },
 
@@ -119,8 +125,8 @@ const ruleByElement = {
     }
 
     context.report({
+      messageId: 'object',
       node,
-      message: 'Embedded <object> elements must have alternative text by providing inner text, aria-label or aria-labelledby props.',
     });
   },
 
@@ -136,8 +142,8 @@ const ruleByElement = {
     const altProp = getProp(node.attributes, 'alt');
     if (altProp === undefined) {
       context.report({
+        messageId: 'area',
         node,
-        message: 'Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
       });
       return;
     }
@@ -150,8 +156,8 @@ const ruleByElement = {
     }
 
     context.report({
+      messageId: 'area',
       node,
-      message: 'Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
     });
   },
 
@@ -172,8 +178,8 @@ const ruleByElement = {
     const altProp = getProp(node.attributes, 'alt');
     if (altProp === undefined) {
       context.report({
+        messageId: 'input-image',
         node,
-        message: '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
       });
       return;
     }
@@ -186,8 +192,8 @@ const ruleByElement = {
     }
 
     context.report({
+      messageId: 'input-image',
       node,
-      message: '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
     });
   },
 };
@@ -198,6 +204,16 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/alt-text.md',
       description: 'Enforce all elements that require alternative text have meaningful information to relay back to end user.',
     },
+    messages: {
+      area: 'Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
+      'img-invalid-alt': 'Invalid alt value for {{nodeType}}. Use alt="" for presentational images.',
+      'img-presentation-role': 'Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.',
+      'img-no-alt': "'{{nodeType}}' elements must have an alt prop, either with meaningful text, or an empty string for decorative images.",
+      'img-no-aria-label-value': 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.',
+      'img-no-aria-labelledby-value': 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.',
+      'input-image': '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
+      object: 'Embedded <object> elements must have alternative text by providing inner text, aria-label or aria-labelledby props.',
+    },
     schema: [schema],
   },
 

src/rules/anchor-has-content.js

@@ -13,8 +13,6 @@ import getElementType from '../util/getElementType';
 import { arraySchema, generateObjSchema } from '../util/schemas';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 
-const errorMessage = 'Anchors must have content and the content must be accessible by a screen reader.';
-
 const schema = generateObjSchema({ components: arraySchema });
 
 export default {
@@ -23,6 +21,9 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-has-content.md',
       description: 'Enforce all anchors to contain accessible content.',
     },
+    messages: {
+      error: 'Anchors must have content and the content must be accessible by a screen reader.',
+    },
     schema: [schema],
   },
 
@@ -47,8 +48,8 @@ export default {
         }
 
         context.report({
+          messageId: 'error',
           node,
-          message: errorMessage,
         });
       },
     };

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

@@ -14,8 +14,6 @@ import isInteractiveElement from '../util/isInteractiveElement';
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-const errorMessage = 'An element that manages focus with `aria-activedescendant` must have a tabindex';
-
 const schema = generateObjSchema();
 
 export default {
@@ -24,6 +22,9 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-activedescendant-has-tabindex.md',
       description: 'Enforce elements with aria-activedescendant are tabbable.',
     },
+    messages: {
+      error: 'An element that manages focus with `aria-activedescendant` must have a tabindex',
+    },
     schema: [schema],
   },
 
@@ -60,8 +61,8 @@ export default {
         }
 
         context.report({
+          messageId: 'error',
           node,
-          message: errorMessage,
         });
       },
     };

src/rules/aria-props.js

@@ -12,19 +12,6 @@ import { propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 import getSuggestion from '../util/getSuggestion';
 
-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 `${message} Did you mean to use ${suggestions}?`;
-  }
-
-  return message;
-};
-
 const schema = generateObjSchema();
 
 export default {
@@ -33,6 +20,10 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-props.md',
       description: 'Enforce all `aria-*` props are valid.',
     },
+    messages: {
+      error: '{{name}}: This attribute is an invalid ARIA attribute.',
+      'error-with-suggestions': '{{name}}: This attribute is an invalid ARIA attribute. Did you mean to use {{suggestions}}?',
+    },
     schema: [schema],
   },
 
@@ -48,9 +39,14 @@ export default {
       const isValid = aria.has(name);
 
       if (isValid === false) {
+        const suggestions = getSuggestion(name, aria.keys());
+
         context.report({
+          data: {
+            suggestions: suggestions.join(', '),
+          },
+          messageId: suggestions.length === 0 ? 'error' : 'error-with-suggestions',
           node: attribute,
-          message: errorMessage(name),
         });
       }
     },

src/rules/aria-proptypes.js

@@ -11,28 +11,6 @@ import { aria } from 'aria-query';
 import { getLiteralPropValue, getPropValue, propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 
-const errorMessage = (name, type, permittedValues) => {
-  switch (type) {
-    case 'tristate':
-      return `The value for ${name} must be a boolean or the string "mixed".`;
-    case 'token':
-      return `The value for ${name} must be a single token from the following: ${permittedValues}.`;
-    case 'tokenlist':
-      return `The value for ${name} must be a list of one or more \
-tokens from the following: ${permittedValues}.`;
-    case 'idlist':
-      return `The value for ${name} must be a list of strings that represent DOM element IDs (idlist)`;
-    case 'id':
-      return `The value for ${name} must be a string that represents a DOM element ID`;
-    case 'boolean':
-    case 'string':
-    case 'integer':
-    case 'number':
-    default:
-      return `The value for ${name} must be a ${type}.`;
-  }
-};
-
 const validityCheck = (value, expectedType, permittedValues) => {
   switch (expectedType) {
     case 'boolean':
@@ -69,6 +47,17 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-proptypes.md',
       description: 'Enforce ARIA state and property values are valid.',
     },
+    messages: {
+      boolean: "The value for '{{ name }}' must be a boolean.",
+      id: "The value for '{{ name }}' must be a string that represents a DOM element ID",
+      idlist: "The value for '{{ name }}' must be a list of strings that represent DOM element IDs (idlist)",
+      integer: "The value for '{{ name }}' must be a integer.",
+      number: "The value for '{{ name }}' must be a number.",
+      string: "The value for '{{ name }}' must be a string.",
+      token: "The value for '{{ name }}' must be a single token from the following: {{ permittedValues }}.",
+      tokenlist: "The value for '{{ name }}' must be a list of one or more tokens from the following: {{ permittedValues }}.",
+      tristate: "The value for '{{ name }}' must be a boolean or the string 'mixed'.",
+    },
     schema: [schema],
   },
 
@@ -105,8 +94,12 @@ export default {
       }
 
       context.report({
+        data: {
+          name,
+          permittedValues: permittedValues.join(', '),
+        },
+        messageId: permittedType,
         node: attribute,
-        message: errorMessage(name, permittedType, permittedValues),
       });
     },
   }),

src/rules/aria-role.js

@@ -13,8 +13,6 @@ import { getLiteralPropValue, propName } from 'jsx-ast-utils';
 import getElementType from '../util/getElementType';
 import { generateObjSchema } from '../util/schemas';
 
-const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
-
 const schema = generateObjSchema({
   allowedInvalidRoles: {
     items: {
@@ -37,6 +35,9 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-role.md',
       description: 'Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.',
     },
+    messages: {
+      error: 'Elements with ARIA roles must use a valid, non-abstract ARIA role.',
+    },
     schema: [schema],
   },
 
@@ -74,8 +75,8 @@ export default {
         if (isValid === true) { return; }
 
         context.report({
+          messageId: 'error',
           node: attribute,
-          message: errorMessage,
         });
       },
     });

src/rules/aria-unsupported-elements.js

@@ -16,11 +16,6 @@ import { propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 import getElementType from '../util/getElementType';
 
-const errorMessage = (invalidProp) => (
-  `This element does not support ARIA roles, states and properties. \
-Try removing the prop '${invalidProp}'.`
-);
-
 const schema = generateObjSchema();
 
 export default {
@@ -29,6 +24,9 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-unsupported-elements.md',
       description: 'Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.',
     },
+    messages: {
+      error: "This element does not support ARIA roles, states and properties. Try removing the prop '{{ invalidProp }}'.",
+    },
     schema: [schema],
   },
 
@@ -58,8 +56,11 @@ export default {
 
           if (invalidAttributes.has(name)) {
             context.report({
+              data: {
+                invalidProp: name,
+              },
+              messageId: 'error',
               node,
-              message: errorMessage(name),
             });
           }
         });

src/rules/autocomplete-valid.js

@@ -21,6 +21,9 @@ export default {
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/autocomplete-valid.md',
       description: 'Enforce that autocomplete attributes are used correctly.',
     },
+    messages: {
+      error: '{{ message }}',
+    },
     schema: [schema],
   },
 
@@ -54,8 +57,11 @@ export default {
         }
         // Since we only test one rule, with one node, return the message from first (and only) instance of each
         context.report({
+          data: {
+            message: violations[0].nodes[0].all[0].message,
+          },
+          messageId: 'error',
           node,
-          message: violations[0].nodes[0].all[0].message,
         });
       },
     };