applying changes from code review

Author: aubreyquinn

lib/rules/swatchpicker-needs-labelling.ts

@@ -9,16 +9,14 @@ import { makeLabeledControlRule } from "../util/ruleFactory";
 //------------------------------------------------------------------------------
 
 export default ESLintUtils.RuleCreator.withoutDocs(
-    makeLabeledControlRule(
-        {
-            component: "SwatchPicker",
-            labelProps: ["aria-label"],
-            allowFieldParent: true,
-            allowFor: false,
-            allowLabelledBy: true,
-            allowWrappingLabel: false
-        },
-        "noUnlabeledSwatchPicker",
-        "Accessibility: SwatchPicker must have an accessible name via aria-label, aria-labelledby, Field component, etc.."
-    )
+    makeLabeledControlRule({
+        component: "SwatchPicker",
+        labelProps: ["aria-label"],
+        allowFieldParent: true,
+        allowFor: false,
+        allowLabelledBy: true,
+        allowWrappingLabel: false,
+        messageId: "noUnlabeledSwatchPicker",
+        description: "Accessibility: SwatchPicker must have an accessible name via aria-label, aria-labelledby, Field component, etc.."
+    })
 );

lib/util/ruleFactory.ts

@@ -11,10 +11,12 @@ import { JSXOpeningElement } from "estree-jsx";
 export type LabeledControlConfig = {
     component: string | RegExp;
     labelProps: string[]; // e.g. ["label", "aria-label"]
-    allowFieldParent?: boolean; // e.g. <Field label=...><RadioGroup/></Field>
-    allowFor?: boolean; // htmlFor
-    allowLabelledBy?: boolean; // aria-labelledby
-    allowWrappingLabel?: boolean; // <label>...</label>
+    allowFieldParent: boolean; // e.g. <Field label=...><RadioGroup/></Field>
+    allowFor: boolean; // htmlFor
+    allowLabelledBy: boolean; // aria-labelledby
+    allowWrappingLabel: boolean; // <label>...</label>
+    messageId: string;
+    description: string;
 };
 
 /**
@@ -80,27 +82,21 @@ export function hasAccessibleLabel(node: TSESTree.JSXOpeningElement, context: an
  * ```
  *
  * @param config - See `hasAccessibleLabel` for the configuration fields and semantics.
- * @param messageId - The message key used in `meta.messages` (e.g., "missingLabel").
- * @param description - Human-readable rule description and the text displayed for `messageId`.
  * @returns An ESLint `RuleModule` that reports when the configured component lacks an accessible label.
  */
-export function makeLabeledControlRule(
-    config: LabeledControlConfig,
-    messageId: string,
-    description: string
-): TSESLint.RuleModule<string, []> {
+export function makeLabeledControlRule(config: LabeledControlConfig): TSESLint.RuleModule<string, []> {
     return {
         meta: {
-            type: "problem" as const,
-            messages: { [messageId]: description },
+            type: "problem",
+            messages: { [config.messageId]: config.description },
             docs: {
-                description,
-                recommended: "strict" as const, // not `true`
+                description: config.description,
+                recommended: "strict",
                 url: "https://www.w3.org/TR/html-aria/"
             },
             schema: []
         },
-        defaultOptions: [] as const,
+        defaultOptions: [],
 
         create(context: TSESLint.RuleContext<string, []>) {
             return {
@@ -112,7 +108,7 @@ export function makeLabeledControlRule(
                     if (!matches) return;
 
                     if (!hasAccessibleLabel(node, context, config)) {
-                        context.report({ node, messageId });
+                        context.report({ node, messageId: config.messageId });
                     }
                 }
             };

tests/lib/rules/utils/ruleFactory.test.ts

@@ -61,7 +61,9 @@ describe("hasAccessibleLabel (unit)", () => {
         allowFieldParent: true,
         allowFor: true,
         allowLabelledBy: true,
-        allowWrappingLabel: true
+        allowWrappingLabel: true,
+        messageId: "errorMsg",
+        description: "anything"
     };
 
     test("returns false when no heuristics pass", () => {
@@ -119,25 +121,22 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
         allowFieldParent: true,
         allowFor: true,
         allowLabelledBy: true,
-        allowWrappingLabel: true
+        allowWrappingLabel: true,
+        messageId: "noUnlabeledRadioGroup",
+        description: "Accessibility: RadioGroup must have a programmatic and visual label."
     };
 
-    const messageId = "noUnlabeledRadioGroup";
-
-    const description = "Accessibility: RadioGroup must have a programmatic and visual label.";
-
     // 1) No heuristics -> report
     describe("reports when component matches and no label heuristics pass", () => {
         beforeEach(() => resetAllMocksToFalse());
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group", rule as unknown as Rule.RuleModule, {
             valid: [],
             invalid: [
                 {
-                    filename: "example.tsx",
                     code: `<RadioGroup />`,
-                    errors: [{ messageId }]
+                    errors: [{ messageId: baseCfg.messageId }]
                 }
             ]
         });
@@ -153,13 +152,10 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
             );
         });
 
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group (label prop)", rule as unknown as Rule.RuleModule, {
-            valid: [
-                { filename: "example.tsx", code: `<RadioGroup label="Account type" />` },
-                { filename: "example.tsx", code: `<RadioGroup aria-label={"Account type"} />` }
-            ],
+            valid: [{ code: `<RadioGroup label="Account type" />` }, { code: `<RadioGroup aria-label={"Account type"} />` }],
             invalid: []
         });
     });
@@ -175,33 +171,38 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
             );
         });
 
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group (aria-labelledby)", rule as unknown as Rule.RuleModule, {
-            valid: [{ filename: "example.tsx", code: `<RadioGroup aria-labelledby="groupLabelId" />` }],
-            invalid: [{ filename: "example.tsx", code: `<RadioGroup />`, errors: [{ messageId }] }]
+            valid: [{ code: `<RadioGroup aria-labelledby="groupLabelId" />` }],
+            invalid: [{ code: `<RadioGroup />`, errors: [{ messageId: baseCfg.messageId }] }]
         });
     });
 
     // 4) non-matching component -> ignored
     describe("does not report for non-matching component names", () => {
         beforeEach(() => resetAllMocksToFalse());
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group (non-matching)", rule as unknown as Rule.RuleModule, {
-            valid: [{ filename: "example.tsx", code: `<Dropdown />` }],
+            valid: [{ code: `<Dropdown />` }],
             invalid: []
         });
     });
 
     // 5) RegExp component match
     describe("supports RegExp component config (/Group$/)", () => {
         beforeEach(() => resetAllMocksToFalse());
-        const rule = makeLabeledControlRule({ ...baseCfg, component: /Group$/ }, messageId, description);
+        const rule = makeLabeledControlRule({ ...baseCfg, component: /Group$/ });
 
         ruleTester.run("no-unlabeled-*Group (regex)", rule as unknown as Rule.RuleModule, {
             valid: [],
-            invalid: [{ filename: "example.tsx", code: `<CheckboxGroup />`, errors: [{ messageId }] }]
+            invalid: [
+                {
+                    code: `<CheckboxGroup />`,
+                    errors: [{ messageId: baseCfg.messageId }]
+                }
+            ]
         });
     });
 
@@ -212,19 +213,18 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
             (hasFieldParent as jest.Mock).mockReturnValue(true);
         });
 
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group (Field parent)", rule as unknown as Rule.RuleModule, {
             valid: [
                 {
-                    filename: "example.tsx",
                     code: `
-            <>
-              <Field label="Account type">
-                <RadioGroup />
-              </Field>
-            </>
-          `
+                        <>
+                        <Field label="Account type">
+                            <RadioGroup />
+                        </Field>
+                        </>
+                    `
                 }
             ],
             invalid: []
@@ -238,17 +238,16 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
             (isInsideLabelTag as jest.Mock).mockReturnValue(true);
         });
 
-        const rule = makeLabeledControlRule(baseCfg, messageId, description);
+        const rule = makeLabeledControlRule(baseCfg);
 
         ruleTester.run("no-unlabeled-radio-group (wrapping <label>)", rule as unknown as Rule.RuleModule, {
             valid: [
                 {
-                    filename: "example.tsx",
                     code: `
-            <label>
-              <RadioGroup />
-            </label>
-          `
+                        <label>
+                            <RadioGroup />
+                        </label>
+                    `
                 }
             ],
             invalid: []