SplitButton needs label

Author: OjhaAditi25

COVERAGE.md

@@ -15,7 +15,7 @@ We currently cover the following components:
         -   [X] CompoundButton
         -   [] MenuButton
         -   [X] MenuItem
-        -   [] SplitButton
+        -   [x] SplitButton
         -   [x] ToggleButton
         -   [] ToolbarToggleButton
     -   [] Card

docs/rules/splitButton-needs-labelling.md

@@ -0,0 +1,41 @@
+# Accessibility: SplitButton must have an accessible label (`@microsoft/fluentui-jsx-a11y/splitButton-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+SplitButton without a label or accessible labeling lack an accessible name for assistive technology users.
+
+SplitButton components need a visual label.
+
+Please add label, or aria-labelledby.
+
+<https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/>
+
+## Rule Details
+
+This rule aims to...
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<SplitButton />
+```
+
+```jsx
+<SplitButton disabled/>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+   <SplitButton> Example</SplitButton>
+```
+
+```jsx
+   <SplitButton aria-label="My button"/>
+```
+
+```jsx
+<SplitButton disabled>Disabled State</SplitButton>
+```

lib/rules/buttons/splitButton-needs-labelling.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ESLintUtils } from "@typescript-eslint/utils";
+import { makeLabeledControlRule } from "../../util/ruleFactory";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+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
+    })
+);

lib/rules/index.ts

@@ -20,6 +20,7 @@ export { default as inputComponentsRequireAccessibleName } from "./input-compone
 export { default as linkMissingLabelling } from "./link-missing-labelling";
 export { default as menuItemNeedsLabelling } from "./menu-item-needs-labelling";
 export { default as noEmptyButtons } from "./buttons/no-empty-buttons";
+export { default as splitButtonNeedsLabelling } from "./buttons/splitButton-needs-labelling";
 export { default as noEmptyComponents } from "./no-empty-components";
 export { default as preferAriaOverTitleAttribute } from "./prefer-aria-over-title-attribute";
 export { default as progressbarNeedsLabelling } from "./progressbar-needs-labelling";

tests/lib/rules/buttons/splitButton-needs-labelling.test.ts

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "../helper/ruleTester";
+import rule from "../../../../lib/rules/buttons/splitButton-needs-labelling";
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+ruleTester.run("splitButton-needs-labelling", rule as unknown as Rule.RuleModule, {
+    valid: [
+        // 1) aria-label on the SplitButton
+
+        `<SplitButton aria-label="Example">Example</SplitButton>
+      `,
+        // 2) Field wrapper with label prop
+        `
+        <SplitButton aria-label="Example" disabled> Disabled State </SplitButton>
+      `
+    ],
+
+    invalid: [
+        // Unlabeled SwatchPicker (children present, but no accessible name)
+        {
+            code: `
+                <SplitButton>Example</SplitButton>
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        },
+        {
+            // 7) Native <label> wrapping (implicit label)
+            code: `
+                <SplitButton disabled>Example</SplitButton>
+            `,
+            errors: [{ messageId: "noUnlabeledSplitButton" }]
+        }
+    ]
+});