diff --git a/.changeset/color-variant-picker-radiogroup-name.md b/.changeset/color-variant-picker-radiogroup-name.md
new file mode 100644
index 0000000000..7be0d06d29
--- /dev/null
+++ b/.changeset/color-variant-picker-radiogroup-name.md
@@ -0,0 +1,39 @@
+---
+'@object-ui/app-shell': patch
+---
+
+The designer's colour swatch rows now announce WHAT they colour, and the Dashboard widget inspector's "Color Variant" label no longer points at nothing.
+
+`ColorVariantPicker` renders its swatches inside a `div role="radiogroup"`. Each
+swatch was named by its colour ("Blue", "Success"); the group was named by
+nothing at all, so focus entering it announced an anonymous radiogroup — eight
+colours with no statement of which field they set — while the visible label
+beside it belonged to no one.
+
+`DashboardWidgetInspector` had the worse half of it. Its `Field` wrapper renders
+`Label htmlFor={id}` and expects the wrapped control to carry that id; the picker
+accepted no id, so `htmlFor="widget-color"` was a DANGLING IDREF — an association
+tooling reports as closed while it resolves to no element, which is why a static
+"every label has a `for`" check saw nothing wrong (objectui#4010).
+
+A `for` cannot fix this: `role="radiogroup"` is a container, not a labelable
+element, so a `for` aimed at it is inert HTML that names nobody. The picker now
+takes its name through ARIA, required at the type level and singular — exactly
+one of `ariaLabelledBy` or `ariaLabel`, so an unnamed colour group no longer
+compiles (the contract `InspectorComboField` got in objectui#3997):
+
+- **Dashboard widget inspector** — the "Color Variant" label publishes
+  `widget-color-label` and drops its `for`; the group answers by IDREF. The
+  visible text IS the accessible name, in every locale, with no second string to
+  translate.
+- **Page block properties panel** — the "Color" label never carried a `for`, so
+  nothing dangled there; the group was simply anonymous. Same repair, with the
+  id minted per instance so two colour rows cannot collide.
+- **Generic `color-picker` widget** — its host writes `Label htmlFor` before it
+  can know whether this field renders a swatch group or a labelable
+  `input type="color"`, so the group carries its own name, taken from the host's
+  own label source.
+
+This is the WAI-ARIA group pattern this repo already applies to group-labelled
+field widgets (objectui#3961 → #3990), applied to the three surfaces that were
+still outside it.
diff --git a/packages/app-shell/src/views/metadata-admin/SchemaForm.colorPicker.labelling.test.tsx b/packages/app-shell/src/views/metadata-admin/SchemaForm.colorPicker.labelling.test.tsx
new file mode 100644
index 0000000000..723185101b
--- /dev/null
+++ b/packages/app-shell/src/views/metadata-admin/SchemaForm.colorPicker.labelling.test.tsx
@@ -0,0 +1,104 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#4010, the third call site — the generic `color-picker` widget.
+ *
+ * `ColorPickerWidget` renders TWO different surfaces from one registry entry,
+ * and only one of them can be named the way its host assumes:
+ *
+ *  - an enum palette → `div[role="radiogroup"]`, a container no `<label for>`
+ *    can name;
+ *  - a free colour → `<input type="color">`, a labelable element.
+ *
+ * `MetadataField` writes `<Label htmlFor={id}>` and hands the widget the same
+ * `id` BEFORE either branch is chosen — the choice is made inside the widget,
+ * from `schema`/`fieldSpec`. So the host cannot publish an IDREF for the group
+ * to answer, the way the two curated inspectors' labels now do; teaching it to
+ * needs a per-widget `labelling` declaration (the shape `packages/components`'
+ * form renderer already has for field widgets, objectui#3961) and is filed as
+ * objectui#4871 rather than guessed at here.
+ *
+ * Until then the group carries its OWN name, like this file's other
+ * unassociated groups. Measured on `origin/main` before the change, the enum
+ * branch's radiogroup had `aria-label: null`, `aria-labelledby: null` and an
+ * accessible name of `''` — anonymous, while the free-colour branch beside it
+ * had been self-naming all along.
+ *
+ * The host's `for` still resolves to nothing at THIS site; that is the residual
+ * objectui#4871 carries. This file deliberately does not paper over it by moving
+ * the id onto the group, which would make a link-checker happy while naming
+ * nobody (pinned below).
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { SchemaForm } from './SchemaForm';
+
+afterEach(cleanup);
+
+const form = { type: 'simple' as const, sections: [{ label: 'Basics', fields: [{ field: 'colorVariant' }] }] };
+
+/** `detectColorWidget` resolves `colorVariant` to the `color-picker` widget. */
+function renderColorField(schema: Record<string, unknown>, value: unknown = 'blue') {
+  return render(
+    <SchemaForm
+      schema={{ type: 'object', properties: { colorVariant: schema } } as never}
+      form={form}
+      value={{ colorVariant: value }}
+      onChange={() => {}}
+    />,
+  );
+}
+
+describe('color-picker (enum branch) — the swatch group is named (objectui#4010)', () => {
+  it('announces the field label rather than nothing', () => {
+    renderColorField({ type: 'string', title: 'Color Variant', enum: ['default', 'blue', 'teal'] });
+
+    const group = screen.getByRole('radiogroup');
+    // Pre-fix: `''`. The swatches inside were named ("Blue"); the group was not.
+    expect(group).toHaveAccessibleName('Color Variant');
+    // Equal to the visible label — a generic stand-in ("Color") over a field
+    // labelled "Color Variant" would fail WCAG 2.5.3 (Label in Name).
+    expect(screen.getByText('Color Variant')).toBeInTheDocument();
+    expect(screen.getByRole('radiogroup', { name: 'Color Variant' })).toBeInTheDocument();
+  });
+
+  it('does NOT take the host id to make the dangling `for` resolve', () => {
+    // The refused half-fix. `role="radiogroup"` is not labelable, so an id here
+    // would satisfy "the IDREF resolves" while the group stayed unnamed — the
+    // shape objectui#4010 was filed to remove, not to relocate.
+    renderColorField({ type: 'string', title: 'Color Variant', enum: ['default', 'blue'] });
+
+    const group = screen.getByRole('radiogroup');
+    expect(group).not.toHaveAttribute('id');
+    expect(group).not.toHaveAttribute('aria-labelledby');
+    // The host's own `for` is untouched by this change and still resolves to
+    // nothing HERE — a host-side `labelling` declaration is what fixes that
+    // (objectui#4871). Documented, not endorsed: this assertion is the tripwire
+    // that makes whoever lands #4871 update this file.
+    const label = screen.getByText('Color Variant');
+    expect(label).toHaveAttribute('for', 'mdf-colorVariant');
+    expect(document.getElementById('mdf-colorVariant')).toBeNull();
+  });
+
+  it('falls back to the constant only when the host offers no label source', () => {
+    // No `title`, so `MetadataField` prettifies the field name. The widget can
+    // read neither that computation nor the locale, so it degrades to the same
+    // constant its free-colour sibling has always used.
+    renderColorField({ type: 'string', enum: ['default', 'blue'] });
+    expect(screen.getByRole('radiogroup')).toHaveAccessibleName('Color');
+  });
+});
+
+describe('color-picker (free-colour branch) — unchanged', () => {
+  it('still renders the native picker, named as before', () => {
+    // The branch split is where this change lives, so the other side is pinned
+    // too: no enum ⇒ no radiogroup, and the labelable input keeps its own name.
+    renderColorField({ type: 'string', title: 'Brand Color' }, '#112233');
+
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+    const native = document.querySelector('input[type="color"]');
+    expect(native).not.toBeNull();
+    expect(native).toHaveAttribute('aria-label', 'Color');
+  });
+});
diff --git a/packages/app-shell/src/views/metadata-admin/color-variant-field.labelling.test.tsx b/packages/app-shell/src/views/metadata-admin/color-variant-field.labelling.test.tsx
new file mode 100644
index 0000000000..666e53e779
--- /dev/null
+++ b/packages/app-shell/src/views/metadata-admin/color-variant-field.labelling.test.tsx
@@ -0,0 +1,189 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#4010 — `ColorVariantPicker`'s `role="radiogroup"` must carry a name.
+ *
+ * Each swatch was already named by its COLOUR ("Blue", "Success"). The group was
+ * named by nothing at all, so focus entering it announced an anonymous
+ * radiogroup: eight colours, no statement of what they colour. The visible
+ * "Color" label beside it belonged to no one.
+ *
+ * A `<label for>` cannot repair that. `role="radiogroup"` is a CONTAINER, not a
+ * labelable element, so a `for` aimed at it is inert HTML — the reason this repo
+ * moved group-labelled field widgets onto the WAI-ARIA group pattern
+ * (objectui#3961 → #3990) and the reason `form.tsx` drops the `for` outright
+ * when it publishes the label's id instead. So the pins below are about the
+ * IDREF, not about `getByLabelText`.
+ *
+ * ## What each assertion is guarding, and why it is not one assertion
+ *
+ * `toHaveAccessibleName` alone is not enough. An `aria-labelledby` pointing at
+ * the WRONG element still computes a name — that element's text — and a
+ * name-only assertion cannot tell "named by its own label" from "named by
+ * whatever happened to be nearby" (the #4788/#4824 reachability family). So the
+ * IDREF is also resolved to a NODE and that node is asserted to BE the visible
+ * label, inside this field's own container. And because a duplicated id
+ * resolves silently to the first owner, the id's owner count is pinned too.
+ *
+ * The type-level cases sit in this file rather than a separate one because
+ * `packages/app-shell/tsconfig.test.json` compiles every `src/**\/*.test.tsx`
+ * in the package and is chained from its `type-check` script (objectui#4040
+ * retired the narrow `tsconfig.typetests.json` after the package graduated). A
+ * `@ts-expect-error` here is therefore read by a compiler CI runs — the
+ * distinction objectui#3009 was filed over.
+ */
+
+import * as React from 'react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup, within } from '@testing-library/react';
+import { Label } from '@object-ui/components';
+import { ColorVariantPicker } from './color-variant-field';
+
+afterEach(cleanup);
+
+const noop = (_v: string) => {};
+const OPTIONS = [{ value: 'default' }, { value: 'blue', label: 'Blue' }];
+
+/** How many elements in the document carry this exact id. */
+const idOwners = (id: string) => document.querySelectorAll(`[id="${id}"]`).length;
+
+describe('ColorVariantPicker — named by a visible label (IDREF)', () => {
+  /** The call-site shape both inspectors use: a label that publishes its id. */
+  function renderLabelled(labelText = 'Color') {
+    return render(
+      <div data-testid="field">
+        <Label id="color-label">{labelText}</Label>
+        <ColorVariantPicker ariaLabelledBy="color-label" value="blue" onChange={noop} options={OPTIONS} />
+      </div>,
+    );
+  }
+
+  it('resolves its IDREF to the visible label NODE, in its own field container', () => {
+    renderLabelled();
+    const group = screen.getByRole('radiogroup');
+
+    const idref = group.getAttribute('aria-labelledby');
+    // Truthy first: with no association at all both sides read `null`, and a
+    // bare `toBe` would pass on the defect (null === null).
+    expect(idref).toBeTruthy();
+
+    const target = document.getElementById(idref!);
+    expect(target).not.toBeNull();
+    // Not merely "some element with the right text" — THE visible label.
+    expect(target).toBe(screen.getByText('Color'));
+    expect(target!.tagName).toBe('LABEL');
+    // Container ownership: the name comes from this field, not from a
+    // same-texted label elsewhere on a panel that renders many.
+    expect(within(screen.getByTestId('field')).getByText('Color')).toBe(target);
+    // Exactly one element answers that id.
+    expect(idOwners(idref!)).toBe(1);
+  });
+
+  it('computes the accessible name a screen reader announces', () => {
+    renderLabelled();
+    // The end state, through the same accname walk assistive tech performs.
+    expect(screen.getByRole('radiogroup')).toHaveAccessibleName('Color');
+    expect(screen.getByRole('radiogroup', { name: 'Color' })).toBeInTheDocument();
+  });
+
+  it('keeps the IDREF as the ONLY naming channel', () => {
+    // One label, one channel. A second `aria-label` duplicating the visible text
+    // is the double-announcement failure objectui#3961/#3978 removed — and the
+    // group must NOT carry the field id either, which would make a `<label for>`
+    // resolve while still naming nothing (the cosmetic half-fix #4010 refused).
+    renderLabelled();
+    const group = screen.getByRole('radiogroup');
+    expect(group).not.toHaveAttribute('aria-label');
+    expect(group).not.toHaveAttribute('id');
+    // No `for` anywhere: nothing may claim a labelable association to a group.
+    expect(document.querySelectorAll('label[for]')).toHaveLength(0);
+  });
+
+  it('names the GROUP without disturbing the per-swatch names', () => {
+    renderLabelled();
+    const group = screen.getByRole('radiogroup');
+    // The swatches keep their own colour names…
+    expect(within(group).getByRole('radio', { name: 'Blue' })).toBeInTheDocument();
+    // …and the group's name is the field's, not a colour's.
+    expect(group).toHaveAccessibleName('Color');
+  });
+
+  it('carries the label text verbatim, whatever the locale rendered', () => {
+    // The IDREF channel cannot drift from the visible text: it IS the text.
+    // A translated panel therefore needs no second translated string.
+    renderLabelled('颜色');
+    expect(screen.getByRole('radiogroup')).toHaveAccessibleName('颜色');
+  });
+});
+
+describe('ColorVariantPicker — self-owned name (aria-label)', () => {
+  it('names the group when no visible label is in a position to publish an id', () => {
+    // The generic `SchemaForm` host: its `<Label htmlFor={id}>` is written
+    // before it can know this widget renders a group rather than a labelable
+    // `<input type="color">`.
+    render(<ColorVariantPicker ariaLabel="Color Variant" value="blue" onChange={noop} options={OPTIONS} />);
+
+    const group = screen.getByRole('radiogroup');
+    expect(group).toHaveAccessibleName('Color Variant');
+    // Single channel here too — no IDREF pointing at an id nothing publishes,
+    // which would be the dangling reference this issue exists to remove.
+    expect(group).not.toHaveAttribute('aria-labelledby');
+  });
+});
+
+describe('ColorVariantPicker — naming is required, and singular (compile time)', () => {
+  it('is pinned by the compiler, not only by the DOM', () => {
+    // Neither mistake has a runtime symptom the component could report: an
+    // unnamed swatch row renders, lays out and commits values perfectly. It is
+    // wrong only for the users who cannot see it, so the check has to happen at
+    // authoring time or not at all.
+    const anonymous = (
+      // @ts-expect-error objectui#4010 — an unnamed colour group must not compile.
+      <ColorVariantPicker value="blue" onChange={noop} options={OPTIONS} />
+    );
+    const doublyNamed = (
+      // @ts-expect-error objectui#4010 — the two naming channels are exclusive.
+      // (The directive belongs on the ELEMENT, not on the offending attribute:
+      // an incompatible union is reported against the whole attributes object,
+      // so a per-attribute directive reads as unused and fails the build.)
+      <ColorVariantPicker ariaLabel="Color" ariaLabelledBy="color-label" value="blue" onChange={noop} />
+    );
+    expect([anonymous, doublyNamed].every(React.isValidElement)).toBe(true);
+  });
+
+  it('pins the union itself, not only how JSX happens to check it', () => {
+    // Assignability is the contract; JSX is one authoring surface over it, and
+    // excess-property checking makes the two differ often enough to pin both.
+    type Assert< T extends true > = T;
+    type Extends< A, B > = [A] extends [B] ? true : false;
+    type IsAny< T > = 0 extends 1 & T ? true : false;
+    type Equal< A, B > = (< T >() => T extends A ? 1 : 2) extends < T >() => T extends B ? 1 : 2
+      ? true
+      : false;
+    type Props = React.ComponentProps< typeof ColorVariantPicker >;
+    /** Everything the picker needs EXCEPT a name. */
+    type Base = { value: string | undefined; onChange: (v: string) => void };
+
+    // Guard against the probe lying: were the props `any`, every assertion
+    // below would pass while proving nothing.
+    type _PropsNotAny = Assert< Equal< IsAny< Props >, false > >;
+
+    type _IdrefIsANaming = Assert< Extends< Base & { ariaLabelledBy: string }, Props > >;
+    type _SelfIsANaming = Assert< Extends< Base & { ariaLabel: string }, Props > >;
+    // The defect this file exists for: three call sites shipped this shape.
+    type _AnonymousRejected = Assert< Equal< Extends< Base, Props >, false > >;
+    type _BothRejected = Assert<
+      Equal< Extends< Base & { ariaLabel: string; ariaLabelledBy: string }, Props >, false >
+    >;
+
+    expect(true).toBe(true);
+  });
+
+  it('accepts each legal spelling as a real element', () => {
+    // Keeps the positive cases honest: a union too tight for a shape a real call
+    // site needs would fail here rather than only in CI's build.
+    const byIdref = <ColorVariantPicker ariaLabelledBy="color-label" value="blue" onChange={noop} />;
+    const bySelf = <ColorVariantPicker ariaLabel="Color" value="blue" onChange={noop} />;
+    expect([byIdref, bySelf].every(React.isValidElement)).toBe(true);
+  });
+});
diff --git a/packages/app-shell/src/views/metadata-admin/color-variant-field.tsx b/packages/app-shell/src/views/metadata-admin/color-variant-field.tsx
index 95d426b129..7de07412cc 100644
--- a/packages/app-shell/src/views/metadata-admin/color-variant-field.tsx
+++ b/packages/app-shell/src/views/metadata-admin/color-variant-field.tsx
@@ -40,7 +40,41 @@ export function colorVariantCss(value: string | undefined): string {
   return CSS_BY_VALUE[value] ?? '#9ca3af';
 }
 
-export function ColorVariantPicker({ value, onChange, disabled, options }: {
+/**
+ * How this picker's `radiogroup` gets its accessible name (objectui#4010).
+ *
+ * The swatches are `role="radio"` buttons, each already named by its colour —
+ * "Blue", "Success". The GROUP is a separate naming surface, and its name is
+ * the one that says WHAT is being coloured; without it focus enters an
+ * anonymous radiogroup and the field's visible label is unowned text.
+ *
+ * Naming is required at the type level, exactly one channel, mirroring
+ * `InspectorComboField` (objectui#3997): an unnamed picker does not compile.
+ *
+ *  - `ariaLabelledBy` — a VISIBLE label names this field. It publishes its own
+ *    `id` and the group answers by IDREF. This is the WAI-ARIA group pattern
+ *    this repo already applies to `labelling: 'group'` field widgets
+ *    (objectui#3961 → #3990), and it is the right channel here for the reason
+ *    stated there: `role="radiogroup"` is a CONTAINER, not a labelable element,
+ *    so a `<label for>` aimed at it is inert HTML that names nothing. The
+ *    visible text becomes the accessible name verbatim — one fact, one author,
+ *    no second string to drift.
+ *  - `ariaLabel` — no visible label is in a position to publish an id (a
+ *    generic host that rendered its `<label for>` before it knew this surface
+ *    would be a group). Self-owned name; keep it EQUAL to the visible text
+ *    where one exists, or WCAG 2.5.3 (Label in Name) fails.
+ *
+ * Deliberately no `id` variant: handing this container the id a `<label for>`
+ * points at would make the IDREF resolve while still naming nothing — the
+ * cosmetic half-fix objectui#4010 was filed to avoid, and the pairing
+ * `form.tsx` refuses outright ("one label two association channels, one of
+ * which is broken").
+ */
+export type ColorVariantPickerNaming =
+  | { ariaLabelledBy: string; ariaLabel?: never }
+  | { ariaLabel: string; ariaLabelledBy?: never };
+
+export function ColorVariantPicker({ value, onChange, disabled, options, ariaLabelledBy, ariaLabel }: ColorVariantPickerNaming & {
   value: string | undefined;
   onChange: (v: string) => void;
   disabled?: boolean;
@@ -52,7 +86,12 @@ export function ColorVariantPicker({ value, onChange, disabled, options }: {
     : COLOR_VARIANTS.slice(0, 8); // canonical 8 (skip aliases in the default row)
   const current = value ?? 'default';
   return (
-    <div className="flex flex-wrap gap-1.5" role="radiogroup">
+    <div
+      className="flex flex-wrap gap-1.5"
+      role="radiogroup"
+      aria-labelledby={ariaLabelledBy}
+      aria-label={ariaLabel}
+    >
       {opts.map((o) => {
         const on = current === o.value;
         return (
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.test.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.test.tsx
index 8f3b462754..265e64964b 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.test.tsx
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.test.tsx
@@ -117,10 +117,10 @@ describe('DashboardWidgetInspector — dataset binding', () => {
     // Exactly one element answers that id — the trigger, not a wrapper.
     expect(document.querySelectorAll(`[id="${forId}"]`)).toHaveLength(1);
 
-    // Scoped to this `Field` deliberately: a panel-wide "no dangling for" sweep
-    // would also catch `widget-color`, whose `ColorVariantPicker` accepts no id
-    // either. That is a different component and out of this issue's scope — it
-    // is filed separately rather than fixed here or asserted broken here.
+    // This assertion stays scoped to the Dataset `Field`; the panel-wide
+    // "no dangling for" sweep it deliberately did not perform — because
+    // `widget-color` would have failed it — now lives in the describe block
+    // below, with `widget-color` fixed (objectui#4010).
   });
 
   it('disables every picker when readOnly', () => {
@@ -131,6 +131,72 @@ describe('DashboardWidgetInspector — dataset binding', () => {
   });
 });
 
+/**
+ * objectui#4010 — the Color field, the last `Field` in this panel whose child
+ * could not answer to the wrapper's `id`.
+ *
+ * `Field` renders one of two shapes now. Five fields keep `<Label htmlFor={id}>`
+ * over a labelable control carrying that id. `widget-color` wraps a
+ * `div[role="radiogroup"]`, which no `for` can name, so its label publishes
+ * `widget-color-label` and the group answers `aria-labelledby`. Before the fix
+ * it published `htmlFor="widget-color"` at a control that accepted no id: an
+ * IDREF resolving to nothing, which reads to tooling as an association that is
+ * closed.
+ */
+describe('DashboardWidgetInspector — the Color group is named (objectui#4010)', () => {
+  /** Every `label[for]` in the panel, with whether its IDREF resolves. */
+  const danglingFors = () =>
+    Array.from(document.querySelectorAll('label[for]'))
+      .filter((l) => !document.getElementById(l.getAttribute('for')!))
+      .map((l) => ({ text: (l.textContent ?? '').trim(), for: l.getAttribute('for') }));
+
+  it('leaves no `for` in the whole panel pointing at nothing', () => {
+    // The panel-wide sweep, now that every `Field` can honour its own contract.
+    // Scoped per-field assertions cannot catch a SIXTH field added later with
+    // the same defect; this one can, which is why it is written wide.
+    renderWidget({ dataset: 'sales_pipeline' });
+    expect(danglingFors()).toEqual([]);
+  });
+
+  it('names the swatch group with the visible Color Variant label, by IDREF', () => {
+    renderWidget();
+
+    const label = screen.getByText('Color Variant');
+    const group = screen.getByRole('radiogroup');
+
+    // The label publishes an id and drops its `for` — a group cannot be the
+    // target of a labelable association.
+    expect(label).toHaveAttribute('id', 'widget-color-label');
+    expect(label).not.toHaveAttribute('for');
+
+    const idref = group.getAttribute('aria-labelledby');
+    expect(idref).toBe('widget-color-label');
+    // Resolved to a NODE, and to THAT node: a name-only assertion would pass on
+    // an IDREF aimed at any same-texted element in the panel.
+    expect(document.getElementById(idref!)).toBe(label);
+    expect(document.querySelectorAll(`[id="${idref}"]`)).toHaveLength(1);
+    expect(group).toHaveAccessibleName('Color Variant');
+  });
+
+  it('no longer publishes the bare `widget-color` id to anyone', () => {
+    // The pre-fix `for` target. Nothing carries it now — and nothing should
+    // start to: putting it on the radiogroup would resolve the IDREF while
+    // still naming nothing, the half-fix this issue refused.
+    renderWidget();
+    expect(document.getElementById('widget-color')).toBeNull();
+  });
+
+  it('keeps naming the group under zh-CN, with no second string to translate', () => {
+    // The IDREF carries whatever the label rendered, so the accessible name is
+    // translated by the same `t()` call the visible text already went through.
+    renderWidget({}, { locale: 'zh-CN' });
+    const group = screen.getByRole('radiogroup');
+    const label = document.getElementById(group.getAttribute('aria-labelledby')!);
+    expect(label).toBe(screen.getByText('颜色'));
+    expect(group).toHaveAccessibleName('颜色');
+  });
+});
+
 describe('DashboardWidgetInspector — dashboard filter bindings (framework#2501)', () => {
   const filteredDraft = (widgetExtra: Record<string, unknown> = {}) => ({
     dateRange: { field: 'created_at', defaultRange: 'last_30_days' },
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.tsx
index 897c21fc75..e6d2e19902 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.tsx
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/DashboardWidgetInspector.tsx
@@ -423,8 +423,13 @@ export function DashboardWidgetInspector({
         </div>
       )}
 
-      <Field id="widget-color" label={t('engine.inspector.widget.color', locale)}>
+      <Field id="widget-color" labelling="group" label={t('engine.inspector.widget.color', locale)}>
         <ColorVariantPicker
+          // The visible label above ("Color Variant") names the swatch group by
+          // IDREF, and is the only naming channel: the group carries no `id`
+          // for a `for` to aim at, because `role="radiogroup"` cannot be
+          // labelled that way (objectui#4010).
+          ariaLabelledBy={groupLabelId('widget-color')}
           value={widget.colorVariant ?? 'default'}
           onChange={(v) => patchWidget({ colorVariant: v as DashboardWidgetSchema['colorVariant'] })}
           disabled={readOnly}
@@ -493,18 +498,48 @@ export function DashboardWidgetInspector({
   );
 }
 
+/**
+ * The id a `labelling="group"` field's `<Label>` publishes for its group to
+ * reference. One function so the two halves of the IDREF — the label that emits
+ * it and the control that answers it — cannot drift apart into two literals.
+ */
+const groupLabelId = (id: string) => `${id}-label`;
+
 function Field({
   id,
   label,
+  labelling = 'control',
   children,
 }: {
   id: string;
   label: string;
+  /**
+   * How `label` is associated with the control (`ComponentMeta.labelling`'s
+   * vocabulary, objectui#3961/#4010):
+   *
+   *  - `'control'` (default) — the child is a LABELABLE element carrying this
+   *    same `id` (`Input id`, `SelectTrigger id`, `InspectorComboField id`), so
+   *    a plain `htmlFor` names it. Every other field in this panel is this.
+   *  - `'group'` — the child is a container (`role="radiogroup"`) that no
+   *    `<label for>` can name. The label publishes `groupLabelId(id)` instead
+   *    and the child answers `aria-labelledby`. The `for` is not merely
+   *    redundant here but must be ABSENT: aimed at a non-labelable element it
+   *    names nothing, and aimed at this panel's `id` (which such a child never
+   *    carries) it is a DANGLING IDREF — tooling reports an association that
+   *    resolves to nothing, which is worse than an unnamed control because it
+   *    reads as closed. That was objectui#4010's defect on `widget-color`.
+   */
+  labelling?: 'control' | 'group';
   children: React.ReactNode;
 }) {
+  const group = labelling === 'group';
   return (
     <div className="space-y-1.5">
-      <Label htmlFor={id} className="text-xs font-medium text-muted-foreground">
+      <Label
+        // Exactly one channel — never a `for` beside an `aria-labelledby`.
+        {...(group ? { id: groupLabelId(id) } : { htmlFor: id })}
+        className="text-xs font-medium text-muted-foreground"
+      >
         {label}
       </Label>
       {children}
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.colorLabelling.test.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.colorLabelling.test.tsx
new file mode 100644
index 0000000000..6a84f94e35
--- /dev/null
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.colorLabelling.test.tsx
@@ -0,0 +1,150 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#4010, the sibling call site — the PROPERTIES panel's `color` field.
+ *
+ * Audited alongside `DashboardWidgetInspector`'s `widget-color`, and only HALF
+ * the same shape. Measured on `origin/main` before the change:
+ *
+ * ```
+ *                                    label[for]        radiogroup accName
+ * DashboardWidgetInspector  widget-color   → nothing         ''      ← dangling
+ * PageBlockInspector        colorVariant   (no `for` at all) ''      ← anonymous
+ * ```
+ *
+ * So nothing dangled here: this label never claimed an association, it simply
+ * sat above the swatches as unowned text while the group went unnamed. The
+ * defect's second half — an anonymous `role="radiogroup"` — was identical, and
+ * is closed the same way: the label publishes an id, the group answers
+ * `aria-labelledby`. That is the WAI-ARIA group pattern (objectui#3961/#3990),
+ * not a `for`, because a group is not a labelable element.
+ *
+ * ## Why the id is minted per instance
+ *
+ * `renderField` runs in a LOOP (it recurses into `array` items with a
+ * `keyPrefix`), so an id derived from the field name or its key repeats the
+ * moment two rows carry the same property — and a duplicated id resolves
+ * silently to the FIRST group, which is why the second describe renders two
+ * panels and pins that each group answers to its own label. It is also why the
+ * field is its own component: hooks cannot be called from `renderField`, which
+ * is a function run in a loop rather than a component.
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, cleanup, within } from '@testing-library/react';
+import { PageSchema } from '@objectstack/spec/ui';
+
+/**
+ * A stable stub client — `PageBlockInspector` reaches `useObjectFields` /
+ * `useObjectOptions` on mount, and a fresh object per call would re-fire their
+ * effects forever (the reasoning in `PageBlockInspector.i18n.test.tsx`).
+ */
+const state = vi.hoisted(() => ({
+  metadataClient: { get: vi.fn(async () => undefined), list: vi.fn(async () => [] as unknown[]) },
+}));
+vi.mock('../useMetadata', () => ({ useMetadataClient: () => state.metadataClient }));
+
+import { PageBlockInspector } from './PageBlockInspector';
+
+afterEach(cleanup);
+
+const BLOCK_PATH = 'regions[0].components[0]';
+
+/** A record page whose one block carries the curated `colorVariant` field. */
+function metricDraft(): Record<string, unknown> {
+  return PageSchema.parse({
+    name: 'contact_record',
+    label: 'Contact',
+    type: 'record',
+    object: 'contact',
+    template: 'default',
+    regions: [
+      { name: 'main', components: [{ type: 'object-metric', id: 'b1', properties: { colorVariant: 'blue' } }] },
+    ],
+  }) as unknown as Record<string, unknown>;
+}
+
+function renderInspector(locale: 'en-US' | 'zh-CN' = 'en-US') {
+  return render(
+    <PageBlockInspector
+      type="page"
+      name="contact_record"
+      draft={metricDraft()}
+      selection={{ kind: 'block', id: BLOCK_PATH }}
+      onPatch={() => {}}
+      onClearSelection={() => {}}
+      readOnly={false}
+      locale={locale as never}
+    />,
+  );
+}
+
+describe('PageBlockInspector — the color swatch group is named (objectui#4010)', () => {
+  it('names the group with the visible label, resolved to that label NODE', () => {
+    renderInspector();
+
+    const group = screen.getByRole('radiogroup');
+    const idref = group.getAttribute('aria-labelledby');
+    // Truthy first: pre-fix both sides read `null` and a bare `toBe` would pass.
+    expect(idref).toBeTruthy();
+
+    const target = document.getElementById(idref!);
+    expect(target).not.toBeNull();
+    expect(target).toBe(screen.getByText('Color'));
+    expect(target!.tagName).toBe('LABEL');
+    // Exactly one element answers the id.
+    expect(document.querySelectorAll(`[id="${idref}"]`)).toHaveLength(1);
+    expect(group).toHaveAccessibleName('Color');
+  });
+
+  it('introduces no `for` aimed at the group', () => {
+    // The failure mode this fix deliberately did NOT adopt: giving the container
+    // an id so a `<label for>` resolves would satisfy a link-checker while
+    // naming nothing, because `role="radiogroup"` is not labelable.
+    renderInspector();
+    const group = screen.getByRole('radiogroup');
+    expect(group).not.toHaveAttribute('id');
+    expect(group).not.toHaveAttribute('aria-label');
+    // And no label anywhere in this panel points at an id nothing carries.
+    const dangling = Array.from(document.querySelectorAll('label[for]')).filter(
+      (l) => !document.getElementById(l.getAttribute('for')!),
+    );
+    expect(dangling).toEqual([]);
+  });
+
+  it('announces the translated label under zh-CN', () => {
+    renderInspector('zh-CN');
+    const group = screen.getByRole('radiogroup');
+    expect(document.getElementById(group.getAttribute('aria-labelledby')!)).toBe(screen.getByText('颜色'));
+    expect(group).toHaveAccessibleName('颜色');
+  });
+});
+
+describe('PageBlockInspector — two color fields do not share one label id', () => {
+  it('gives each mounted group its OWN label, inside its own panel', () => {
+    // A constant id — the field name, or `renderField`'s `keyPrefix`ed key —
+    // would bind both groups to the FIRST label and still pass every assertion
+    // in the describe above. `React.useId()` cannot be authored into a
+    // collision; this is what proves the id is minted per instance.
+    const { container: first } = renderInspector();
+    const { container: second } = renderInspector();
+
+    const groups = screen.getAllByRole('radiogroup');
+    expect(groups).toHaveLength(2);
+
+    const idrefs = groups.map((g) => g.getAttribute('aria-labelledby'));
+    expect(idrefs.every(Boolean)).toBe(true);
+    expect(new Set(idrefs).size).toBe(2);
+
+    // Container ownership: each IDREF resolves to the label in ITS OWN panel,
+    // not merely to some element carrying the same text (the #4788/#4824
+    // reachability criterion — an accessible-name assertion alone is blind to
+    // an IDREF that resolves into the wrong container).
+    for (const [i, root] of [first, second].entries()) {
+      const target = document.getElementById(idrefs[i]!)!;
+      expect(target).toBe(within(root as HTMLElement).getByText('Color'));
+      expect(root.contains(target)).toBe(true);
+      expect(groups[i]).toHaveAccessibleName('Color');
+    }
+  });
+});
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.tsx
index adfd0655e1..597bd93dbd 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.tsx
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.tsx
@@ -194,6 +194,47 @@ function GenericPropField({ name, value, onCommit, disabled, locale }: {
   return <InspectorJsonField label={name} value={value} onCommit={onCommit} disabled={disabled} locale={locale} />;
 }
 
+/**
+ * A `color` block property: the swatch row plus the visible label that names it
+ * (objectui#4010).
+ *
+ * Its own component, and not three lines inside `renderField`, for the id:
+ * `role="radiogroup"` is not a labelable element, so the label has to name the
+ * group by IDREF (`aria-labelledby`) rather than by `for`, and that id is minted
+ * with `React.useId()` HERE because `renderField` runs in a LOOP over array
+ * items (`keyPrefix`). A caller-derived id — the field name, the `keyPrefix`ed
+ * key — is exactly what repeats across two array rows carrying the same
+ * property, and a duplicated id resolves silently to the FIRST group
+ * (objectui#3994's reasoning for minting inside the atoms, and hooks cannot be
+ * called from `renderField` itself: it is a function run in a loop, not a
+ * component).
+ *
+ * Unlike `DashboardWidgetInspector`'s `widget-color` this label never carried a
+ * `for` at all, so nothing dangled here — the group was simply anonymous, with
+ * the visible text beside it owned by no one.
+ */
+function ColorPropField({ label, value, onChange, disabled, options }: {
+  label: string;
+  value: string | undefined;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  options?: Array<{ value: string; label?: string }>;
+}) {
+  const labelId = React.useId();
+  return (
+    <div className="space-y-1">
+      <Label id={labelId} className="text-xs text-muted-foreground">{label}</Label>
+      <ColorVariantPicker
+        ariaLabelledBy={labelId}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        options={options}
+      />
+    </div>
+  );
+}
+
 /** Block `properties` keys whose values are nested block trees — these are
  *  edited visually on the canvas, so they are excluded from the generic
  *  property editor to avoid two conflicting editors for the same data. */
@@ -471,15 +512,14 @@ export function PageBlockInspector({ selection, draft, onPatch, onClearSelection
         );
       case 'color':
         return (
-          <div key={k} className="space-y-1">
-            <Label className="text-xs text-muted-foreground">{fieldLabel(f.label)}</Label>
-            <ColorVariantPicker
-              value={read(f.name) != null ? String(read(f.name)) : undefined}
-              onChange={(v) => write(f.name, v)}
-              disabled={readOnly}
-              options={f.options ? optionLabels(f.options) : undefined}
-            />
-          </div>
+          <ColorPropField
+            key={k}
+            label={fieldLabel(f.label)}
+            value={read(f.name) != null ? String(read(f.name)) : undefined}
+            onChange={(v) => write(f.name, v)}
+            disabled={readOnly}
+            options={f.options ? optionLabels(f.options) : undefined}
+          />
         );
       case 'select':
         return (
diff --git a/packages/app-shell/src/views/metadata-admin/widgets.tsx b/packages/app-shell/src/views/metadata-admin/widgets.tsx
index ebb4dc7014..9a849848e1 100644
--- a/packages/app-shell/src/views/metadata-admin/widgets.tsx
+++ b/packages/app-shell/src/views/metadata-admin/widgets.tsx
@@ -1788,6 +1788,26 @@ function ColorPickerWidget({ value, onChange, readOnly, schema, fieldSpec }: Wid
   if (enumOpts && enumOpts.length) {
     return (
       <ColorVariantPicker
+        // Self-owned name, not the host label's IDREF (objectui#4010).
+        //
+        // `MetadataField` renders `<Label htmlFor={id}>` above this widget and
+        // hands it the same `id`. That works for a labelable control — the free
+        // colour branch below is one — but this branch renders a
+        // `div[role="radiogroup"]`, which no `<label for>` can name. The host
+        // cannot publish an `id` for us to reference instead, because WHICH of
+        // these two branches renders is decided HERE, from `schema`/`fieldSpec`,
+        // after that label is already written; teaching the host to decide it
+        // needs a `labelling` declaration per widget (the shape
+        // `packages/components`' form renderer already has, objectui#3961) and
+        // is filed as objectui#4871 rather than guessed at here.
+        //
+        // So the group carries its own name, exactly as this file's other
+        // unassociated groups do (`FilterModeWidget`'s segmented radiogroup,
+        // and the free-colour `<input type="color">` below). The text is the
+        // host's own first-precedence label source so the two agree wherever set —
+        // WCAG 2.5.3 (Label in Name) is about the visible text, not a generic
+        // stand-in — falling back to this file's existing constant.
+        ariaLabel={fieldSpec?.label ?? (typeof schema?.title === 'string' ? schema.title : undefined) ?? 'Color'}
         value={value == null ? undefined : String(value)}
         onChange={(v) => onChange(v)}
         disabled={readOnly}