From 4b6b0f688cd9d17ceb84ea6878f8f5fa2d3275fc Mon Sep 17 00:00:00 2001
From: Aubrey Quinn <aubreyquinn@microsoft.com>
Date: Thu, 18 Sep 2025 10:03:33 +0100
Subject: [PATCH 1/4] added rules for all swatch components

---
 COVERAGE.md                                   |   8 +-
 docs/rules/colorswatch-needs-labelling.md     | 110 +++++++++++++
 docs/rules/emptyswatch-needs-labelling.md     | 109 +++++++++++++
 docs/rules/imageswatch-needs-labelling.md     | 108 +++++++++++++
 lib/index.ts                                  |   6 +
 lib/rules/colorswatch-needs-labelling.ts      |  26 +++
 lib/rules/emptyswatch-needs-labelling.ts      |  26 +++
 lib/rules/imageswatch-needs-labelling.ts      |  26 +++
 lib/rules/index.ts                            |   3 +
 lib/util/ruleFactory.ts                       |  96 +++++++++--
 .../rules/colorswatch-needs-labelling.test.ts |  78 +++++++++
 .../rules/emptyswatch-needs-labelling.test.ts | 100 ++++++++++++
 .../rules/imageswatch-needs-labelling.test.ts | 108 +++++++++++++
 tests/lib/rules/utils/ruleFactory.test.ts     | 151 +++++++++++++++---
 14 files changed, 911 insertions(+), 44 deletions(-)
 create mode 100644 docs/rules/colorswatch-needs-labelling.md
 create mode 100644 docs/rules/emptyswatch-needs-labelling.md
 create mode 100644 docs/rules/imageswatch-needs-labelling.md
 create mode 100644 lib/rules/colorswatch-needs-labelling.ts
 create mode 100644 lib/rules/emptyswatch-needs-labelling.ts
 create mode 100644 lib/rules/imageswatch-needs-labelling.ts
 create mode 100644 tests/lib/rules/colorswatch-needs-labelling.test.ts
 create mode 100644 tests/lib/rules/emptyswatch-needs-labelling.test.ts
 create mode 100644 tests/lib/rules/imageswatch-needs-labelling.test.ts

diff --git a/COVERAGE.md b/COVERAGE.md
index d65a83b..872b914 100644
--- a/COVERAGE.md
+++ b/COVERAGE.md
@@ -64,10 +64,10 @@ We currently cover the following components:
     -   [x] SpinButton
     -   [x] Spinner
     -   [x] SwatchPicker
-        - [] ColorSwatch
-        - [] ImageSwatch
-        - [] EmptySwatch
-        - [] SwatchPickerRow
+        - [x] ColorSwatch
+        - [x] ImageSwatch
+        - [x] EmptySwatch
+        - [N/A] SwatchPickerRow
     -   [x] Switch
     -   [] SearchBox
     -   [] Table
diff --git a/docs/rules/colorswatch-needs-labelling.md b/docs/rules/colorswatch-needs-labelling.md
new file mode 100644
index 0000000..d076f50
--- /dev/null
+++ b/docs/rules/colorswatch-needs-labelling.md
@@ -0,0 +1,110 @@
+# Accessibility: ColorSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+All interactive elements must have an accessible name.
+
+`ColorSwatch` without a supported label lacks an accessible name for assistive technology users.
+
+## Allowed labelling strategies
+
+- ✅ `aria-label` **on `ColorSwatch`**
+- ✅ `aria-labelledby` **on `ColorSwatch`**
+- ✅ `htmlFor`/`id`
+- ✅ Wrapping native `<label>…</label>`
+- ✅ `Tooltip` parent with `relationship="label"`
+- ✅ `Field` parent label
+- ✅ Text content child
+- ❌ Container-only label (e.g., only the surrounding `SwatchPicker` is labelled)
+
+## Ways to fix
+
+- Add `aria-label` / `aria-labelledby`.
+- Use `<label htmlFor="…">` + `id="…"` on `ColorSwatch`.
+- Wrap with `<label>` or use a `Tooltip (relationship="label")`.
+- Provide a `Field label="…"` parent.
+- Provide meaningful text as the child of `ColorSwatch`.
+
+## Rule Details
+
+This rule ensures `ColorSwatch` is labelled using **any** supported strategy above.
+
+### Examples of **incorrect** code
+
+```jsx
+// No label
+<SwatchPicker>
+  <ColorSwatch color="#FF1921" value="FF1921" />
+</SwatchPicker>
+```
+
+```jsx
+// Container-only label: ColorSwatch itself is unnamed
+<SwatchPicker aria-label="Color picker">
+  <ColorSwatch color="#FF1921" value="FF1921" />
+</SwatchPicker>
+```
+
+### Examples of **correct** code
+
+```jsx
+// aria-label
+<SwatchPicker>
+  <ColorSwatch color="#FF1921" value="FF1921" aria-label="Red" />
+</SwatchPicker>
+```
+
+```jsx
+// aria-labelledby
+<>
+  <span id="red-swatch">Red</span>
+  <SwatchPicker>
+    <ColorSwatch color="#FF1921" value="FF1921" aria-labelledby="red-swatch" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// htmlFor/id
+<>
+  <label htmlFor="sw-red">Red</label>
+  <SwatchPicker>
+    <ColorSwatch id="sw-red" color="#FF1921" value="FF1921" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// Wrapping native <label>
+<label>
+  Red
+  <ColorSwatch color="#FF1921" value="FF1921" />
+</label>
+```
+
+```jsx
+// Tooltip (acts as a label)
+<SwatchPicker>
+  <Tooltip relationship="label" content="Red">
+    <ColorSwatch color="#FF1921" value="FF1921" />
+  </Tooltip>
+</SwatchPicker>
+```
+
+```jsx
+// Field parent
+<SwatchPicker>
+  <Field label="Red">
+    <ColorSwatch color="#FF1921" value="FF1921" />
+  </Field>
+</SwatchPicker>
+```
+
+```jsx
+// Text content child
+<SwatchPicker>
+  <ColorSwatch color="#FF1921" value="FF1921">Red</ColorSwatch>
+</SwatchPicker>
+```
\ No newline at end of file
diff --git a/docs/rules/emptyswatch-needs-labelling.md b/docs/rules/emptyswatch-needs-labelling.md
new file mode 100644
index 0000000..57ad0bb
--- /dev/null
+++ b/docs/rules/emptyswatch-needs-labelling.md
@@ -0,0 +1,109 @@
+# Accessibility: EmptySwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+All interactive elements must have an accessible name.
+
+`EmptySwatch` without a supported label lacks an accessible name for assistive technology users.
+
+## Allowed labelling strategies
+
+- ✅ `aria-label` **on `EmptySwatch`**
+- ✅ `aria-labelledby` **on `EmptySwatch`**
+- ✅ `htmlFor`/`id` (native `<label htmlFor="…">` ↔ `id="…"` on `EmptySwatch`)
+- ✅ Wrapping native `<label>…</label>`
+- ✅ `Tooltip` parent with `relationship="label"`
+- ✅ Text content child (e.g., `<EmptySwatch>None</EmptySwatch>`)
+- ❌ `Field` parent (not allowed for `EmptySwatch`)
+- ❌ Container-only label (e.g., only the surrounding `SwatchPicker` is labelled)
+
+## Ways to fix
+
+- Add `aria-label`/`aria-labelledby` to `EmptySwatch`.
+- Use `<label htmlFor="…">` + `id="…"` on `EmptySwatch`.
+- Wrap in a native `<label>` or `Tooltip (relationship="label")`.
+- Provide meaningful text **as the child** of `EmptySwatch`.
+
+## Rule Details
+
+This rule ensures `EmptySwatch` is labelled using **allowed** mechanisms.
+
+### Examples of **incorrect** code
+
+```jsx
+// No label
+<SwatchPicker>
+  <EmptySwatch value="none" />
+</SwatchPicker>
+```
+
+```jsx
+// Container-only label: EmptySwatch itself is unnamed
+<SwatchPicker aria-label="Color picker">
+  <EmptySwatch value="none" />
+</SwatchPicker>
+```
+
+```jsx
+// Not allowed: Field parent labelling
+<SwatchPicker>
+  <Field label="No color">
+    <EmptySwatch value="none" />
+  </Field>
+</SwatchPicker>
+```
+
+### Examples of **correct** code
+
+```jsx
+// aria-label
+<SwatchPicker>
+  <EmptySwatch value="none" aria-label="No color" />
+</SwatchPicker>
+```
+
+```jsx
+// aria-labelledby
+<>
+  <span id="empty-no-color">No color</span>
+  <SwatchPicker>
+    <EmptySwatch value="none" aria-labelledby="empty-no-color" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// htmlFor/id
+<>
+  <label htmlFor="empty-none">No color</label>
+  <SwatchPicker>
+    <EmptySwatch id="empty-none" value="none" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// Wrapping native <label>
+<label>
+  No color
+  <EmptySwatch value="none" />
+</label>
+```
+
+```jsx
+// Tooltip (acts as a label)
+<SwatchPicker>
+  <Tooltip relationship="label" content="No color">
+    <EmptySwatch value="none" />
+  </Tooltip>
+</SwatchPicker>
+```
+
+```jsx
+// Text content child
+<SwatchPicker>
+  <EmptySwatch value="none">No color</EmptySwatch>
+</SwatchPicker>
+```
diff --git a/docs/rules/imageswatch-needs-labelling.md b/docs/rules/imageswatch-needs-labelling.md
new file mode 100644
index 0000000..652162e
--- /dev/null
+++ b/docs/rules/imageswatch-needs-labelling.md
@@ -0,0 +1,108 @@
+# Accessibility: ImageSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+All interactive elements must have an accessible name.
+
+`ImageSwatch` without a supported label lacks an accessible name for assistive technology users.
+
+## Allowed labelling strategies
+
+- ✅ `aria-label` **on `ImageSwatch`**
+- ✅ `aria-labelledby` **on `ImageSwatch`**
+- ✅ Wrapping native `<label>…</label>`
+- ✅ `Tooltip` parent with `relationship="label"` (e.g., from Fluent UI)
+- ❌ `Field` parent (not allowed for `ImageSwatch`)
+- ❌ `htmlFor`/`id` (not allowed for `ImageSwatch`)
+- ❌ Text content child (not allowed)
+- ❌ Container-only label (e.g., only the surrounding `SwatchPicker` is labelled)
+
+## Ways to fix
+
+- Add `aria-label` or `aria-labelledby` **directly** to `ImageSwatch`.
+- Wrap the swatch in a native `<label>…</label>` with descriptive text.
+- Wrap in a `Tooltip` with `relationship="label"` and meaningful `content`.
+
+## Rule Details
+
+This rule ensures `ImageSwatch` receives a name via **supported** mechanisms.
+
+### Examples of **incorrect** code
+
+```jsx
+// No label at all
+<SwatchPicker>
+  <ImageSwatch src="/none.png" value="none" />
+</SwatchPicker>
+```
+
+```jsx
+// Container-only label: ImageSwatch itself is unnamed
+<SwatchPicker aria-label="Color picker">
+  <ImageSwatch src="/none.png" value="none" />
+</SwatchPicker>
+```
+
+```jsx
+// Not allowed for ImageSwatch: htmlFor/id
+<>
+  <label htmlFor="img-none">No color</label>
+  <SwatchPicker>
+    <ImageSwatch id="img-none" src="/none.png" value="none" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// Not allowed: text content child
+<SwatchPicker>
+  <ImageSwatch src="/none.png" value="none">No color</ImageSwatch>
+</SwatchPicker>
+```
+
+```jsx
+// Not allowed: Field parent labelling
+<SwatchPicker>
+  <Field label="No color">
+    <ImageSwatch src="/none.png" value="none" />
+  </Field>
+</SwatchPicker>
+```
+
+### Examples of **correct** code
+
+```jsx
+// aria-label
+<SwatchPicker>
+  <ImageSwatch src="/none.png" value="none" aria-label="No color" />
+</SwatchPicker>
+```
+
+```jsx
+// aria-labelledby
+<>
+  <span id="img-no-color">No color</span>
+  <SwatchPicker>
+    <ImageSwatch src="/none.png" value="none" aria-labelledby="img-no-color" />
+  </SwatchPicker>
+</>
+```
+
+```jsx
+// Wrapping native <label>
+<label>
+  No color
+  <ImageSwatch src="/none.png" value="none" />
+</label>
+```
+
+```jsx
+// Tooltip (acts as a label)
+<SwatchPicker>
+  <Tooltip relationship="label" content="No color">
+    <ImageSwatch src="/none.png" value="none" />
+  </Tooltip>
+</SwatchPicker>
+```
diff --git a/lib/index.ts b/lib/index.ts
index bbf4bfc..1a49a29 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -23,14 +23,17 @@ module.exports = {
                 "@microsoft/fluentui-jsx-a11y/badge-needs-accessible-name": "error",
                 "@microsoft/fluentui-jsx-a11y/breadcrumb-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/checkbox-needs-labelling": "error",
+                "@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/combobox-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/compound-button-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/counter-badge-needs-count": "error",
                 "@microsoft/fluentui-jsx-a11y/dialogbody-needs-title-content-and-actions": "error",
                 "@microsoft/fluentui-jsx-a11y/dialogsurface-needs-aria": "error",
                 "@microsoft/fluentui-jsx-a11y/dropdown-needs-labelling": "error",
+                "@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/field-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/image-button-missing-aria": "error",
+                "@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/input-components-require-accessible-name": "error",
                 "@microsoft/fluentui-jsx-a11y/link-missing-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/menu-item-needs-labelling": "error",
@@ -61,14 +64,17 @@ module.exports = {
         "badge-needs-accessible-name": rules.badgeNeedsAccessibleName,
         "breadcrumb-needs-labelling": rules.breadcrumbNeedsLabelling,
         "checkbox-needs-labelling": rules.checkboxNeedsLabelling,
+        "colorswatch-needs-labelling": rules.colorSwatchNeedsLabelling,
         "combobox-needs-labelling": rules.comboboxNeedsLabelling,
         "compound-button-needs-labelling": rules.compoundButtonNeedsLabelling,
         "counter-badge-needs-count": rules.counterBadgeNeedsCount,
         "dialogbody-needs-title-content-and-actions": rules.dialogbodyNeedsTitleContentAndActions,
         "dialogsurface-needs-aria": rules.dialogsurfaceNeedsAria,
         "dropdown-needs-labelling": rules.dropdownNeedsLabelling,
+        "emptyswatch-needs-labelling": rules.emptySwatchNeedsLabelling,
         "field-needs-labelling": rules.fieldNeedsLabelling,
         "image-button-missing-aria": rules.imageButtonMissingAria,
+        "imageswatch-needs-labelling": rules.imageSwatchNeedsLabelling,
         "input-components-require-accessible-name": rules.inputComponentsRequireAccessibleName,
         "link-missing-labelling": rules.linkMissingLabelling,
         "menu-item-needs-labelling": rules.menuItemNeedsLabelling,
diff --git a/lib/rules/colorswatch-needs-labelling.ts b/lib/rules/colorswatch-needs-labelling.ts
new file mode 100644
index 0000000..e703202
--- /dev/null
+++ b/lib/rules/colorswatch-needs-labelling.ts
@@ -0,0 +1,26 @@
+// 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: "ColorSwatch",
+        messageId: "noUnlabeledColorSwatch",
+        description: "Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..",
+        labelProps: ["aria-label"],
+        allowFieldParent: true,
+        allowHtmlFor: true,
+        allowLabelledBy: false,
+        allowWrappingLabel: true,
+        allowTooltipParent: true,
+        allowDescribedBy: false,
+        allowLabeledChild: false,
+        allowTextContentChild: true
+    })
+);
diff --git a/lib/rules/emptyswatch-needs-labelling.ts b/lib/rules/emptyswatch-needs-labelling.ts
new file mode 100644
index 0000000..eff49fd
--- /dev/null
+++ b/lib/rules/emptyswatch-needs-labelling.ts
@@ -0,0 +1,26 @@
+// 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: "EmptySwatch",
+        messageId: "noUnlabeledEmptySwatch",
+        description: "Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..",
+        labelProps: ["aria-label"],
+        allowFieldParent: false,
+        allowHtmlFor: true,
+        allowLabelledBy: true,
+        allowWrappingLabel: true,
+        allowTooltipParent: true,
+        allowDescribedBy: false,
+        allowLabeledChild: false,
+        allowTextContentChild: true
+    })
+);
diff --git a/lib/rules/imageswatch-needs-labelling.ts b/lib/rules/imageswatch-needs-labelling.ts
new file mode 100644
index 0000000..7744521
--- /dev/null
+++ b/lib/rules/imageswatch-needs-labelling.ts
@@ -0,0 +1,26 @@
+// 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: "ImageSwatch",
+        messageId: "noUnlabeledImageSwatch",
+        description: "Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..",
+        labelProps: ["aria-label"],
+        allowFieldParent: false,
+        allowHtmlFor: false,
+        allowLabelledBy: true,
+        allowWrappingLabel: true,
+        allowTooltipParent: true,
+        allowDescribedBy: false,
+        allowLabeledChild: false,
+        allowTextContentChild: false
+    })
+);
diff --git a/lib/rules/index.ts b/lib/rules/index.ts
index bfdbe7b..d246932 100644
--- a/lib/rules/index.ts
+++ b/lib/rules/index.ts
@@ -26,6 +26,9 @@ export { default as progressbarNeedsLabelling } from "./progressbar-needs-labell
 export { default as radioButtonMissingLabel } from "./radio-button-missing-label";
 export { default as radiogroupMissingLabel } from "./radiogroup-missing-label";
 export { default as ratingNeedsName } from "./rating-needs-name";
+export { default as emptySwatchNeedsLabelling } from "./emptyswatch-needs-labelling";
+export { default as colorSwatchNeedsLabelling } from "./colorswatch-needs-labelling";
+export { default as imageSwatchNeedsLabelling } from "./imageswatch-needs-labelling";
 export { default as spinButtonNeedsLabelling } from "./spin-button-needs-labelling";
 export { default as spinButtonUnrecommendedLabelling } from "./spin-button-unrecommended-labelling";
 export { default as spinnerNeedsLabelling } from "./spinner-needs-labelling";
diff --git a/lib/util/ruleFactory.ts b/lib/util/ruleFactory.ts
index 3b70bcc..73ba9ae 100644
--- a/lib/util/ruleFactory.ts
+++ b/lib/util/ruleFactory.ts
@@ -14,6 +14,7 @@ import { elementType } from "jsx-ast-utils";
 import { JSXOpeningElement } from "estree-jsx";
 import { hasToolTipParent } from "./hasTooltipParent";
 import { hasLabeledChild } from "./hasLabeledChild";
+import { hasTextContentChild } from "./hasTextContentChild";
 
 export type LabeledControlConfig = {
     component: string | RegExp;
@@ -34,6 +35,7 @@ export type LabeledControlConfig = {
     allowDescribedBy: boolean;
     // NEW: treat labeled child content (img alt, svg title, aria-label on role="img") as the name
     allowLabeledChild: boolean;
+    allowTextContentChild?: boolean;
 };
 
 /**
@@ -52,7 +54,12 @@ export type LabeledControlConfig = {
  *
  * This checks for presence of an accessible *name* only; not contrast or UX.
  */
-export function hasAccessibleLabel(node: TSESTree.JSXOpeningElement, context: any, config: LabeledControlConfig): boolean {
+export function hasAccessibleLabel(
+    opening: TSESTree.JSXOpeningElement,
+    element: TSESTree.JSXElement,
+    context: TSESLint.RuleContext<string, []>,
+    config: LabeledControlConfig
+): boolean {
     const allowFieldParent = !!config.allowFieldParent;
     const allowWrappingLabel = !!config.allowWrappingLabel;
     const allowHtmlFor = !!config.allowHtmlFor;
@@ -60,16 +67,76 @@ export function hasAccessibleLabel(node: TSESTree.JSXOpeningElement, context: an
     const allowTooltipParent = !!config.allowTooltipParent;
     const allowDescribedBy = !!config.allowDescribedBy;
     const allowLabeledChild = !!config.allowLabeledChild;
+    const allowTextContentChild = !!config.allowTextContentChild;
 
-    if (allowFieldParent && hasFieldParent(context)) return true;
-    if (config.labelProps?.some(p => hasNonEmptyProp(node.attributes, p))) return true;
-    if (allowWrappingLabel && isInsideLabelTag(context)) return true;
-    if (allowHtmlFor && hasAssociatedLabelViaHtmlFor(node, context)) return true;
-    if (allowLabelledBy && hasAssociatedLabelViaAriaLabelledBy(node, context)) return true;
-    if (allowTooltipParent && hasToolTipParent(context)) return true;
-    if (allowDescribedBy && hasAssociatedLabelViaAriaDescribedby(node, context)) return true;
-    if (allowLabeledChild && hasLabeledChild(node, context)) return true;
+    console.log("hasAccessibleLabel called with:", {
+        component: config.component,
+        attributes: opening.attributes,
+        allowFieldParent,
+        allowWrappingLabel,
+        allowHtmlFor,
+        allowLabelledBy,
+        allowTooltipParent,
+        allowDescribedBy,
+        allowLabeledChild,
+        allowTextContentChild
+    });
 
+    if (allowFieldParent) {
+        const res = hasFieldParent(context);
+        console.log("hasFieldParent:", res);
+        if (res) return true;
+    }
+
+    if (config.labelProps?.length) {
+        const res = config.labelProps.some(p => hasNonEmptyProp(opening.attributes, p));
+        console.log("hasNonEmptyProp:", res, config.labelProps);
+        if (res) return true;
+    }
+
+    if (allowWrappingLabel) {
+        const res = isInsideLabelTag(context);
+        console.log("isInsideLabelTag:", res);
+        if (res) return true;
+    }
+
+    if (allowHtmlFor) {
+        const res = hasAssociatedLabelViaHtmlFor(opening, context);
+        console.log("hasAssociatedLabelViaHtmlFor:", res);
+        if (res) return true;
+    }
+
+    if (allowLabelledBy) {
+        const res = hasAssociatedLabelViaAriaLabelledBy(opening, context);
+        console.log("hasAssociatedLabelViaAriaLabelledBy:", res);
+        if (res) return true;
+    }
+
+    if (allowTooltipParent) {
+        const res = hasToolTipParent(context);
+        console.log("hasToolTipParent:", res);
+        if (res) return true;
+    }
+
+    if (allowDescribedBy) {
+        const res = hasAssociatedLabelViaAriaDescribedby(opening, context);
+        console.log("hasAssociatedLabelViaAriaDescribedby:", res);
+        if (res) return true;
+    }
+
+    if (allowLabeledChild) {
+        const res = hasLabeledChild(opening, context);
+        console.log("hasLabeledChild:", res);
+        if (res) return true;
+    }
+
+    if (allowTextContentChild) {
+        const res = hasTextContentChild(element);
+        console.log("hasTextContentChild:", res);
+        if (res) return true;
+    }
+
+    console.log("No accessible label found, returning false.");
     return false;
 }
 
@@ -93,15 +160,16 @@ export function makeLabeledControlRule(config: LabeledControlConfig): TSESLint.R
 
         create(context: TSESLint.RuleContext<string, []>) {
             return {
-                JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
-                    // elementType expects an ESTree JSX node — cast is fine
-                    const name = elementType(node as unknown as JSXOpeningElement);
+                JSXElement(node: TSESTree.JSXElement) {
+                    const opening = node.openingElement;
+                    const name = elementType(opening as unknown as JSXOpeningElement);
                     const matches = typeof config.component === "string" ? name === config.component : config.component.test(name);
 
                     if (!matches) return;
 
-                    if (!hasAccessibleLabel(node, context, config)) {
-                        context.report({ node, messageId: config.messageId });
+                    if (!hasAccessibleLabel(opening, node, context, config)) {
+                        // report on the opening tag for better location
+                        context.report({ node: opening, messageId: config.messageId });
                     }
                 }
             };
diff --git a/tests/lib/rules/colorswatch-needs-labelling.test.ts b/tests/lib/rules/colorswatch-needs-labelling.test.ts
new file mode 100644
index 0000000..2dc9921
--- /dev/null
+++ b/tests/lib/rules/colorswatch-needs-labelling.test.ts
@@ -0,0 +1,78 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "./helper/ruleTester";
+import rule from "../../../lib/rules/colorswatch-needs-labelling";
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+ruleTester.run("colorswatch-needs-labelling", rule as unknown as Rule.RuleModule, {
+    valid: [
+        // aria-label
+        `<SwatchPicker aria-label="Choose color" selectedValue="00B053" onSelectionChange={onSel}>
+        <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
+        <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
+      </SwatchPicker>`,
+
+        // Field wrapper with label prop
+        `
+        <SwatchPicker>
+          <Field label="red">
+            <ColorSwatch color="#FF1921" value="FF1921" />
+          </Field>
+          <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
+        </SwatchPicker>
+      `,
+
+        // tooltip parent
+        `
+        <SwatchPicker>
+          <Tooltip relationship="label" content="red">
+            <ColorSwatch color="#FF1921" value="FF1921" />
+          </Tooltip>
+          <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
+        </SwatchPicker>
+      `,
+
+        // htmlFor
+        `
+        <>
+          <label htmlFor="colorPicker">red</label>
+          <ColorSwatch color="#FF1921" value="FF1921" id="colorPicker" />
+        </>
+      `,
+
+        // wrapped in label
+        `<label>red<ColorSwatch color="#FF1921" value="FF1921" /></label>`,
+
+        // text content child
+        `<ColorSwatch color="#FF1921" value="FF1921">red</ColorSwatch>`
+    ],
+
+    invalid: [
+        {
+            // no labels
+            code: `
+          <SwatchPicker>
+            <ColorSwatch color="#FF1921" value="FF1921" />
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledColorSwatch" }]
+        },
+        {
+            // aria-labelledby
+            code: `
+          <>
+            <label id="colorPicker">red</label>
+            <SwatchPicker>
+              <ColorSwatch color="#FF1921" value="FF1921" aria-labelledby="colorPicker" />
+            </SwatchPicker>
+          </>
+        `,
+            errors: [{ messageId: "noUnlabeledColorSwatch" }]
+        }
+    ]
+});
diff --git a/tests/lib/rules/emptyswatch-needs-labelling.test.ts b/tests/lib/rules/emptyswatch-needs-labelling.test.ts
new file mode 100644
index 0000000..225f315
--- /dev/null
+++ b/tests/lib/rules/emptyswatch-needs-labelling.test.ts
@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "./helper/ruleTester";
+import rule from "../../../lib/rules/emptyswatch-needs-labelling";
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+ruleTester.run("emptyswatch-needs-labelling", rule as unknown as Rule.RuleModule, {
+    valid: [
+        // ✅ aria-label on the EmptySwatch
+        `
+        <SwatchPicker>
+          <EmptySwatch value="none" aria-label="No color" />
+          <EmptySwatch value="brand" aria-label="Brand color" />
+        </SwatchPicker>
+      `,
+
+        // ✅ aria-labelledby
+        `
+        <>
+          <span id="noColorLabel">No color</span>
+          <SwatchPicker>
+            <EmptySwatch value="none" aria-labelledby="noColorLabel" />
+          </SwatchPicker>
+        </>
+      `,
+
+        // ✅ htmlFor (label -> element by id)
+        `
+        <>
+          <label htmlFor="emptyOption">No color</label>
+          <SwatchPicker>
+            <EmptySwatch id="emptyOption" value="none" />
+          </SwatchPicker>
+        </>
+      `,
+
+        // ✅ wrapped in native <label>
+        `
+        <label>
+          No color
+          <EmptySwatch value="none" />
+        </label>
+      `,
+
+        // ✅ tooltip parent (acts as label)
+        `
+        <SwatchPicker>
+          <Tooltip relationship="label" content="No color">
+            <EmptySwatch value="none" />
+          </Tooltip>
+        </SwatchPicker>
+      `,
+
+        // ✅ text content child
+        `
+        <SwatchPicker>
+          <EmptySwatch value="none">No color</EmptySwatch>
+        </SwatchPicker>
+      `
+    ],
+
+    invalid: [
+        // ❌ no labels at all
+        {
+            code: `
+          <SwatchPicker>
+            <EmptySwatch value="none" />
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledEmptySwatch" }]
+        },
+
+        // ❌ Field wrapper with label prop is NOT allowed for EmptySwatch
+        {
+            code: `
+          <SwatchPicker>
+            <Field label="No color">
+              <EmptySwatch value="none" />
+            </Field>
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledEmptySwatch" }]
+        },
+
+        // ❌ Only the container (SwatchPicker) has a label; the EmptySwatch itself isn’t named
+        {
+            code: `
+          <SwatchPicker aria-label="Color picker">
+            <EmptySwatch value="none" />
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledEmptySwatch" }]
+        }
+    ]
+});
diff --git a/tests/lib/rules/imageswatch-needs-labelling.test.ts b/tests/lib/rules/imageswatch-needs-labelling.test.ts
new file mode 100644
index 0000000..d768984
--- /dev/null
+++ b/tests/lib/rules/imageswatch-needs-labelling.test.ts
@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "./helper/ruleTester";
+import rule from "../../../lib/rules/imageswatch-needs-labelling";
+
+// -----------------------------------------------------------------------------
+// Tests (ImageSwatch)
+// ✅ allow: aria-label, aria-labelledby, wrapping <label>, Tooltip parent
+// ❌ disallow: Field parent, htmlFor, text content child, container-only labels
+// -----------------------------------------------------------------------------
+
+ruleTester.run("imageswatch-needs-labelling", rule as unknown as Rule.RuleModule, {
+    valid: [
+        // ✅ aria-label on ImageSwatch
+        `
+        <SwatchPicker>
+          <ImageSwatch src="/none.png" value="none" aria-label="No color" />
+          <ImageSwatch src="/brand.png" value="brand" aria-label="Brand color" />
+        </SwatchPicker>
+      `,
+
+        // ✅ aria-labelledby
+        `
+        <>
+          <span id="imgNoColor">No color</span>
+          <SwatchPicker>
+            <ImageSwatch src="/none.png" value="none" aria-labelledby="imgNoColor" />
+          </SwatchPicker>
+        </>
+      `,
+
+        // ✅ wrapped in native <label>
+        `
+        <label>
+          No color
+          <ImageSwatch src="/none.png" value="none" />
+        </label>
+      `,
+
+        // ✅ Tooltip parent provides label
+        `
+        <SwatchPicker>
+          <Tooltip relationship="label" content="No color">
+            <ImageSwatch src="/none.png" value="none" />
+          </Tooltip>
+        </SwatchPicker>
+      `
+    ],
+
+    invalid: [
+        // ❌ no labels at all
+        {
+            code: `
+          <SwatchPicker>
+            <ImageSwatch src="/none.png" value="none" />
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledImageSwatch" }]
+        },
+
+        // ❌ Field wrapper with label prop (not allowed)
+        {
+            code: `
+          <SwatchPicker>
+            <Field label="No color">
+              <ImageSwatch src="/none.png" value="none" />
+            </Field>
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledImageSwatch" }]
+        },
+
+        // ❌ htmlFor (not allowed for ImageSwatch)
+        {
+            code: `
+          <>
+            <label htmlFor="imgNone">No color</label>
+            <SwatchPicker>
+              <ImageSwatch id="imgNone" src="/none.png" value="none" />
+            </SwatchPicker>
+          </>
+        `,
+            errors: [{ messageId: "noUnlabeledImageSwatch" }]
+        },
+
+        // ❌ text content child (not allowed)
+        {
+            code: `
+          <SwatchPicker>
+            <ImageSwatch src="/none.png" value="none">No color</ImageSwatch>
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledImageSwatch" }]
+        },
+
+        // ❌ Only the container is labelled; ImageSwatch itself isn’t named
+        {
+            code: `
+          <SwatchPicker aria-label="Color picker">
+            <ImageSwatch src="/none.png" value="none" />
+          </SwatchPicker>
+        `,
+            errors: [{ messageId: "noUnlabeledImageSwatch" }]
+        }
+    ]
+});
diff --git a/tests/lib/rules/utils/ruleFactory.test.ts b/tests/lib/rules/utils/ruleFactory.test.ts
index 4d0cd12..5a19d44 100644
--- a/tests/lib/rules/utils/ruleFactory.test.ts
+++ b/tests/lib/rules/utils/ruleFactory.test.ts
@@ -3,6 +3,21 @@
 
 import { AST_NODE_TYPES } from "@typescript-eslint/utils";
 
+import { hasNonEmptyProp } from "../../../../lib/util/hasNonEmptyProp";
+import {
+    hasAssociatedLabelViaAriaLabelledBy,
+    isInsideLabelTag,
+    hasAssociatedLabelViaHtmlFor,
+    hasAssociatedLabelViaAriaDescribedby
+} from "../../../../lib/util/labelUtils";
+import { hasFieldParent } from "../../../../lib/util/hasFieldParent";
+import { hasAccessibleLabel, LabeledControlConfig, makeLabeledControlRule } from "../../../../lib/util/ruleFactory";
+import type { TSESLint, TSESTree } from "@typescript-eslint/utils";
+import { Rule, RuleTester } from "eslint";
+import { hasLabeledChild } from "../../../../lib/util/hasLabeledChild";
+import { hasToolTipParent } from "../../../../lib/util/hasTooltipParent";
+import { hasTextContentChild } from "../../../../lib/util/hasTextContentChild";
+
 jest.mock("../../../../lib/util/hasNonEmptyProp", () => ({
     hasNonEmptyProp: jest.fn()
 }));
@@ -22,21 +37,9 @@ jest.mock("../../../../lib/util/hasTooltipParent", () => ({
     hasToolTipParent: jest.fn()
 }));
 
-import { hasNonEmptyProp } from "../../../../lib/util/hasNonEmptyProp";
-import {
-    hasAssociatedLabelViaAriaLabelledBy,
-    isInsideLabelTag,
-    hasAssociatedLabelViaHtmlFor,
-    hasAssociatedLabelViaAriaDescribedby
-} from "../../../../lib/util/labelUtils";
-import { hasFieldParent } from "../../../../lib/util/hasFieldParent";
-
-// Import the module under test AFTER mocks
-import { hasAccessibleLabel, LabeledControlConfig, makeLabeledControlRule } from "../../../../lib/util/ruleFactory";
-import type { TSESTree } from "@typescript-eslint/utils";
-import { Rule, RuleTester } from "eslint";
-import { hasLabeledChild } from "../../../../lib/util/hasLabeledChild";
-import { hasToolTipParent } from "../../../../lib/util/hasTooltipParent";
+jest.mock("../../../../lib/util/hasTextContentChild", () => ({
+    hasTextContentChild: jest.fn()
+}));
 
 // Helper: reset all mocks to a default "false" stance
 const resetAllMocksToFalse = () => {
@@ -48,6 +51,7 @@ const resetAllMocksToFalse = () => {
     (hasFieldParent as jest.Mock).mockReset().mockReturnValue(false);
     (hasLabeledChild as jest.Mock).mockReset().mockReturnValue(false);
     (hasToolTipParent as jest.Mock).mockReset().mockReturnValue(false);
+    (hasTextContentChild as jest.Mock).mockReset().mockReturnValue(false);
 };
 
 beforeEach(() => {
@@ -67,11 +71,37 @@ function makeOpeningElement(name: string, attributes: Array<Partial<TSESTree.JSX
     };
 }
 
+function makeClosingElement(name: string): TSESTree.JSXClosingElement {
+    return {
+        type: AST_NODE_TYPES.JSXClosingElement,
+        name: { type: "JSXIdentifier", name } as any,
+        range: [0, 0],
+        loc: {} as any
+    };
+}
+
+function makeElement(): TSESTree.JSXElement {
+    return {
+        type: AST_NODE_TYPES.JSXElement,
+        openingElement: makeOpeningElement("RadioGroup"),
+        closingElement: makeClosingElement("RadioGroup"),
+        children: [],
+        range: [0, 0],
+        loc: {} as any
+    };
+}
+
 /* -------------------------------------------------------------------------- */
 /*                          Unit tests: hasAccessibleLabel                     */
 /* -------------------------------------------------------------------------- */
 
 describe("hasAccessibleLabel (unit)", () => {
+    // Mock context with getSourceCode method
+    const mockContext = {
+        report: jest.fn(),
+        getSourceCode: jest.fn()
+    } as unknown as TSESLint.RuleContext<string, []>;
+
     const cfg: LabeledControlConfig = {
         component: "RadioGroup",
         labelProps: ["label", "aria-label"],
@@ -83,25 +113,28 @@ describe("hasAccessibleLabel (unit)", () => {
         allowDescribedBy: true,
         messageId: "errorMsg",
         description: "anything",
-        allowLabeledChild: false
+        allowLabeledChild: true,
+        allowTextContentChild: true
     };
 
     test("returns false when no heuristics pass", () => {
         const node = makeOpeningElement("RadioGroup");
-        const ctx = {};
-        expect(hasAccessibleLabel(node, ctx, cfg)).toBe(false);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(false);
     });
 
     test("true when allowFieldParent and hasFieldParent(ctx) === true", () => {
         (hasFieldParent as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when allowTooltipParent and hasTooltipParent(ctx) === true", () => {
         (hasToolTipParent as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when a label prop is non-empty via hasNonEmptyProp", () => {
@@ -112,31 +145,50 @@ describe("hasAccessibleLabel (unit)", () => {
                 name: { type: AST_NODE_TYPES.JSXIdentifier, name: "label", range: [0, 0], loc: {} as any }
             }
         ]);
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when allowWrappingLabel and isInsideLabelTag(ctx) === true", () => {
         (isInsideLabelTag as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when allowFor and hasAssociatedLabelViaHtmlFor(...) === true", () => {
         (hasAssociatedLabelViaHtmlFor as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when allowLabelledBy and hasAssociatedLabelViaAriaLabelledBy(...) === true", () => {
         (hasAssociatedLabelViaAriaLabelledBy as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 
     test("true when allowDescribedByBy and hasAssociatedLabelViaAriaDescribedBy(...) === true", () => {
         (hasAssociatedLabelViaAriaDescribedby as jest.Mock).mockReturnValue(true);
         const node = makeOpeningElement("RadioGroup");
-        expect(hasAccessibleLabel(node, {}, cfg)).toBe(true);
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
+    });
+
+    test("true when allowLabeledChild and hasLabeledChild(...) === true", () => {
+        (hasLabeledChild as jest.Mock).mockReturnValue(true);
+        const node = makeOpeningElement("RadioGroup");
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
+    });
+
+    test("true when allowTextContentChild and hasTextContentChild(...) === true", () => {
+        (hasTextContentChild as jest.Mock).mockReturnValue(true);
+        const node = makeOpeningElement("RadioGroup");
+        const element = makeElement();
+        expect(hasAccessibleLabel(node, element, mockContext, cfg)).toBe(true);
     });
 });
 
@@ -158,7 +210,8 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
         allowDescribedBy: true,
         messageId: "noUnlabeledRadioGroup",
         description: "Accessibility: RadioGroup must have a programmatic and visual label.",
-        allowLabeledChild: false
+        allowLabeledChild: true,
+        allowTextContentChild: true
     };
 
     // 1) No heuristics -> report
@@ -332,4 +385,50 @@ describe("makeLabeledControlRule (RuleTester integration)", () => {
             invalid: []
         });
     });
+
+    // 10) has labeled child
+    describe("accepts when has labeled child", () => {
+        beforeEach(() => {
+            resetAllMocksToFalse();
+            (hasLabeledChild as jest.Mock).mockReturnValue(true);
+        });
+
+        const rule = makeLabeledControlRule(baseCfg);
+
+        ruleTester.run("no-unlabeled-radio-group (has labeled child)", rule as unknown as Rule.RuleModule, {
+            valid: [
+                {
+                    code: `
+                        <RadioGroup>
+                            <Label>Account type</Label>
+                        </RadioGroup>
+                    `
+                }
+            ],
+            invalid: []
+        });
+    });
+
+    // 11) has text content child
+    describe("accepts when has text content child", () => {
+        beforeEach(() => {
+            resetAllMocksToFalse();
+            (hasTextContentChild as jest.Mock).mockReturnValue(true);
+        });
+
+        const rule = makeLabeledControlRule(baseCfg);
+
+        ruleTester.run("no-unlabeled-radio-group (has text content child)", rule as unknown as Rule.RuleModule, {
+            valid: [
+                {
+                    code: `
+                        <RadioGroup>
+                            Account type
+                        </RadioGroup>
+                    `
+                }
+            ],
+            invalid: []
+        });
+    });
 });

From 3833449b4167ee9d8f546b935fc8bdd1a4fae289 Mon Sep 17 00:00:00 2001
From: Aubrey Quinn <aubreyquinn@microsoft.com>
Date: Thu, 18 Sep 2025 10:04:27 +0100
Subject: [PATCH 2/4] updated read me

---
 README.md                                 |   3 +
 docs/rules/colorswatch-needs-labelling.md | 107 +---------------------
 docs/rules/emptyswatch-needs-labelling.md |   2 +-
 docs/rules/imageswatch-needs-labelling.md |   2 +-
 4 files changed, 6 insertions(+), 108 deletions(-)

diff --git a/README.md b/README.md
index 29e74b0..22c9d86 100644
--- a/README.md
+++ b/README.md
@@ -116,14 +116,17 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [badge-needs-accessible-name](docs/rules/badge-needs-accessible-name.md)                                               |                                                                                                                                                        | ✅  |    | 🔧 |
 | [breadcrumb-needs-labelling](docs/rules/breadcrumb-needs-labelling.md)                                                 | All interactive elements must have an accessible name                                                                                                  | ✅  |    |    |
 | [checkbox-needs-labelling](docs/rules/checkbox-needs-labelling.md)                                                     | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby                                                        | ✅  |    |    |
+| [colorswatch-needs-labelling](docs/rules/colorswatch-needs-labelling.md)                                               | Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..                                                | ✅  |    |    |
 | [combobox-needs-labelling](docs/rules/combobox-needs-labelling.md)                                                     | All interactive elements must have an accessible name                                                                                                  | ✅  |    |    |
 | [compound-button-needs-labelling](docs/rules/compound-button-needs-labelling.md)                                       | Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby                                   | ✅  |    |    |
 | [counter-badge-needs-count](docs/rules/counter-badge-needs-count.md)                                                   |                                                                                                                                                        | ✅  |    | 🔧 |
 | [dialogbody-needs-title-content-and-actions](docs/rules/dialogbody-needs-title-content-and-actions.md)                 | A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions)                                                      | ✅  |    |    |
 | [dialogsurface-needs-aria](docs/rules/dialogsurface-needs-aria.md)                                                     | DialogueSurface need accessible labelling: aria-describedby on DialogueSurface and aria-label or aria-labelledby(if DialogueTitle is missing)          | ✅  |    |    |
 | [dropdown-needs-labelling](docs/rules/dropdown-needs-labelling.md)                                                     | Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label                                                          | ✅  |    |    |
+| [emptyswatch-needs-labelling](docs/rules/emptyswatch-needs-labelling.md)                                               | Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..                                                | ✅  |    |    |
 | [field-needs-labelling](docs/rules/field-needs-labelling.md)                                                           | Accessibility: Field must have label                                                                                                                   | ✅  |    |    |
 | [image-button-missing-aria](docs/rules/image-button-missing-aria.md)                                                   | Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby                                      | ✅  |    |    |
+| [imageswatch-needs-labelling](docs/rules/imageswatch-needs-labelling.md)                                               | Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc..                                                | ✅  |    |    |
 | [input-components-require-accessible-name](docs/rules/input-components-require-accessible-name.md)                     | Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label                                         | ✅  |    |    |
 | [link-missing-labelling](docs/rules/link-missing-labelling.md)                                                         | Accessibility: Image links must have an accessible name. Add either text content, labelling to the image or labelling to the link itself.              | ✅  |    | 🔧 |
 | [menu-item-needs-labelling](docs/rules/menu-item-needs-labelling.md)                                                   | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby                                                        | ✅  |    |    |
diff --git a/docs/rules/colorswatch-needs-labelling.md b/docs/rules/colorswatch-needs-labelling.md
index d076f50..c528f1f 100644
--- a/docs/rules/colorswatch-needs-labelling.md
+++ b/docs/rules/colorswatch-needs-labelling.md
@@ -1,110 +1,5 @@
-# Accessibility: ColorSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`)
+# Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`)
 
 💼 This rule is enabled in the ✅ `recommended` config.
 
 <!-- end auto-generated rule header -->
-
-All interactive elements must have an accessible name.
-
-`ColorSwatch` without a supported label lacks an accessible name for assistive technology users.
-
-## Allowed labelling strategies
-
-- ✅ `aria-label` **on `ColorSwatch`**
-- ✅ `aria-labelledby` **on `ColorSwatch`**
-- ✅ `htmlFor`/`id`
-- ✅ Wrapping native `<label>…</label>`
-- ✅ `Tooltip` parent with `relationship="label"`
-- ✅ `Field` parent label
-- ✅ Text content child
-- ❌ Container-only label (e.g., only the surrounding `SwatchPicker` is labelled)
-
-## Ways to fix
-
-- Add `aria-label` / `aria-labelledby`.
-- Use `<label htmlFor="…">` + `id="…"` on `ColorSwatch`.
-- Wrap with `<label>` or use a `Tooltip (relationship="label")`.
-- Provide a `Field label="…"` parent.
-- Provide meaningful text as the child of `ColorSwatch`.
-
-## Rule Details
-
-This rule ensures `ColorSwatch` is labelled using **any** supported strategy above.
-
-### Examples of **incorrect** code
-
-```jsx
-// No label
-<SwatchPicker>
-  <ColorSwatch color="#FF1921" value="FF1921" />
-</SwatchPicker>
-```
-
-```jsx
-// Container-only label: ColorSwatch itself is unnamed
-<SwatchPicker aria-label="Color picker">
-  <ColorSwatch color="#FF1921" value="FF1921" />
-</SwatchPicker>
-```
-
-### Examples of **correct** code
-
-```jsx
-// aria-label
-<SwatchPicker>
-  <ColorSwatch color="#FF1921" value="FF1921" aria-label="Red" />
-</SwatchPicker>
-```
-
-```jsx
-// aria-labelledby
-<>
-  <span id="red-swatch">Red</span>
-  <SwatchPicker>
-    <ColorSwatch color="#FF1921" value="FF1921" aria-labelledby="red-swatch" />
-  </SwatchPicker>
-</>
-```
-
-```jsx
-// htmlFor/id
-<>
-  <label htmlFor="sw-red">Red</label>
-  <SwatchPicker>
-    <ColorSwatch id="sw-red" color="#FF1921" value="FF1921" />
-  </SwatchPicker>
-</>
-```
-
-```jsx
-// Wrapping native <label>
-<label>
-  Red
-  <ColorSwatch color="#FF1921" value="FF1921" />
-</label>
-```
-
-```jsx
-// Tooltip (acts as a label)
-<SwatchPicker>
-  <Tooltip relationship="label" content="Red">
-    <ColorSwatch color="#FF1921" value="FF1921" />
-  </Tooltip>
-</SwatchPicker>
-```
-
-```jsx
-// Field parent
-<SwatchPicker>
-  <Field label="Red">
-    <ColorSwatch color="#FF1921" value="FF1921" />
-  </Field>
-</SwatchPicker>
-```
-
-```jsx
-// Text content child
-<SwatchPicker>
-  <ColorSwatch color="#FF1921" value="FF1921">Red</ColorSwatch>
-</SwatchPicker>
-```
\ No newline at end of file
diff --git a/docs/rules/emptyswatch-needs-labelling.md b/docs/rules/emptyswatch-needs-labelling.md
index 57ad0bb..2a94b87 100644
--- a/docs/rules/emptyswatch-needs-labelling.md
+++ b/docs/rules/emptyswatch-needs-labelling.md
@@ -1,4 +1,4 @@
-# Accessibility: EmptySwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`)
+# Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`)
 
 💼 This rule is enabled in the ✅ `recommended` config.
 
diff --git a/docs/rules/imageswatch-needs-labelling.md b/docs/rules/imageswatch-needs-labelling.md
index 652162e..f5efbc1 100644
--- a/docs/rules/imageswatch-needs-labelling.md
+++ b/docs/rules/imageswatch-needs-labelling.md
@@ -1,4 +1,4 @@
-# Accessibility: ImageSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling`)
+# Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling`)
 
 💼 This rule is enabled in the ✅ `recommended` config.
 

From ad02c7bd723d1b44c08924540a3dce9f9194c311 Mon Sep 17 00:00:00 2001
From: Aubrey Quinn <aubreyquinn@microsoft.com>
Date: Thu, 18 Sep 2025 10:15:13 +0100
Subject: [PATCH 3/4] removed console log

---
 lib/util/ruleFactory.ts | 78 +++++------------------------------------
 1 file changed, 9 insertions(+), 69 deletions(-)

diff --git a/lib/util/ruleFactory.ts b/lib/util/ruleFactory.ts
index 73ba9ae..b91b50f 100644
--- a/lib/util/ruleFactory.ts
+++ b/lib/util/ruleFactory.ts
@@ -68,75 +68,15 @@ export function hasAccessibleLabel(
     const allowDescribedBy = !!config.allowDescribedBy;
     const allowLabeledChild = !!config.allowLabeledChild;
     const allowTextContentChild = !!config.allowTextContentChild;
-
-    console.log("hasAccessibleLabel called with:", {
-        component: config.component,
-        attributes: opening.attributes,
-        allowFieldParent,
-        allowWrappingLabel,
-        allowHtmlFor,
-        allowLabelledBy,
-        allowTooltipParent,
-        allowDescribedBy,
-        allowLabeledChild,
-        allowTextContentChild
-    });
-
-    if (allowFieldParent) {
-        const res = hasFieldParent(context);
-        console.log("hasFieldParent:", res);
-        if (res) return true;
-    }
-
-    if (config.labelProps?.length) {
-        const res = config.labelProps.some(p => hasNonEmptyProp(opening.attributes, p));
-        console.log("hasNonEmptyProp:", res, config.labelProps);
-        if (res) return true;
-    }
-
-    if (allowWrappingLabel) {
-        const res = isInsideLabelTag(context);
-        console.log("isInsideLabelTag:", res);
-        if (res) return true;
-    }
-
-    if (allowHtmlFor) {
-        const res = hasAssociatedLabelViaHtmlFor(opening, context);
-        console.log("hasAssociatedLabelViaHtmlFor:", res);
-        if (res) return true;
-    }
-
-    if (allowLabelledBy) {
-        const res = hasAssociatedLabelViaAriaLabelledBy(opening, context);
-        console.log("hasAssociatedLabelViaAriaLabelledBy:", res);
-        if (res) return true;
-    }
-
-    if (allowTooltipParent) {
-        const res = hasToolTipParent(context);
-        console.log("hasToolTipParent:", res);
-        if (res) return true;
-    }
-
-    if (allowDescribedBy) {
-        const res = hasAssociatedLabelViaAriaDescribedby(opening, context);
-        console.log("hasAssociatedLabelViaAriaDescribedby:", res);
-        if (res) return true;
-    }
-
-    if (allowLabeledChild) {
-        const res = hasLabeledChild(opening, context);
-        console.log("hasLabeledChild:", res);
-        if (res) return true;
-    }
-
-    if (allowTextContentChild) {
-        const res = hasTextContentChild(element);
-        console.log("hasTextContentChild:", res);
-        if (res) return true;
-    }
-
-    console.log("No accessible label found, returning false.");
+    if (allowFieldParent && hasFieldParent(context)) return true;
+    if (config.labelProps?.some(p => hasNonEmptyProp(opening.attributes, p))) return true;
+    if (allowWrappingLabel && isInsideLabelTag(context)) return true;
+    if (allowHtmlFor && hasAssociatedLabelViaHtmlFor(opening, context)) return true;
+    if (allowLabelledBy && hasAssociatedLabelViaAriaLabelledBy(opening, context)) return true;
+    if (allowTooltipParent && hasToolTipParent(context)) return true;
+    if (allowDescribedBy && hasAssociatedLabelViaAriaDescribedby(opening, context)) return true;
+    if (allowLabeledChild && hasLabeledChild(opening, context)) return true;
+    if (allowTextContentChild && hasTextContentChild(element)) return true;
     return false;
 }
 

From d02477b2e6d8e1e605e61e23e806fe577ecbf226 Mon Sep 17 00:00:00 2001
From: Aubrey Quinn <aubreyquinn@microsoft.com>
Date: Thu, 18 Sep 2025 10:22:32 +0100
Subject: [PATCH 4/4] updated comments on factory

---
 lib/util/ruleFactory.ts | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/lib/util/ruleFactory.ts b/lib/util/ruleFactory.ts
index b91b50f..17352ce 100644
--- a/lib/util/ruleFactory.ts
+++ b/lib/util/ruleFactory.ts
@@ -21,21 +21,19 @@ export type LabeledControlConfig = {
     messageId: string;
     description: string;
     labelProps: string[]; // e.g. ["aria-label", "title", "label"]
-    /** Accept a parent <Field label="..."> wrapper as providing the label. */
-    allowFieldParent: boolean; // default false
-    allowHtmlFor: boolean /** Accept <label htmlFor="..."> association. */;
-    allowLabelledBy: boolean /** Accept aria-labelledby association. */;
-    allowWrappingLabel: boolean /** Accept being wrapped in a <label> element. */;
-    allowTooltipParent: boolean /** Accept a parent <Tooltip content="..."> wrapper as providing the label. */;
+    allowFieldParent: boolean; // Accept a parent <Field label="..."> wrapper as providing the label.
+    allowHtmlFor: boolean; // Accept <label htmlFor="..."> association.
+    allowLabelledBy: boolean; // Accept aria-labelledby association.
+    allowWrappingLabel: boolean; // Accept being wrapped in a <label> element.
+    allowTooltipParent: boolean; // Accept a parent <Tooltip content="..."> wrapper as providing the label.
     /**
      * Accept aria-describedby as a labeling strategy.
      * NOTE: This is discouraged for *primary* labeling; prefer text/aria-label/labelledby.
      * Keep this off unless a specific component (e.g., Icon-only buttons) intentionally uses it.
      */
     allowDescribedBy: boolean;
-    // NEW: treat labeled child content (img alt, svg title, aria-label on role="img") as the name
-    allowLabeledChild: boolean;
-    allowTextContentChild?: boolean;
+    allowLabeledChild: boolean; // Accept labeled child elements to provide the label e.g. <Button><img alt="..." /></Button>
+    allowTextContentChild?: boolean; // Accept text children to provide the label e.g. <Button>Click me</Button>
 };
 
 /**