From d33e5d396f80e661e16bf672706e19fefe4076bd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 18:36:04 +0000
Subject: [PATCH] =?UTF-8?q?fix(app-shell):=20ActionParamDialog=20=E7=9A=84?=
 =?UTF-8?q?=20boolean=20=E5=88=86=E6=94=AF=E4=B8=8B=E5=8F=91=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6=20id,=E5=8F=AF=E8=AE=BF=E9=97=AE=E5=90=8D=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E6=98=AF=E4=B8=A4=E4=BB=BD=20label=20=E7=9A=84?=
 =?UTF-8?q?=E6=8B=BC=E6=8E=A5=20(#3962)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`ActionParamDialog` 的 boolean 分支渲染 `Label htmlFor={param.name}` 放在控件
旁边,却不给 widget 传 `id` —— 而同一文件下面几十行的通用分支一直传的是
`id={param.name}`。实测(#3952 / PR #3959 之后、真 dialog 渲染)一个 boolean
param 产出两个 label 元素指向同一个控件:widget 自己那份 sr-only 的,和 dialog
的可见那份,文本相同。两个 `for` 都能解析,所以这不是 #3341 / #3952 那种悬空
label —— 点击一直是好的;坏的是名字:按 accname 规范,引用同一控件的多个 label
会拼接成可访问名,屏幕阅读器听到的是 "Confirm This Confirm This"。

两个缺陷,相隔一行:

1. 关联是隐式的。它成立只因为 `BooleanField` 的 id 回退链第二项落在
   `config.name`,而 `paramToField` 把它设成了 `param.name` —— 两边靠另一个包的
   内部实现恰好撞成同一个字符串。一个渲染了 `htmlFor` 的 host 必须自己发出它所
   指的 id;widget 契约(`FieldWidgetDomProps`)声明 `id` 就是为这个。

2. 重复的 sr-only label。#3952 / PR #3959 让 `BooleanField` 在 host 下发 id 时
   不再发自己的 label(`emitOwnLabel = !hostId`),理由正是「会下发 id 的 host
   就是会渲染 label 的 host」。这个分支收不到 id,那条抑制从来没被触发。

修法是让 boolean 分支像它自己的通用分支那样传 `id={param.name}`:关联从隐式变
显式,widget 的 sr-only 副本被抑制,可访问名回到作者声明的那一份。通用分支未动。

钉子挂在两个既有测试文件上。命名一半在 `ActionParamDialog.ariaRequired.test.tsx`
(4 条):boolean 控件 id 恰为 `param.name` 且 `label[for]` 恰好 1 个、活下来的
是可见那份而非 sr-only;可访问名恰为一份;必填 boolean 的名字仍不含
`aria-hidden` 的星号且带 `aria-required="true"`;以及不变方向的通用分支 host id /
单 label / 单名字。行为一半在 `ActionParamDialog.test.tsx`(1 条):点击可见 label
翻转开关并 round-trip 到 `resolve`。

刻意没有用 `getAllByLabelText` 做探针(issue 正文提议过):
`@testing-library/dom` 10.4.1 的 `queryAllByLabelText` 最后一步是
`Array.from(new Set(matchingLabelledElements))`,并且对多 label 会把名字拆开
分别匹配,修前修后它都只解析出 1 个控件,当探针是空转的。可测量的那一半是名字
与 label 元素个数。

反向验证按预判成立:删掉 boolean 分支那一行 `id={param.name}` 后恰好 3 条命名钉
翻红,而「通用分支不变」与点击 label 那条保持绿 —— 修前 `for` 目标本来就能解析,
这个缺陷是重复而非悬空。变异未提交。

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../actionparamdialog-boolean-host-id-3962.md | 30 ++++++++
 .../ActionParamDialog.ariaRequired.test.tsx   | 73 +++++++++++++++++++
 .../src/views/ActionParamDialog.test.tsx      | 20 +++++
 .../app-shell/src/views/ActionParamDialog.tsx | 15 ++++
 4 files changed, 138 insertions(+)
 create mode 100644 .changeset/actionparamdialog-boolean-host-id-3962.md

diff --git a/.changeset/actionparamdialog-boolean-host-id-3962.md b/.changeset/actionparamdialog-boolean-host-id-3962.md
new file mode 100644
index 0000000000..317015767d
--- /dev/null
+++ b/.changeset/actionparamdialog-boolean-host-id-3962.md
@@ -0,0 +1,30 @@
+---
+"@object-ui/app-shell": patch
+---
+
+`ActionParamDialog` boolean params: the dialog now owns the control id, so the checkbox is named once instead of twice
+
+The boolean branch rendered `<Label htmlFor={param.name}>` beside the control but
+passed the widget no `id`, unlike its own generic branch a few dozen lines below,
+which has always passed `id={param.name}`. Measured on a real dialog render, a
+`boolean` param labelled "Confirm This" produced TWO label elements pointing at
+one control — the dialog's visible one and a `sr-only` copy the widget emitted —
+so the checkbox's accessible name was the two concatenated: screen readers
+announced "Confirm This Confirm This".
+
+Two distinct problems, one line apart:
+
+- The association was IMPLICIT. It resolved only because `BooleanField`'s id
+  fallback chain reaches `config.name`, which `paramToField` seeds from
+  `param.name`, so both sides landed on the same string by coincidence of
+  another package's internals. A host that renders `htmlFor` must emit the id it
+  names; that is what the declared `id` key of the widget contract is for.
+- The duplicate `sr-only` label. objectui#3952 / PR #3959 made `BooleanField`
+  suppress its own label whenever a host supplies the id — precisely because a
+  host that supplies an id is a host that renders a label. Receiving no id, this
+  branch never triggered that suppression.
+
+Both `for` targets resolved, so unlike objectui#3341 and objectui#3952 this was
+never a dangling label: clicking the row's text already toggled the control, and
+still does. What changes is the announced name, which is now the single
+"Confirm This" the author declared. The generic branch is untouched.
diff --git a/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx b/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
index 8d5144ce49..48a255eb8a 100644
--- a/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
+++ b/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
@@ -99,3 +99,76 @@ describe('app-shell ActionParamDialog — `aria-required` reaches the widget con
     expect(input.required).toBe(false);
   });
 });
+
+/**
+ * The HOST owns the control id on the boolean branch too (objectui#3962).
+ *
+ * The boolean branch renders `<Label htmlFor={param.name}>` but used to pass no
+ * `id` to the widget, so the association only held because `BooleanField`'s
+ * fallback chain happened to reach the same string (`config.name`, which
+ * `paramToField` seeds from `param.name`). Two consequences, one of them a real
+ * defect:
+ *
+ * 1. The association was IMPLICIT — it lived in another package's fallback, not
+ *    in this host's own output. The generic branch a few dozen lines below has
+ *    always passed `id={param.name}`; this branch now matches it.
+ * 2. Receiving no host id, the widget could not know the host had already
+ *    rendered a label, so it emitted its own `sr-only` one as well. Two label
+ *    elements pointing at one control CONCATENATE into the accessible name
+ *    (accname §2D), so the control announced "Confirm This Confirm This".
+ *
+ * Both `for` targets resolved, so this was never the dangling-label failure of
+ * #3341/#3952 — it was a duplicated name. The measurable half is therefore the
+ * NAME, not clickability: the pins below assert one label element and an
+ * un-doubled accessible name. `getAllByLabelText` deliberately is NOT the
+ * probe — it de-dupes its matches through a `Set` and splits multi-label names,
+ * so it returns exactly one control in both the broken and the fixed tree.
+ */
+describe('app-shell ActionParamDialog — the boolean branch names its control ONCE (objectui#3962)', () => {
+  const boolParam = def({ name: 'confirmed', label: 'Confirm This', type: 'boolean' });
+
+  it('gives the boolean control the host id and exactly one label element', async () => {
+    openDialog([boolParam]);
+
+    const checkbox = await screen.findByRole('checkbox');
+    // Explicit, not inherited: the id the dialog's own `<Label htmlFor>` names.
+    expect(checkbox).toHaveAttribute('id', 'confirmed');
+
+    const labels = Array.from(document.querySelectorAll('label[for="confirmed"]'));
+    expect(labels).toHaveLength(1);
+    // …and the surviving one is the dialog's VISIBLE label, not the widget's
+    // sr-only copy — a checkbox row whose only name is screen-reader-only
+    // would pass a bare count while showing the user nothing.
+    expect(labels[0].className).not.toContain('sr-only');
+    expect(labels[0]).toHaveTextContent('Confirm This');
+  });
+
+  it('announces the label once, not twice concatenated', async () => {
+    openDialog([boolParam]);
+
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toHaveAccessibleName('Confirm This');
+  });
+
+  it('still names a required boolean param without folding in the asterisk', async () => {
+    // The `*` marker lives inside the visible label; suppressing the widget's
+    // duplicate must not drag the visual-only marker into the name (#3299).
+    openDialog([def({ name: 'confirmed', label: 'Confirm This', type: 'boolean', required: true })]);
+
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toHaveAccessibleName('Confirm This');
+    expect(checkbox).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('leaves the generic branch exactly as it was — host id, one label, one name', async () => {
+    // The generic branch already passed `id={param.name}`; this is the
+    // unchanged-direction half of the pin, so a future "simplification" that
+    // moves id ownership back into the widgets fails here as well.
+    openDialog([def({ name: 'note', label: 'Note This', type: 'text' })]);
+
+    const input = await screen.findByLabelText('Note This');
+    expect(input).toHaveAttribute('id', 'note');
+    expect(document.querySelectorAll('label[for="note"]')).toHaveLength(1);
+    expect(input).toHaveAccessibleName('Note This');
+  });
+});
diff --git a/packages/app-shell/src/views/ActionParamDialog.test.tsx b/packages/app-shell/src/views/ActionParamDialog.test.tsx
index d59c79bbc7..8e157c8509 100644
--- a/packages/app-shell/src/views/ActionParamDialog.test.tsx
+++ b/packages/app-shell/src/views/ActionParamDialog.test.tsx
@@ -129,6 +129,26 @@ describe('ActionParamDialog — shared field-widget rendering (ADR-0059)', () =>
     await waitFor(() => expect(resolve).toHaveBeenCalledWith({ force: true }));
   });
 
+  it('toggles the boolean param by clicking its visible label (objectui#3962)', async () => {
+    // The boolean branch renders `<Label htmlFor={param.name}>` beside the
+    // control and now hands the widget that same id explicitly, so the row's
+    // normal affordance — click the text — has to work off the host's own
+    // output rather than off `BooleanField`'s id fallback chain. Pinned as
+    // BEHAVIOR here; the naming half (one label, un-doubled accessible name)
+    // is pinned in ActionParamDialog.ariaRequired.test.tsx.
+    const resolve = openDialog([def({ name: 'force', label: 'Force It', type: 'boolean' })]);
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    const label = document.querySelector('label[for="force"]') as HTMLLabelElement;
+    expect(label).not.toBeNull();
+    fireEvent.click(label);
+
+    await waitFor(() => expect(checkbox).toHaveAttribute('aria-checked', 'true'));
+    confirm();
+    await waitFor(() => expect(resolve).toHaveBeenCalledWith({ force: true }));
+  });
+
   it('renders a select param through the shared SelectField (combobox trigger)', async () => {
     openDialog([
       def({
diff --git a/packages/app-shell/src/views/ActionParamDialog.tsx b/packages/app-shell/src/views/ActionParamDialog.tsx
index b468510fe8..c52605a66a 100644
--- a/packages/app-shell/src/views/ActionParamDialog.tsx
+++ b/packages/app-shell/src/views/ActionParamDialog.tsx
@@ -256,6 +256,21 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
                   <div className="flex items-start gap-2">
                     <Suspense fallback={<div className="size-4 mt-0.5 animate-pulse rounded-sm bg-muted" aria-hidden="true" />}>
                       <Widget
+                        // The HOST owns the control id (objectui#3962), exactly
+                        // as the generic branch below does. Omitting it made
+                        // this branch's `<Label htmlFor>` association IMPLICIT:
+                        // it only resolved because `BooleanField`'s id fallback
+                        // chain reaches `config.name`, which `paramToField`
+                        // seeds from `param.name` — a host living off another
+                        // package's fallback. Worse, a widget that receives no
+                        // host id cannot know the host already rendered a label,
+                        // so it emitted its own `sr-only` copy too, and two
+                        // label elements referencing one control CONCATENATE
+                        // into the accessible name (accname §2D): the checkbox
+                        // announced "Confirm This Confirm This". Passing the id
+                        // makes the association explicit and suppresses the
+                        // duplicate (PR #3959's `emitOwnLabel = !hostId`).
+                        id={param.name}
                         value={values[param.name] === true}
                         onChange={(checked: unknown) => updateValue(param.name, checked === true)}
                         field={field}