Updating rule

Author: OjhaAditi25

docs/rules/split-button-needs-labelling.md

@@ -16,23 +16,33 @@ Please add label, or aria-labelledby.
 
 This rule aims to...
 
-Examples of **incorrect** code for this rule:
+Example of **incorrect** code for this rule:
 
 ```jsx
-   <SplitButton> Example</SplitButton>
+   <SplitButton
+      menuButton={triggerProps}
+      primaryActionButton={primaryActionButtonProps}
+   />
 ```
 
-```jsx
-   <SplitButton disabled> Example</SplitButton>
-```
-
-
 Examples of **correct** code for this rule:
 
 ```jsx
-   <SplitButton aria-label="My button">Example</SplitButton>
+   <SplitButton
+      menuButton={triggerProps}
+      primaryActionButton={primaryActionButtonProps}
+   >
+      Example
+   </SplitButton>
 ```
 
 ```jsx
-<SplitButton disabled aria-label="My button">Disabled State</SplitButton>
+<SplitButton
+   menuButton={triggerProps}
+   primaryActionButton={{
+      ref: setPrimaryActionButtonRef,
+      "aria-label": "With calendar icon only",
+   }}
+   icon={<CalendarMonthRegular />}
+   />
 ```

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

@@ -1,25 +1,65 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ESLintUtils } from "@typescript-eslint/utils";
-import { makeLabeledControlRule } from "../util/ruleFactory";
+import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
+import { elementType } from "jsx-ast-utils";
+import { JSXOpeningElement } from "estree-jsx";
 
-//------------------------------------------------------------------------------
-// Rule Definition
-//------------------------------------------------------------------------------
+export default ESLintUtils.RuleCreator.withoutDocs({
+    meta: {
+        type: "problem",
+        docs: {
+            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/"
+        },
+        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;
 
-export default ESLintUtils.RuleCreator.withoutDocs(
-    makeLabeledControlRule({
-        component: "SplitButton",
-        messageId: "noUnlabeledSplitButton",
-        description: "Accessibility: SplitButton must have an accessible name via title, aria-label",
-        labelProps: ["aria-label"],
-        allowFieldParent: true,
-        allowHtmlFor: false,
-        allowLabelledBy: true,
-        allowWrappingLabel: false,
-        allowTooltipParent: false,
-        allowDescribedBy: false,
-        allowLabeledChild: false
-    })
-);
+                // 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;
+
+                // 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;
+                    }
+                }
+
+                // 3. Otherwise, report error
+                context.report({ node: opening, messageId: "noUnlabeledSplitButton" });
+            }
+        };
+    }
+});

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

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "./helper/ruleTester";
+import rule from "../../../lib/rules/split-button-needs-labelling";
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+ruleTester.run("split-button-needs-labelling", rule as unknown as Rule.RuleModule, {
+    valid: [
+        // 1) aria-label on the SplitButton
+
+        `<SplitButton
+          menuButton={triggerProps}
+          primaryActionButton={primaryActionButtonProps}
+        >
+          Example
+        </SplitButton>
+      `,
+        // 2) with primaryActionButton prop having aria-label
+        `
+        <SplitButton
+         menuButton={triggerProps}
+         primaryActionButton={{
+           ref: setPrimaryActionButtonRef,
+           "aria-label": "With calendar icon only",
+         }}
+         icon={<CalendarMonthRegular />}
+       />
+      `
+    ],
+
+    invalid: [
+        // Unlabeled SplitButton
+        {
+            code: `
+                <SplitButton
+                menuButton={triggerProps}
+                primaryActionButton={primaryActionButtonProps}
+                 />
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        },
+        // SplitButton empty aria-label
+        {
+            code: `
+               <SplitButton
+                menuButton={triggerProps}
+                primaryActionButton={{
+                    ref: setPrimaryActionButtonRef,
+                    "aria-label": "",
+                }}
+                 />
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        },
+        // SplitButton with aria-label null
+        {
+            code: `
+                <SplitButton
+                menuButton={triggerProps}
+                primaryActionButton={{
+                    ref: setPrimaryActionButtonRef,
+                    "aria-label": null,
+                }}
+                 />
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        },
+        // SplitButton with aria-label undefined
+        {
+            code: `
+               <SplitButton
+                menuButton={triggerProps}
+                primaryActionButton={{
+                    ref: setPrimaryActionButtonRef,
+                    "aria-label": undefined,
+                }}
+                 />
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        }
+    ]
+});