More specific tag formatting

Author: JoshuaKGoldberg

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

@@ -1,52 +1,61 @@
-import { RuleTester } from "eslint";
-import parserOptionsMapper from "../../__util__/parserOptionsMapper";
-import rule from "../../../src/rules/prefer-tag-over-role";
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+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.`,
-  type: "JSXOpeningElement",
+  type: 'JSXOpeningElement',
 });
 
-ruleTester.run("element-rol", rule, {
+ruleTester.run('element-role', rule, {
   valid: [
-    { code: "<div />;" },
+    { code: '<div />;' },
     { code: '<div role="unknown" />;' },
-    { code: "<other />" },
+    { code: '<div role="also unknown" />;' },
+    { code: '<other />' },
     { code: '<img role="img" />' },
     { code: '<input role="checkbox" />' },
   ].map(parserOptionsMapper),
   invalid: [
     {
       code: '<div role="checkbox" />',
-      errors: [expectedError("checkbox", "<input>")],
+      errors: [expectedError('checkbox', '<input type="checkbox">')],
+    },
+    {
+      code: '<div role="button checkbox" />',
+      errors: [expectedError('checkbox', '<input type="checkbox">')],
     },
     {
       code: '<div role="heading" />',
       errors: [
-        expectedError("heading", "<h1>, <h2>, <h3>, <h4>, <h5>, or <h6>"),
+        expectedError('heading', '<h1>, <h2>, <h3>, <h4>, <h5>, or <h6>'),
       ],
     },
+    {
+      code: '<div role="link" />',
+      errors: [expectedError('link', '<a href=...>, <area href=...>, or <link href=...>')],
+    },
     {
       code: '<div role="rowgroup" />',
-      errors: [expectedError("rowgroup", "<tbody>, <tfoot>, or <thead>")],
+      errors: [expectedError('rowgroup', '<tbody>, <tfoot>, or <thead>')],
     },
     {
       code: '<span role="checkbox" />',
-      errors: [expectedError("checkbox", "<input>")],
+      errors: [expectedError('checkbox', '<input type="checkbox">')],
     },
     {
       code: '<other role="checkbox" />',
-      errors: [expectedError("checkbox", "<input>")],
+      errors: [expectedError('checkbox', '<input type="checkbox">')],
     },
     {
       code: '<other role="checkbox" />',
-      errors: [expectedError("checkbox", "<input>")],
+      errors: [expectedError('checkbox', '<input type="checkbox">')],
     },
     {
       code: '<div role="banner" />',
-      errors: [expectedError("banner", "<header>")],
+      errors: [expectedError('banner', '<header>')],
     },
   ].map(parserOptionsMapper),
 });

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

@@ -1,59 +1,87 @@
-import { roleElements } from "aria-query";
-import { getProp, getPropValue } from "jsx-ast-utils";
+import { roleElements } from 'aria-query';
+import { getProp, getPropValue } from 'jsx-ast-utils';
 
-import { generateObjSchema } from "../util/schemas";
+import getElementType from '../util/getElementType';
+import { generateObjSchema } from '../util/schemas';
 
-const errorMessage =
-  'Use {{tag}} instead of the "{{role}}" role to ensure accessibility across all devices.';
+const errorMessage = 'Use {{tag}} instead of the "{{role}}" role to ensure accessibility across all devices.';
 
 const schema = generateObjSchema();
 
-const tag = (input) => `<${input}>`;
+const formatTag = (tag) => {
+  if (!tag.attributes) {
+    return `<${tag.name}>`;
+  }
+
+  const [attribute] = tag.attributes;
+  const value = attribute.value ? `"${attribute.value}"` : '...';
+
+  return `<${tag.name} ${attribute.name}=${value}>`;
+};
+
+const getLastPropValue = (rawProp) => {
+  const propValue = getPropValue(rawProp);
+  if (!propValue) {
+    return propValue;
+  }
+
+  const lastSpaceIndex = propValue.lastIndexOf(' ');
+
+  return lastSpaceIndex === -1
+    ? propValue
+    : propValue.substring(lastSpaceIndex + 1);
+};
 
 export default {
   meta: {
     docs: {
-      url: "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/prefer-tag-over-role.md",
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/prefer-tag-over-role.md',
     },
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const role = getPropValue(getProp(node.attributes, "role"));
-      if (!role) {
-        return;
-      }
-
-      const matchedTags = roleElements.get(role);
-      if (!matchedTags) {
-        return;
-      }
-
-      const matchedNames = Array.from(
-        new Set(Array.from(matchedTags).map((matchedTag) => matchedTag.name))
-      );
-      if (matchedNames.some((matchedTag) => matchedTag === node.name.name)) {
-        return;
-      }
-
-      context.report({
-        data: {
-          tag:
-            matchedNames.length === 1
-              ? `<${matchedNames[0]}>`
-              : [
-                  matchedNames
-                    .slice(0, matchedNames.length - 1)
-                    .map(tag)
-                    .join(", "),
-                  tag(matchedNames[matchedNames.length - 1]),
-                ].join(", or "),
-          role,
-        },
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+
+    return {
+      JSXOpeningElement: (node) => {
+        const role = getLastPropValue(getProp(node.attributes, 'role'));
+        if (!role) {
+          return;
+        }
+
+        const matchedTagsSet = roleElements.get(role);
+        if (!matchedTagsSet) {
+          return;
+        }
+
+        const matchedTags = Array.from(matchedTagsSet);
+        if (
+          matchedTags.some(
+            (matchedTag) => matchedTag.name === elementType(node),
+          )
+        ) {
+          return;
+        }
+
+        context.report({
+          data: {
+            tag:
+              matchedTags.length === 1
+                ? formatTag(matchedTags[0])
+                : [
+                  matchedTags
+                    .slice(0, matchedTags.length - 1)
+                    .map(formatTag)
+                    .join(', '),
+                  formatTag(matchedTags[matchedTags.length - 1]),
+                ].join(', or '),
+            role,
+          },
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };