From 40a930f2edef12c177ff46822e9a142b0956f9de Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 22:25:16 +0000
Subject: [PATCH] =?UTF-8?q?fix(metadata-admin):=20=E6=A3=80=E6=9F=A5?=
 =?UTF-8?q?=E5=99=A8=E4=B8=89=E4=B8=AA=E5=85=B1=E4=BA=AB=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=8E=9F=E5=AD=90=E7=9A=84=20label=20=E4=B8=8E=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6=E5=BB=BA=E7=AB=8B=E7=BC=96=E7=A8=8B=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=20(#3994)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`InspectorTextField` / `InspectorNumberField` / `InspectorSelectField` 都把 `Label`
渲染成控件的兄弟节点,却既没有 `htmlFor`、也没有 `id`,更没有 `aria-label` 兜底 ——
标签与控件之间只有视觉邻接。修前实测:三者的 `getByLabelText('Group')`(与屏幕阅读器
同一条 for→id 链)全部 0 命中,焦点落进去读到的是匿名「编辑框 / combobox」,可见的
字段名成了一段无归属文本,点标签什么都不会发生。这三个原子被 16 个非测试模块消费
(页面块 / 流程节点 / 报表 / 数据集 / 权限 / 对象字段各检查器,以及 studio-design 的
对象分组检查器),打开任意检查器面板即渲染。

三者各自 `React.useId()` 生成 id 并闭合 `htmlFor` ⇄ `id`。id 在原子内部生成而非由调用方
传入是有意的:这些原子渲染在数组项循环里(`record:details.sections[i]`、
`page:tabs.items[i]`),每项重复同一个 label —— 那正是调用方传 id 会撞车的地方,而撞车
是静默的(两个 label 都能解析,只是都指向第一个控件)。`useId()` 结构上不可能撞车;
多实例互不串 id 是钉住的,不是假设的。

select 的 id 落在 `SelectTrigger` 而非 `Select`:Radix `Select.Root` 自己不渲染任何
DOM 元素,交给它的 id 会被静默丢弃、label 的 for 随之悬空 —— 就是 #3976(PR #3992)
在隔壁修掉的同一机制。trigger 渲染真正的 `button[role=combobox]`,是可 label 元素,
一对 for/id 即完成命名,不需要第二条 `aria-labelledby` 通道;`disabled` 仍留在 Root
(对 trigger / items / 隐藏 native mirror 的单一权威),禁用态下依然有可访问名。

`InspectorCheckboxField` 本来就是对的(包裹式 label,合法关联、无需 id),一字未动,
在测试里作为阳性对照 —— 两个反向变异下它必须保持绿。

钉子 `_shared.labels.test.tsx`(26 条):三原子共用 `describe.each` 跑同一组保证 ——
label 的 for 有宿主、`getAllByLabelText` 命中且就是那个可聚焦控件(select 命中 trigger、
tagName BUTTON)、可访问名等于 label、只有 for 一条命名通道(先断言 forId 为真,
否则修前 null === null 会假绿)、id 全文档唯一;同 label 两实例 id 不同且各自归属、
不同 label 兄弟各自解析;以标签定位到的控件是真控件(输入提交只来自该实例、number
提交数字、select 的 trigger 就是显示选中项 label 的那个元素)。

`PageBlockInspector.sectionName.test.tsx` 的变通处随之收紧:原注释把「必须按 placeholder
定位,因为 `InspectorTextField` 的 Label 与 input 无关联,`getByLabelText` 到不了」写下来
当作理由,那正是本缺陷的机械症状。定位改为 `getAllByLabelText('Name (i18n key)')`
(与 AT 同一条链),`snake_case` 约定不再搭便车藏在定位器里,单独一条断言;
「一个分区一个 name 框」顺带成为消费侧的 id 不撞车检查。

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../inspector-shared-field-labels-3994.md     |  41 +++
 .../PageBlockInspector.sectionName.test.tsx   |  31 +-
 .../inspectors/_shared.labels.test.tsx        | 298 ++++++++++++++++++
 .../metadata-admin/inspectors/_shared.tsx     |  41 ++-
 4 files changed, 401 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/inspector-shared-field-labels-3994.md
 create mode 100644 packages/app-shell/src/views/metadata-admin/inspectors/_shared.labels.test.tsx

diff --git a/.changeset/inspector-shared-field-labels-3994.md b/.changeset/inspector-shared-field-labels-3994.md
new file mode 100644
index 000000000..ebfdbb376
--- /dev/null
+++ b/.changeset/inspector-shared-field-labels-3994.md
@@ -0,0 +1,41 @@
+---
+"@object-ui/app-shell": patch
+---
+
+Metadata-admin inspectors: the shared text / number / select field labels now name their control
+
+The three generic field atoms of every scoped inspector — `InspectorTextField`,
+`InspectorNumberField`, `InspectorSelectField` — rendered a `Label` as a plain sibling of
+their control, with no `htmlFor`, no `id` and no `aria-label` fallback. Label and control
+were adjacent only visually: assistive tech announced an anonymous "edit box" / "combobox"
+while the visible field name sat above it as unowned text, and clicking the label did
+nothing. Measured before the fix, `getByLabelText('Group')` — the same `for`→id chain a
+screen reader walks — found zero matches for all three.
+
+These atoms are consumed by 16 non-test modules (page-block, flow-node, report, dataset,
+permission and object-field inspectors, plus the object-group inspector in Studio design),
+so every inspector panel rendered nameless inputs the moment it opened.
+
+Each atom now mints its own id with `React.useId()` and closes the pair. The id is minted
+inside the atom rather than taken as a prop deliberately: these atoms render in loops over
+array items (`record:details.sections[i]`, `page:tabs.items[i]`) where every item repeats
+the same label, which is precisely where a caller-supplied id collides — and a collision is
+invisible, because both labels would still resolve, to the first control. `useId()` cannot
+collide by construction; per-instance uniqueness is pinned rather than assumed.
+
+For the select the id lands on `SelectTrigger`, never on `Select`: Radix's `Select.Root`
+renders no DOM element of its own, so an id handed to it is silently dropped and the
+label's `for` dangles — the same mechanism objectui#3976 fixed one directory over. The
+trigger renders the real `button[role=combobox]`, a labelable element, so one `for`/`id`
+pair names it with no second `aria-labelledby` channel. `disabled` stays on Root (single
+authority over trigger, items and the hidden native mirror) and a disabled select is still
+named.
+
+`InspectorCheckboxField` was already correct — it uses a wrapping `label`, a valid
+association that needs no id — and is untouched, serving as the positive control in the
+tests.
+
+Follow-on for test authors: `PageBlockInspector.sectionName.test.tsx` located its section
+name boxes by placeholder *because* `getByLabelText` could not reach them. That workaround
+is gone; the boxes are located by their label, and the `snake_case` placeholder convention
+keeps its own dedicated assertion.
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.sectionName.test.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.sectionName.test.tsx
index 21fefd12a..1043e475e 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.sectionName.test.tsx
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.sectionName.test.tsx
@@ -89,13 +89,19 @@ function committedSections(onPatch: ReturnType<typeof vi.fn>): Array<Record<stri
 }
 
 /**
- * The section-name boxes, in section order. Located by the placeholder because
- * `InspectorTextField` renders its `<Label>` unassociated with the `<input>`
- * (no `htmlFor`/`id`), so `getByLabelText` cannot reach it — and locating by
- * placeholder doubles as proof the snake_case hint reaches the DOM, which is
- * the only convention affordance this field has.
+ * The section-name boxes, in section order. Located by their LABEL — the same
+ * `for`→id chain assistive tech walks, so the locator is now the accessible
+ * name and not a proxy for it.
+ *
+ * This used to locate by placeholder, because `InspectorTextField` rendered its
+ * `<Label>` unassociated with the `<input>` (no `htmlFor`/`id`) and
+ * `getByLabelText` could not reach it at all — the workaround was the mechanical
+ * symptom of objectui#3994, and it is gone with the association. The
+ * `snake_case` hint is still asserted below (`the placeholder keeps stating the
+ * snake_case convention`): it is the only convention affordance this field has,
+ * so it keeps its own case instead of riding along inside a locator.
  */
-const nameBoxes = () => screen.getAllByPlaceholderText(/snake_case/i) as HTMLInputElement[];
+const nameBoxes = () => screen.getAllByLabelText('Name (i18n key)') as HTMLInputElement[];
 /** The label box of section #1 — "Contact info" in these fixtures. */
 const labelBox = () => screen.getByDisplayValue('Contact info') as HTMLInputElement;
 
@@ -110,6 +116,19 @@ describe('PageBlockInspector — record:details sections expose the i18n anchor
       ]),
     );
     expect(nameBoxes()).toHaveLength(2);
+    // Two sections repeat the SAME label, so this doubles as the consumer-side
+    // check that per-instance ids do not collide (objectui#3994): a shared id
+    // would resolve both labels to the first box and this would return one.
+    const [a, b] = nameBoxes();
+    expect(a).not.toBe(b);
+  });
+
+  it('the placeholder keeps stating the snake_case convention', () => {
+    // `BlockPropField` has no pattern/validate affordance (objectui#3912), so
+    // the placeholder is where the naming convention is stated. It used to be
+    // asserted implicitly by the locator above; assert it on its own now.
+    renderInspector(pageDraft([{ label: 'Contact info', fields: ['first_name'] }]));
+    expect(nameBoxes()[0].placeholder).toMatch(/snake_case/i);
   });
 
   it('typing a name commits it to `properties.sections[i].name`', () => {
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/_shared.labels.test.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/_shared.labels.test.tsx
new file mode 100644
index 000000000..2f3796fcc
--- /dev/null
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/_shared.labels.test.tsx
@@ -0,0 +1,298 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#3994 — the three shared inspector atoms that render a `<Label>` as a
+ * SIBLING of their control must close the association (`htmlFor` ⇄ `id`).
+ *
+ * Before this fix `InspectorTextField` / `InspectorNumberField` /
+ * `InspectorSelectField` each rendered "a label, then a control" with no
+ * `htmlFor`, no `id` and no `aria-label` fallback. The label and the control
+ * were adjacent only VISUALLY: assistive tech read an anonymous "edit box" /
+ * "combobox" with the field name floating above it as unowned text, and
+ * clicking the visible label did nothing. These atoms are the generic inputs of
+ * every scoped metadata inspector (16 non-test modules consume them — page
+ * blocks, flow nodes, reports, datasets, permissions), so the defect rendered
+ * the moment any inspector panel opened.
+ *
+ * `getByLabelText` walks the same `for`→id chain assistive tech does, which is
+ * why the queries below are the assertion and not a convenience: pre-fix they
+ * returned zero matches. The mechanical symptom was already written down as a
+ * workaround — `PageBlockInspector.sectionName.test.tsx` located its boxes by
+ * placeholder *because* `getByLabelText` could not reach them; that locator is
+ * tightened in the same change.
+ *
+ * ## Why the id is minted inside the atom
+ *
+ * `React.useId()`, not a caller-supplied prop. These atoms are rendered in
+ * loops over array items (`record:details.sections[i]`, `page:tabs.items[i]`),
+ * where every item repeats the same label — a caller-passed id is exactly the
+ * thing that collides there, and a collision is invisible (both labels resolve
+ * to the first control). The "several instances" cases below pin that
+ * uniqueness rather than assuming it.
+ *
+ * ## Reverse verification (direction predicted BEFORE running, mutation not committed)
+ *
+ * Plain RED, in two separate shapes:
+ *
+ *  1. Drop `htmlFor`/`id` from ONE atom → that atom's `describe.each` rows go
+ *     red (label resolution, `getByLabelText`, accessible name, uniqueness),
+ *     the other two atoms and the `InspectorCheckboxField` control stay green.
+ *  2. Move the select's `id` from `SelectTrigger` back onto `Select` → the
+ *     select rows go red while text/number stay green, because Radix's
+ *     `Select.Root` renders no DOM element and silently DROPS the id (the
+ *     objectui#3976 / PR #3992 mechanism, one directory over).
+ *
+ * Measured outcomes are in the PR body.
+ */
+
+import * as React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import {
+  InspectorTextField,
+  InspectorNumberField,
+  InspectorSelectField,
+  InspectorCheckboxField,
+} from './_shared';
+
+afterEach(cleanup);
+
+const OPTIONS = [
+  { value: 'profile', label: 'Profile' },
+  { value: 'meta', label: 'Metadata' },
+];
+
+/** Every `<label for=…>` in the document, paired with its resolved target. */
+function labelTargets(): Array<{ text: string; forId: string; resolves: boolean }> {
+  return Array.from(document.querySelectorAll('label'))
+    .map((el) => ({
+      text: (el.textContent ?? '').trim(),
+      forId: el.getAttribute('for') ?? '',
+      resolves: !!el.getAttribute('for') && !!document.getElementById(el.getAttribute('for')!),
+    }))
+    .filter((l) => l.forId !== '');
+}
+
+/** How many elements in the document carry this exact id. */
+const idOwners = (id: string) => document.querySelectorAll(`[id="${id}"]`).length;
+
+interface AtomCase {
+  /** Component name, for the test titles. */
+  atom: string;
+  /** ARIA role of the control the label must name. */
+  role: 'textbox' | 'spinbutton' | 'combobox';
+  /** Tag of the element that must carry the id — the focusable control. */
+  tag: 'INPUT' | 'BUTTON';
+  /** One instance with the given label; `onCommit` is the caller's spy. */
+  render: (label: string, onCommit: (v: never) => void) => React.ReactElement;
+}
+
+const ATOMS: AtomCase[] = [
+  {
+    atom: 'InspectorTextField',
+    role: 'textbox',
+    tag: 'INPUT',
+    render: (label, onCommit) => (
+      <InspectorTextField label={label} value="" onCommit={onCommit as (v: string) => void} />
+    ),
+  },
+  {
+    atom: 'InspectorNumberField',
+    role: 'spinbutton',
+    tag: 'INPUT',
+    render: (label, onCommit) => (
+      <InspectorNumberField
+        label={label}
+        value={undefined}
+        onCommit={onCommit as (v: number | undefined) => void}
+      />
+    ),
+  },
+  {
+    atom: 'InspectorSelectField',
+    role: 'combobox',
+    tag: 'BUTTON',
+    render: (label, onCommit) => (
+      <InspectorSelectField
+        label={label}
+        value={undefined}
+        options={OPTIONS}
+        onCommit={onCommit as (v: string) => void}
+      />
+    ),
+  },
+];
+
+describe.each(ATOMS)('$atom — the visible label names the control (#3994)', ({ role, tag, render: renderAtom }) => {
+  it('emits no label pointing at an id nothing carries', () => {
+    render(renderAtom('Group', vi.fn()));
+
+    const labels = labelTargets();
+    // The atom must produce a `for` at all — pre-fix there was none, and this
+    // case would then fail on the length rather than pass vacuously.
+    expect(labels).toHaveLength(1);
+    expect(labels.filter((l) => !l.resolves)).toEqual([]);
+  });
+
+  it('resolves the label to the focusable control, not to a wrapper', () => {
+    render(renderAtom('Group', vi.fn()));
+
+    const labelled = screen.getAllByLabelText('Group');
+    expect(labelled).toHaveLength(1);
+    expect(labelled[0]).toBe(screen.getByRole(role));
+    expect(labelled[0].tagName).toBe(tag);
+  });
+
+  it('gives the control the label as its accessible name', () => {
+    render(renderAtom('Group', vi.fn()));
+
+    // The user-visible consequence, on the computed name rather than on markup:
+    // pre-fix the control was reachable by role but ANONYMOUS.
+    const control = screen.getByRole(role, { name: 'Group' });
+    expect(control).toHaveAccessibleName('Group');
+  });
+
+  it('keeps `for` as the only naming channel', () => {
+    // One label, one channel. A second `aria-labelledby` (or an `aria-label`
+    // duplicating the visible text) is the double-announcement failure the
+    // group-labelling work exists to avoid — objectui#3961/#3978.
+    render(renderAtom('Group', vi.fn()));
+
+    const control = screen.getByRole(role);
+    const forId = screen.getByText('Group').getAttribute('for');
+    // Asserted truthy first: with no association at all both sides are `null`
+    // and a bare `toBe` would pass on the defect (null === null).
+    expect(forId).toBeTruthy();
+    expect(forId).toBe(control.getAttribute('id'));
+    expect(control).not.toHaveAttribute('aria-labelledby');
+    expect(control).not.toHaveAttribute('aria-label');
+  });
+
+  it('mints exactly one owner for the id', () => {
+    render(renderAtom('Group', vi.fn()));
+
+    const id = screen.getByRole(role).getAttribute('id')!;
+    expect(id).toBeTruthy();
+    expect(idOwners(id)).toBe(1);
+  });
+});
+
+/* ───────────── several instances in one panel must not cross-wire ────────── */
+
+describe.each(ATOMS)('$atom — instances in one panel are named independently (#3994)', ({ role, render: renderAtom }) => {
+  it('gives two identically-labelled instances distinct ids', () => {
+    // The array-item case verbatim: `record:details.sections[i]` renders the
+    // same "Name (i18n key)" label once per section. A shared id would make
+    // both labels resolve to the FIRST control — silently, since every
+    // assertion on "a control named X" would still pass.
+    render(
+      <div>
+        {renderAtom('Name', vi.fn())}
+        {renderAtom('Name', vi.fn())}
+      </div>,
+    );
+
+    const labelled = screen.getAllByLabelText('Name');
+    expect(labelled).toHaveLength(2);
+    expect(labelled[0]).not.toBe(labelled[1]);
+
+    const ids = labelled.map((el) => el.getAttribute('id')!);
+    expect(new Set(ids).size).toBe(2);
+    ids.forEach((id) => expect(idOwners(id)).toBe(1));
+
+    // …and each of the two labels owns its own control, in document order.
+    const controls = screen.getAllByRole(role);
+    expect(labelled).toEqual(controls);
+  });
+
+  it('resolves differently-labelled siblings to their own controls', () => {
+    render(
+      <div>
+        {renderAtom('Group', vi.fn())}
+        {renderAtom('Variant', vi.fn())}
+      </div>,
+    );
+
+    const [first, second] = screen.getAllByRole(role);
+    expect(screen.getByLabelText('Group')).toBe(first);
+    expect(screen.getByLabelText('Variant')).toBe(second);
+    expect(labelTargets().filter((l) => !l.resolves)).toEqual([]);
+  });
+});
+
+/* ─────────── the labelled element is the one that actually works ─────────── */
+
+describe('the labelled element is the live control, not a decoy (#3994)', () => {
+  it('InspectorTextField — typing into the label-located box commits from that instance', () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    render(
+      <div>
+        <InspectorTextField label="Name" value="" onCommit={first} />
+        <InspectorTextField label="Name" value="" onCommit={second} />
+      </div>,
+    );
+
+    fireEvent.change(screen.getAllByLabelText('Name')[1], { target: { value: 'contact_info' } });
+
+    expect(second).toHaveBeenCalledWith('contact_info');
+    expect(first).not.toHaveBeenCalled();
+  });
+
+  it('InspectorNumberField — the label-located box commits a number', () => {
+    const onCommit = vi.fn();
+    render(<InspectorNumberField label="Columns" value={undefined} onCommit={onCommit} />);
+
+    fireEvent.change(screen.getByLabelText('Columns'), { target: { value: '2' } });
+
+    expect(onCommit).toHaveBeenCalledWith(2);
+  });
+
+  it('InspectorSelectField — the id lands on the trigger that surfaces the value', () => {
+    // Radix `Select.Root` renders no DOM element, so an id handed to it is
+    // dropped and `for` dangles (objectui#3976). The trigger is the real
+    // control: it is the element that displays the selected option's label.
+    render(
+      <InspectorSelectField label="Group" value="profile" options={OPTIONS} onCommit={vi.fn()} />,
+    );
+
+    const trigger = screen.getByLabelText('Group');
+    expect(trigger.tagName).toBe('BUTTON');
+    expect(trigger).toHaveAttribute('role', 'combobox');
+    expect(trigger.textContent).toContain('Profile');
+  });
+
+  it('InspectorSelectField — a disabled field is still named', () => {
+    // `disabled` stays on the Root (single authority over trigger + items +
+    // the hidden native mirror); naming must not travel with it.
+    render(
+      <InspectorSelectField
+        label="Group"
+        value="profile"
+        options={OPTIONS}
+        onCommit={vi.fn()}
+        disabled
+      />,
+    );
+
+    expect(screen.getByRole('combobox', { name: 'Group' })).toBeDisabled();
+    expect(labelTargets().filter((l) => !l.resolves)).toEqual([]);
+  });
+});
+
+/* ───────────────────────── the counter-example holds ─────────────────────── */
+
+describe('InspectorCheckboxField — the wrapping-label form still names its box', () => {
+  it('is reachable by its label text without an id', () => {
+    // This atom was already correct (`<label><input/><span>…</span></label>`),
+    // and #3994 deliberately left it alone: a wrapping label is a valid
+    // association and needs no id. It is the positive control for the reverse
+    // verification above — it must stay green under both mutations.
+    render(<InspectorCheckboxField label="Collapsible" value={false} onCommit={vi.fn()} />);
+
+    const box = screen.getByLabelText('Collapsible');
+    expect(box).toBe(screen.getByRole('checkbox'));
+    expect(box).not.toHaveAttribute('id');
+    expect(labelTargets()).toEqual([]);
+  });
+});
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/_shared.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/_shared.tsx
index a4367fed4..14c128020 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/_shared.tsx
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/_shared.tsx
@@ -131,6 +131,28 @@ export function InspectorReorderButtons({
 
 /* ─────────────── Form atoms ─────────────── */
 
+/**
+ * Every atom below that renders a `<Label>` as a SIBLING of its control mints
+ * its own id with `React.useId()` and closes the pair (`htmlFor` ⇄ `id`).
+ * Visual adjacency is not an association: without it assistive tech reads an
+ * anonymous "edit box" and the visible label is unowned text, and clicking the
+ * label does nothing (objectui#3994).
+ *
+ * The id is minted INSIDE the atom rather than taken as a prop on purpose:
+ * these atoms are rendered in loops over array items (`page:tabs.items[i]`,
+ * `record:details.sections[i]`), where a caller-supplied id is the one thing a
+ * caller can get wrong — two items sharing a label would share an id and the
+ * second label would silently point at the first control. `useId()` is unique
+ * per instance by construction, so there is no way to author a collision.
+ * A future `aria-describedby` (e.g. the validation messages of objectui#3912)
+ * belongs to the same atom and can derive from this same private id; exposing
+ * the id would only be required if the association had to be made from
+ * OUTSIDE, which no call site needs.
+ *
+ * `InspectorCheckboxField` stays on the wrapping-`<label>` form — that is
+ * already a valid association and needs no id.
+ */
+
 export function InspectorTextField({
   label,
   value,
@@ -152,10 +174,12 @@ export function InspectorTextField({
   /** Stable hook for e2e/dogfood selectors. */
   testId?: string;
 }) {
+  const id = React.useId();
   return (
     <div className="space-y-1">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Label htmlFor={id} className="text-xs text-muted-foreground">{label}</Label>
       <Input
+        id={id}
         value={value}
         onChange={(e) => onCommit(e.target.value)}
         onBlur={(e) => onBlur?.(e.target.value)}
@@ -181,10 +205,12 @@ export function InspectorNumberField({
   placeholder?: string;
   disabled?: boolean;
 }) {
+  const id = React.useId();
   return (
     <div className="space-y-1">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Label htmlFor={id} className="text-xs text-muted-foreground">{label}</Label>
       <Input
+        id={id}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -220,15 +246,22 @@ export function InspectorSelectField({
   // internal sentinel so the public contract (value="" ⇄ none) holds.
   const toInner = (v: string) => (v === '' ? SELECT_NONE_SENTINEL : v);
   const fromInner = (v: string) => (v === SELECT_NONE_SENTINEL ? '' : v);
+  // The id goes on `SelectTrigger`, never on `Select`: Radix's `Select.Root`
+  // renders no DOM element of its own, so an `id` handed to it is silently
+  // dropped and the label's `for` resolves to nothing — the exact failure
+  // objectui#3976 (PR #3992) fixed in the built-in select branch. The trigger
+  // renders the real `button[role=combobox]`, which is a labelable element, so
+  // one `for`/`id` pair names it (no second `aria-labelledby` channel needed).
+  const id = React.useId();
   return (
     <div className="space-y-1">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Label htmlFor={id} className="text-xs text-muted-foreground">{label}</Label>
       <Select
         value={toInner(value ?? '')}
         onValueChange={(v) => onCommit(fromInner(v))}
         disabled={disabled}
       >
-        <SelectTrigger className="h-8 text-sm">
+        <SelectTrigger id={id} className="h-8 text-sm">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>