Updating rule to use with factory function

Author: OjhaAditi25

lib/rules/split-button-needs-labelling.ts

@@ -2,64 +2,64 @@
 // Licensed under the MIT License.
 
 import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
-import { elementType } from "jsx-ast-utils";
-import { JSXOpeningElement } from "estree-jsx";
+import { makeLabeledControlRule } from "../util/ruleFactory";
 
-export default ESLintUtils.RuleCreator.withoutDocs({
-    meta: {
-        type: "problem",
-        docs: {
+export default ESLintUtils.RuleCreator.withoutDocs(
+    makeLabeledControlRule(
+        {
+            component: "SplitButton",
+            messageId: "noUnlabeledSplitButton",
             description: "Accessibility: SplitButton must have text content or accessible name on primaryActionButton prop.",
-            recommended: "strict",
-            url: "https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/"
+            labelProps: [],
+            allowFieldParent: false,
+            allowHtmlFor: false,
+            allowLabelledBy: false,
+            allowWrappingLabel: false,
+            allowTooltipParent: false,
+            allowDescribedBy: false,
+            allowLabeledChild: false,
+            allowTextContentChild: false
         },
-        messages: {
-            noUnlabeledSplitButton:
-                "SplitButton must have text content, or an accessible name on the primaryActionButton prop (e.g., aria-label). Labeling the SplitButton itself is not valid."
-        },
-        schema: []
-    },
-    defaultOptions: [],
-    create(context) {
-        return {
-            JSXElement(node: TSESTree.JSXElement) {
-                const opening = node.openingElement;
-                const name = elementType(opening as unknown as JSXOpeningElement);
-                if (name !== "SplitButton") return;
-
-                // 1. Check for any non-empty text child
-                const hasTextContent = node.children.some(child => child.type === "JSXText" && child.value.trim().length > 0);
-                if (hasTextContent) return;
+        isSplitButtonAccessiblyLabeled
+    )
+);
 
-                // 2. Check for primaryActionButton prop with aria-label
-                const primaryActionButtonProp = opening.attributes.find(
-                    attr => attr.type === "JSXAttribute" && attr.name.name === "primaryActionButton"
-                );
-                if (
-                    primaryActionButtonProp &&
-                    primaryActionButtonProp.type === "JSXAttribute" &&
-                    primaryActionButtonProp.value &&
-                    primaryActionButtonProp.value.type === "JSXExpressionContainer"
-                ) {
-                    const expr = primaryActionButtonProp.value.expression;
-                    // Only handle object literals
-                    if (expr.type === "ObjectExpression") {
-                        const hasAriaLabel = expr.properties.some(
-                            prop =>
-                                prop.type === "Property" &&
-                                ((prop.key.type === "Identifier" && prop.key.name === "aria-label") ||
-                                    (prop.key.type === "Literal" && prop.key.value === "aria-label")) &&
-                                prop.value.type === "Literal" &&
-                                typeof prop.value.value === "string" &&
-                                prop.value.value.trim().length > 0
-                        );
-                        if (hasAriaLabel) return;
-                    }
-                }
+/**
+ * Custom accessibility checker for SplitButton:
+ * 1. Accessible if it has any non-empty text child.
+ * 2. If not, must have primaryActionButton prop with aria-label.
+ * 3. All other labeling strategies are invalid.
+ */
+export function isSplitButtonAccessiblyLabeled(node: TSESTree.JSXElement): boolean {
+    // 1. Check for any non-empty text child
+    const hasTextContent = node.children.some(child => child.type === "JSXText" && child.value.trim().length > 0);
+    if (hasTextContent) return true;
 
-                // 3. Otherwise, report error
-                context.report({ node: opening, messageId: "noUnlabeledSplitButton" });
-            }
-        };
+    // 2. Check for primaryActionButton prop with aria-label
+    const opening = node.openingElement;
+    const primaryActionButtonProp = opening.attributes.find(
+        attr => attr.type === "JSXAttribute" && attr.name.name === "primaryActionButton"
+    );
+    if (
+        primaryActionButtonProp &&
+        primaryActionButtonProp.type === "JSXAttribute" &&
+        primaryActionButtonProp.value &&
+        primaryActionButtonProp.value.type === "JSXExpressionContainer"
+    ) {
+        const expr = primaryActionButtonProp.value.expression;
+        // Only handle object literals
+        if (expr.type === "ObjectExpression") {
+            const hasAriaLabel = expr.properties.some(
+                prop =>
+                    prop.type === "Property" &&
+                    ((prop.key.type === "Identifier" && prop.key.name === "aria-label") ||
+                        (prop.key.type === "Literal" && prop.key.value === "aria-label")) &&
+                    prop.value.type === "Literal" &&
+                    typeof prop.value.value === "string" &&
+                    prop.value.value.trim().length > 0
+            );
+            if (hasAriaLabel) return true;
+        }
     }
-});
+    return false;
+}

lib/util/ruleFactory.ts

@@ -82,7 +82,11 @@ export function hasAccessibleLabel(
  * Factory for a minimal, strongly-configurable ESLint rule that enforces
  * accessible labeling on a specific JSX element/component.
  */
-export function makeLabeledControlRule(config: LabeledControlConfig): TSESLint.RuleModule<string, []> {
+
+// eslint-disable-next-line no-unused-vars
+type CustomChecker = (node: TSESTree.JSXElement, context: TSESLint.RuleContext<string, []>) => boolean;
+
+export function makeLabeledControlRule(config: LabeledControlConfig, customChecker?: CustomChecker): TSESLint.RuleModule<string, []> {
     return {
         meta: {
             type: "problem",
@@ -105,8 +109,9 @@ export function makeLabeledControlRule(config: LabeledControlConfig): TSESLint.R
 
                     if (!matches) return;
 
-                    if (!hasAccessibleLabel(opening, node, context, config)) {
-                        // report on the opening tag for better location
+                    const isAccessible = customChecker ? customChecker(node, context) : hasAccessibleLabel(opening, node, context, config);
+
+                    if (!isAccessible) {
                         context.report({ node: opening, messageId: config.messageId });
                     }
                 }