From e57b1cdfd4149747bdedbc285705835eb2026305 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 4 Aug 2026 05:18:56 +0000
Subject: [PATCH] fix(app-shell,components,plugin-detail): deliver
 aria-required at the five renderer sites outside the object form (#3299)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five renderers computed `required`, painted a red asterisk, and put NO
required state on the control — the same defect #3290/#3298 fixed in
form.tsx, at the five sites its scope fence excluded. Four of them were
worse than pre-fix form.tsx: the bare `*` had no `aria-hidden`, so the
only "signal" was a literal asterisk folded into the accessible name
("Title asterisk").

Every site converges on the reference shape (EmbeddableForm.tsx:481,489):

- control: `aria-required={required || undefined}` — absence, not
  "false", for optional fields;
- asterisk: `aria-hidden="true"` — announced once, as a state, never as
  part of the name.

Sites:
- app-shell/ActionParamDialog: both branches (boolean row + default);
  the state rides the widget props and reaches the DOM through the
  fields' `toDomProps` whitelist, which forwards `aria-*` by prefix.
- app-shell/CreateViewDialog: display label, machine name, and each
  type-specific required-field selector (statically required, so a
  literal `aria-required="true"`).
- components/custom/action-param-dialog: all five typed branches; for
  select the state lands on the Radix trigger (the focusable combobox —
  the root renders no element).
- components/custom/field: FieldContainer injects `aria-required` via
  the same Slot that already injects id/aria-describedby/aria-invalid —
  one line covers every consumer. Its asterisk is a CSS pseudo-element,
  which never enters the a11y tree, so no marker change is needed there.
- plugin-detail/InlineCreateRelated: create-tab inputs.

Deliberately NOT native `required` (#3290 ruling): each host runs its
own validation; native required would arm the browser's constraint-
validation bubble beside it. The SDUI controls that already set native
`required` (renderers/form/{input,textarea,select,checkbox}.tsx,
basic/text-input.tsx) are excluded per the issue — no second validator
there, so their channel is already correct.

Tests per site, with mutation verification on the two load-bearing
deliveries (FieldContainer's Slot injection; the app-shell dialog's
widget-chain delivery): attribute removed -> red, restored -> green.

Fixes #3299

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa
---
 .changeset/aria-required-five-more-sites.md   |  15 ++
 .../ActionParamDialog.ariaRequired.test.tsx   | 101 +++++++++++++
 .../app-shell/src/views/ActionParamDialog.tsx |  23 ++-
 .../CreateViewDialog.ariaRequired.test.tsx    |  96 +++++++++++++
 .../app-shell/src/views/CreateViewDialog.tsx  |  12 +-
 ...action-param-dialog-aria-required.test.tsx | 136 ++++++++++++++++++
 .../field-container-aria-required.test.tsx    | 106 ++++++++++++++
 .../src/custom/action-param-dialog.tsx        |  26 +++-
 packages/components/src/custom/field.tsx      |  11 +-
 .../plugin-detail/src/InlineCreateRelated.tsx |   9 +-
 .../InlineCreateRelated.ariaRequired.test.tsx |  81 +++++++++++
 11 files changed, 603 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/aria-required-five-more-sites.md
 create mode 100644 packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
 create mode 100644 packages/app-shell/src/views/CreateViewDialog.ariaRequired.test.tsx
 create mode 100644 packages/components/src/__tests__/action-param-dialog-aria-required.test.tsx
 create mode 100644 packages/components/src/__tests__/field-container-aria-required.test.tsx
 create mode 100644 packages/plugin-detail/src/__tests__/InlineCreateRelated.ariaRequired.test.tsx

diff --git a/.changeset/aria-required-five-more-sites.md b/.changeset/aria-required-five-more-sites.md
new file mode 100644
index 0000000000..b3a3f72be7
--- /dev/null
+++ b/.changeset/aria-required-five-more-sites.md
@@ -0,0 +1,15 @@
+---
+'@object-ui/components': patch
+'@object-ui/app-shell': patch
+'@object-ui/plugin-detail': patch
+---
+
+Deliver the required state to the control in the five renderers outside the object form that still painted it as an asterisk only (objectui#3299 — the same defect #3290/#3298 fixed in `form.tsx`).
+
+Each site converges on the reference shape (`EmbeddableForm.tsx`): the control carries `aria-required={required || undefined}` and the asterisk is `aria-hidden="true"`, so assistive tech announces required once, as a state — instead of hearing a bare "asterisk" folded into the accessible name, or nothing at all.
+
+- `@object-ui/app-shell` — `ActionParamDialog` (both the boolean row and the default branch, delivered through the real field widgets' `toDomProps` whitelist) and `CreateViewDialog` (display label, machine name, and every type-specific required-field selector).
+- `@object-ui/components` — the custom `ActionParamDialog` (all five typed branches, including the Radix select trigger) and `FieldContainer`, whose existing Slot injection (`id` / `aria-describedby` / `aria-invalid`) now also injects `aria-required`, covering every consumer in one place.
+- `@object-ui/plugin-detail` — `InlineCreateRelated`'s create-tab inputs.
+
+Deliberately NOT the native `required` attribute (#3290 ruling): each of these hosts runs its own validation, and native `required` would arm the browser's constraint-validation bubble beside it. The SDUI controls that already use native `required` (`renderers/form/{input,textarea,select,checkbox}.tsx`, `basic/text-input.tsx`) are unchanged — they don't have a second validator, so their channel is already correct.
diff --git a/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx b/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
new file mode 100644
index 0000000000..8d5144ce49
--- /dev/null
+++ b/packages/app-shell/src/views/ActionParamDialog.ariaRequired.test.tsx
@@ -0,0 +1,101 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * ActionParamDialog (app-shell) — required must reach the field WIDGET's
+ * control as a state, not sit in the label as a bare `*` (objectui#3299; same
+ * shape as #3290/#3298).
+ *
+ * This dialog routes params through the real `@object-ui/fields` widgets
+ * (ADR-0059), so the state travels host → widget props → `toDomProps` (whose
+ * whitelist forwards `aria-*` by prefix, objectui#3291) → the rendered
+ * control. These tests drive that FULL delivery chain with real widgets — a
+ * widget-side strip of `aria-*` would fail here, not just a host-side
+ * omission.
+ *
+ * Deliberately NOT native `required` (#3290 ruling): the dialog runs its own
+ * required validation (`requiredError` messages); native required would arm
+ * the browser's constraint-validation bubble beside it.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { ActionParamDef } from '@object-ui/core';
+import { ActionParamDialog } from './ActionParamDialog';
+
+/** Mount the dialog open with the given params (mirrors ActionParamDialog.test.tsx). */
+function openDialog(params: ActionParamDef[]) {
+  const resolve = vi.fn();
+  render(
+    <ActionParamDialog
+      state={{ open: true, params, resolve }}
+      onOpenChange={() => {}}
+    />,
+  );
+  return resolve;
+}
+
+const def = (over: Partial<ActionParamDef>): ActionParamDef => ({
+  name: 'p1',
+  label: 'Param One',
+  type: 'text',
+  ...over,
+});
+
+describe('app-shell ActionParamDialog — `aria-required` reaches the widget control (objectui#3299)', () => {
+  it('sets aria-required="true" on a required text param, delivered through the real widget', async () => {
+    openDialog([def({ name: 'note', type: 'text', required: true })]);
+
+    const input = await screen.findByLabelText(/Param One/);
+    expect(input).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('omits the attribute entirely on an optional param, rather than writing "false"', async () => {
+    openDialog([def({ name: 'note', type: 'text' })]);
+
+    const input = await screen.findByLabelText(/Param One/);
+    expect(input).not.toHaveAttribute('aria-required');
+  });
+
+  it('sets aria-required="true" on the boolean branch too (checkbox row)', async () => {
+    // The boolean branch is a SEPARATE render path (inline checkbox row) —
+    // fixing only the default branch would leave this one silent.
+    openDialog([def({ name: 'force', type: 'boolean', required: true })]);
+
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('keeps the asterisk OUT of the accessible name — state announced once, not "asterisk"', async () => {
+    // Pre-fix the bare `*` inside `<Label htmlFor>` folded into the control's
+    // accessible name ("Param One asterisk"). Only the computed name shows
+    // that regression, so that is what gets pinned.
+    openDialog([def({ name: 'note', type: 'text', required: true })]);
+
+    const input = await screen.findByLabelText(/Param One/);
+    expect(input).toHaveAccessibleName('Param One');
+
+    const label = document.querySelector('label[for="note"]');
+    expect(label).not.toBeNull();
+    const marker = label!.querySelector('span');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveTextContent('*');
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('never sets the native `required` attribute (#3290: no double validation UI)', async () => {
+    openDialog([def({ name: 'note', type: 'text', required: true })]);
+
+    const input = (await screen.findByLabelText(/Param One/)) as HTMLInputElement;
+    // NOT `toBeRequired()` — jest-dom counts `aria-required="true"` as
+    // required, so it cannot distinguish the channel under test.
+    await waitFor(() => expect(input).toHaveAttribute('aria-required', 'true'));
+    expect(input).not.toHaveAttribute('required');
+    expect(input.required).toBe(false);
+  });
+});
diff --git a/packages/app-shell/src/views/ActionParamDialog.tsx b/packages/app-shell/src/views/ActionParamDialog.tsx
index 3e1f1f67e5..f46a849680 100644
--- a/packages/app-shell/src/views/ActionParamDialog.tsx
+++ b/packages/app-shell/src/views/ActionParamDialog.tsx
@@ -236,11 +236,20 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
                         onChange={(checked: unknown) => updateValue(param.name, checked === true)}
                         field={field}
                         className="mt-0.5"
+                        // Required is a STATE, so it rides the state channel to the
+                        // control (objectui#3299, same shape as #3290/#3298). The
+                        // widget's `toDomProps` whitelist forwards `aria-*` by
+                        // prefix, so this lands on the rendered control. `|| undefined`
+                        // so an optional param carries no attribute at all.
+                        aria-required={param.required || undefined}
                       />
                     </Suspense>
                     <Label htmlFor={param.name} className="font-normal cursor-pointer">
                       {param.label}
-                      {param.required && <span className="text-destructive ml-1">*</span>}
+                      {/* Visual-only: the state is announced via `aria-required` on
+                          the control; without `aria-hidden` the bare `*` would fold
+                          into the accessible name ("Label asterisk"). */}
+                      {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
                     </Label>
                   </div>
                   {errors[param.name] && (
@@ -257,7 +266,10 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
             <div key={param.name} className="grid gap-2">
               <Label htmlFor={param.name}>
                 {param.label}
-                {param.required && <span className="text-destructive ml-1">*</span>}
+                {/* Visual-only (objectui#3299): `aria-required` on the widget is
+                    the announced channel; hiding the `*` keeps it out of the
+                    control's accessible name. */}
+                {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
               </Label>
 
               <Suspense fallback={<WidgetFallback />}>
@@ -267,6 +279,13 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
                   onChange={(v: unknown) => updateValue(param.name, v)}
                   field={field}
                   className={errors[param.name] ? 'border-destructive' : ''}
+                  // State channel for required (objectui#3299) — deliberately NOT
+                  // the native `required` attribute (#3290 ruling: that would arm
+                  // the browser's constraint-validation bubble alongside the
+                  // dialog's own `requiredError` messages — two validators, one
+                  // field). Widgets forward `aria-*` via their `toDomProps`
+                  // whitelist, so this reaches the real control.
+                  aria-required={param.required || undefined}
                   {...uploadProps}
                 />
               </Suspense>
diff --git a/packages/app-shell/src/views/CreateViewDialog.ariaRequired.test.tsx b/packages/app-shell/src/views/CreateViewDialog.ariaRequired.test.tsx
new file mode 100644
index 0000000000..69c4e71332
--- /dev/null
+++ b/packages/app-shell/src/views/CreateViewDialog.ariaRequired.test.tsx
@@ -0,0 +1,96 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * CreateViewDialog — the three always-required controls (display label,
+ * machine name, and each type-specific required-field select) must announce
+ * required as a STATE, not as a bare `*` in the label (objectui#3299; same
+ * shape as #3290/#3298).
+ *
+ * Pre-fix, all three drew `<span>*</span>` inside `<label htmlFor>` with no
+ * `aria-hidden` and no state on the control — screen readers heard
+ * "…asterisk" in the name and "list required fields" navigation saw nothing.
+ *
+ * These fields are unconditionally required (the dialog's own submit gating
+ * treats them so), hence the static `aria-required="true"` rather than the
+ * conditional `required || undefined` shape the param dialogs use.
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { CreateViewDialog } from './CreateViewDialog';
+
+afterEach(cleanup);
+
+function openDialog() {
+  return render(
+    <CreateViewDialog open onOpenChange={() => {}} onCreate={vi.fn()} />,
+  );
+}
+
+/** The asterisk `<span>` inside the label pointing at `id` — must be a11y-hidden. */
+function markerFor(id: string) {
+  const label = document.querySelector(`label[for="${id}"]`);
+  expect(label).not.toBeNull();
+  const marker = label!.querySelector('span');
+  expect(marker).not.toBeNull();
+  expect(marker).toHaveTextContent('*');
+  return marker!;
+}
+
+describe('CreateViewDialog — `aria-required` reaches the controls (objectui#3299)', () => {
+  it('sets aria-required="true" on the display-label input, with the asterisk a11y-hidden', () => {
+    openDialog();
+
+    const input = screen.getByTestId('create-view-name-input');
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(markerFor('create-view-name-input')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('sets aria-required="true" on the machine-name input, with the asterisk a11y-hidden', () => {
+    openDialog();
+
+    const input = screen.getByTestId('create-view-machine-name-input');
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(markerFor('create-view-machine-name-input')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('sets aria-required="true" on a type-specific required-field select (kanban group-by)', () => {
+    openDialog();
+
+    // The required-fields section only renders for types that declare
+    // required config — switch to kanban to mount its group-by selector.
+    fireEvent.click(screen.getByTestId('create-view-type-kanban'));
+
+    const select = screen.getByTestId('create-view-required-groupByField');
+    expect(select).toHaveAttribute('aria-required', 'true');
+    expect(markerFor('create-view-required-groupByField')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('keeps the asterisk OUT of the accessible name (state announced once)', () => {
+    openDialog();
+
+    // `t()` resolves to the key itself in tests; pre-fix the name would have
+    // been "console.objectView.title *" — "…asterisk" to a screen reader.
+    const input = screen.getByTestId('create-view-name-input');
+    expect(input).toHaveAccessibleName('console.objectView.title');
+  });
+
+  it('never sets the native `required` attribute (#3290: no double validation UI)', () => {
+    openDialog();
+
+    // NOT `toBeRequired()` — jest-dom counts `aria-required="true"` as
+    // required, so it cannot distinguish the channel under test.
+    for (const id of ['create-view-name-input', 'create-view-machine-name-input']) {
+      const input = screen.getByTestId(id) as HTMLInputElement;
+      expect(input).toHaveAttribute('aria-required', 'true');
+      expect(input).not.toHaveAttribute('required');
+      expect(input.required).toBe(false);
+    }
+  });
+});
diff --git a/packages/app-shell/src/views/CreateViewDialog.tsx b/packages/app-shell/src/views/CreateViewDialog.tsx
index 3c2b6ff12f..bfbcc1f1bb 100644
--- a/packages/app-shell/src/views/CreateViewDialog.tsx
+++ b/packages/app-shell/src/views/CreateViewDialog.tsx
@@ -507,10 +507,14 @@ export function CreateViewDialog({
                     className="text-xs font-medium"
                   >
                     {t(rf.i18nKey)}
-                    <span className="ml-1 text-destructive">*</span>
+                    {/* Visual-only (objectui#3299): required is announced as a
+                        STATE via `aria-required` on the control; hiding the `*`
+                        keeps "asterisk" out of the accessible name. */}
+                    <span className="ml-1 text-destructive" aria-hidden="true">*</span>
                   </label>
                   <select
                     id={`create-view-required-${rf.key}`}
+                    aria-required="true"
                     data-testid={`create-view-required-${rf.key}`}
                     value={selectedFieldValue}
                     onChange={(e) => setRequiredValue(rf.key, e.target.value)}
@@ -554,10 +558,11 @@ export function CreateViewDialog({
         <div className="space-y-1">
           <label htmlFor="create-view-name-input" className="text-xs font-medium">
             {t('console.objectView.title')}
-            <span className="ml-1 text-destructive">*</span>
+            <span className="ml-1 text-destructive" aria-hidden="true">*</span>
           </label>
           <Input
             id="create-view-name-input"
+            aria-required="true"
             data-testid="create-view-name-input"
             autoFocus
             value={label}
@@ -576,10 +581,11 @@ export function CreateViewDialog({
         <div className="space-y-1">
           <label htmlFor="create-view-machine-name-input" className="text-xs font-medium">
             {t('console.objectView.viewName')}
-            <span className="ml-1 text-destructive">*</span>
+            <span className="ml-1 text-destructive" aria-hidden="true">*</span>
           </label>
           <Input
             id="create-view-machine-name-input"
+            aria-required="true"
             data-testid="create-view-machine-name-input"
             value={name}
             onChange={(e) => { setName(e.target.value); setNameTouched(true); }}
diff --git a/packages/components/src/__tests__/action-param-dialog-aria-required.test.tsx b/packages/components/src/__tests__/action-param-dialog-aria-required.test.tsx
new file mode 100644
index 0000000000..2ecaa75be0
--- /dev/null
+++ b/packages/components/src/__tests__/action-param-dialog-aria-required.test.tsx
@@ -0,0 +1,136 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * ActionParamDialog (components/custom) — required must reach each CONTROL as
+ * a state, not sit in the label as a bare `*` (objectui#3299; same shape as
+ * #3290/#3298).
+ *
+ * Pre-fix, the five typed branches (textarea / number / select / date / text)
+ * each drew `<span>*</span>` inside `<Label htmlFor>` with no `aria-hidden`
+ * and put NO required state on the control: a screen reader heard the field as
+ * "Reason asterisk" — worse than the old form.tsx, which at least had
+ * `aria-label="required"`.
+ *
+ * Converged shape (EmbeddableForm.tsx reference): the control carries
+ * `aria-required={required || undefined}`, the asterisk is `aria-hidden`.
+ * Deliberately NOT native `required` — this dialog runs its own
+ * "`<label>` is required" validation on submit; native required would arm the
+ * browser's constraint-validation bubble beside it (#3290 ruling).
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import type { ActionParamDef } from '@object-ui/core';
+import { ActionParamDialog } from '../custom/action-param-dialog';
+
+afterEach(cleanup);
+
+function openDialog(params: ActionParamDef[]) {
+  return render(
+    <ActionParamDialog
+      params={params}
+      open
+      onSubmit={vi.fn()}
+      onCancel={vi.fn()}
+    />,
+  );
+}
+
+const def = (over: Partial<ActionParamDef>): ActionParamDef =>
+  ({ name: 'p1', label: 'Param One', type: 'text', ...over } as ActionParamDef);
+
+/** The dialog gives each input `id={param.name}` — the stable locator. */
+const control = (name: string) => {
+  const el = document.getElementById(name);
+  expect(el).not.toBeNull();
+  return el as HTMLElement;
+};
+
+describe('custom ActionParamDialog — `aria-required` reaches the control (objectui#3299)', () => {
+  it('sets aria-required="true" on the text / textarea / number / date controls', () => {
+    openDialog([
+      def({ name: 'title', label: 'Title', type: 'text', required: true }),
+      def({ name: 'reason', label: 'Reason', type: 'textarea', required: true }),
+      def({ name: 'count', label: 'Count', type: 'number', required: true }),
+      def({ name: 'due', label: 'Due', type: 'date', required: true }),
+    ]);
+
+    for (const name of ['title', 'reason', 'count', 'due']) {
+      expect(control(name)).toHaveAttribute('aria-required', 'true');
+    }
+  });
+
+  it('sets aria-required="true" on the select trigger (the focusable combobox)', () => {
+    openDialog([
+      def({
+        name: 'env',
+        label: 'Environment',
+        type: 'select',
+        required: true,
+        options: [{ label: 'Production', value: 'prod' }],
+      }),
+    ]);
+
+    // The Radix root renders no element of its own; the trigger IS the
+    // control, so the state must land there.
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('omits the attribute entirely on optional params, rather than writing "false"', () => {
+    openDialog([
+      def({ name: 'notes', label: 'Notes', type: 'text' }),
+      def({ name: 'detail', label: 'Detail', type: 'textarea' }),
+    ]);
+
+    expect(control('notes')).not.toHaveAttribute('aria-required');
+    expect(control('detail')).not.toHaveAttribute('aria-required');
+  });
+
+  it('keeps the asterisk OUT of the accessible name — the state channel announces it once', () => {
+    // Pre-fix the bare `*` sat inside `<Label htmlFor>` with no `aria-hidden`,
+    // so the control's accessible name was "Title *" — read as
+    // "Title asterisk". Asserted on the COMPUTED name, which is the only place
+    // that failure is visible.
+    openDialog([def({ name: 'title', label: 'Title', type: 'text', required: true })]);
+
+    const ctl = control('title');
+    expect(ctl).toHaveAccessibleName('Title');
+    expect(ctl).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('still renders the asterisk for sighted users, hidden from the a11y tree', () => {
+    openDialog([def({ name: 'title', label: 'Title', type: 'text', required: true })]);
+
+    const label = document.querySelector('label[for="title"]');
+    expect(label).not.toBeNull();
+    const marker = label!.querySelector('span');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveTextContent('*');
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('never sets the native `required` attribute on any branch', () => {
+    // Regression fence (#3290): native required arms the browser's own
+    // validation bubble beside this dialog's submit-time messages. NOT
+    // `toBeRequired()` — jest-dom counts `aria-required="true"` as required,
+    // so that matcher cannot tell the two channels apart.
+    openDialog([
+      def({ name: 'title', label: 'Title', type: 'text', required: true }),
+      def({ name: 'reason', label: 'Reason', type: 'textarea', required: true }),
+    ]);
+
+    const title = control('title') as HTMLInputElement;
+    expect(title).not.toHaveAttribute('required');
+    expect(title.required).toBe(false);
+
+    const reason = control('reason') as HTMLTextAreaElement;
+    expect(reason).not.toHaveAttribute('required');
+    expect(reason.required).toBe(false);
+  });
+});
diff --git a/packages/components/src/__tests__/field-container-aria-required.test.tsx b/packages/components/src/__tests__/field-container-aria-required.test.tsx
new file mode 100644
index 0000000000..5a79bd0d13
--- /dev/null
+++ b/packages/components/src/__tests__/field-container-aria-required.test.tsx
@@ -0,0 +1,106 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * FieldContainer — the required STATE must reach the slotted control
+ * (objectui#3299, the same "declared ≠ delivered" gap #3290/#3298 closed in
+ * the form renderer).
+ *
+ * `FieldContainer` computed `required` and spent it on exactly one thing: the
+ * label's CSS pseudo-element asterisk (`after:content-['*']`) — pure paint
+ * that never enters the accessibility tree as a state. Meanwhile its Slot
+ * injection already delivered `id` / `aria-describedby` / `aria-invalid` to
+ * whatever control the caller slots in, so the container was ALREADY the
+ * single a11y-wiring authority for its children — it just skipped this one
+ * attribute. The fix rides the same Slot injection, so one line covers every
+ * consumer of FieldContainer.
+ *
+ * Deliberately NOT the native `required` attribute (#3290 ruling): that would
+ * arm the browser's constraint-validation bubble alongside the host's own
+ * `error` slot — two validators, two UIs, one field.
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { FieldContainer } from '../custom/field';
+
+afterEach(cleanup);
+
+describe('FieldContainer — `aria-required` rides the Slot injection (objectui#3299)', () => {
+  it('sets aria-required="true" on the slotted control when required', () => {
+    render(
+      <FieldContainer label="Title" required>
+        <input data-testid="ctl" />
+      </FieldContainer>,
+    );
+
+    expect(screen.getByTestId('ctl')).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('omits the attribute entirely when optional, rather than writing "false"', () => {
+    // `|| undefined`, matching the reference shape (EmbeddableForm.tsx /
+    // PR #3298): absence, not `aria-required="false"`.
+    render(
+      <FieldContainer label="Title">
+        <input data-testid="ctl" />
+      </FieldContainer>,
+    );
+
+    expect(screen.getByTestId('ctl')).not.toHaveAttribute('aria-required');
+  });
+
+  it('never sets the native `required` attribute', () => {
+    // Regression fence: the "obvious" alternative fix is exactly the change
+    // that must not happen (#3290 — native required arms browser constraint
+    // validation on top of the host's error slot). NOT `toBeRequired()`:
+    // jest-dom counts `aria-required="true"` as required, so that matcher
+    // cannot distinguish the two channels.
+    render(
+      <FieldContainer label="Title" required>
+        <input data-testid="ctl" />
+      </FieldContainer>,
+    );
+
+    const ctl = screen.getByTestId('ctl') as HTMLInputElement;
+    expect(ctl).toHaveAttribute('aria-required', 'true');
+    expect(ctl).not.toHaveAttribute('required');
+    expect(ctl.required).toBe(false);
+  });
+
+  it('coexists with the pre-existing Slot injections (id, aria-invalid, aria-describedby)', () => {
+    // The fix must extend the injection, not replace it — a regression that
+    // swapped the prop set instead of adding to it would pass the tests above
+    // and still break error announcement.
+    render(
+      <FieldContainer label="Title" required error="Required" htmlFor="my-field">
+        <input data-testid="ctl" />
+      </FieldContainer>,
+    );
+
+    const ctl = screen.getByTestId('ctl');
+    expect(ctl).toHaveAttribute('id', 'my-field');
+    expect(ctl).toHaveAttribute('aria-required', 'true');
+    expect(ctl).toHaveAttribute('aria-invalid', 'true');
+    expect(ctl).toHaveAttribute('aria-describedby', 'my-field-error');
+  });
+
+  it('keeps the label association intact so the name and the state stay separate channels', () => {
+    render(
+      <FieldContainer label="Title" required htmlFor="assoc-field">
+        <input />
+      </FieldContainer>,
+    );
+
+    // The asterisk is a CSS pseudo-element (`after:content-['*']`), so it can
+    // never leak into the accessible name — the state channel is the ONLY
+    // required signal, exactly the converged shape.
+    const ctl = screen.getByLabelText('Title');
+    expect(ctl).toHaveAccessibleName('Title');
+    expect(ctl).toHaveAttribute('aria-required', 'true');
+  });
+});
diff --git a/packages/components/src/custom/action-param-dialog.tsx b/packages/components/src/custom/action-param-dialog.tsx
index daf2fb9eb1..00aa0ed8b0 100644
--- a/packages/components/src/custom/action-param-dialog.tsx
+++ b/packages/components/src/custom/action-param-dialog.tsx
@@ -107,6 +107,14 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
   const renderField = (param: ActionParamDef) => {
     const value = values[param.name];
     const error = errors[param.name];
+    // Required is a STATE and must reach the CONTROL, not just the label's
+    // asterisk (objectui#3299, same shape as #3290/#3298): `aria-required` on
+    // each control, `aria-hidden` on the `*` so it stays out of the accessible
+    // name. Deliberately NOT the native `required` attribute — that would arm
+    // the browser's constraint-validation bubble alongside this dialog's own
+    // "<label> is required" messages (#3290 ruling). `|| undefined` so an
+    // optional param carries no attribute at all.
+    const ariaRequired = param.required || undefined;
 
     switch (param.type) {
       case 'textarea':
@@ -114,10 +122,11 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
           <div key={param.name} className="space-y-2">
             <Label htmlFor={param.name}>
               {param.label}
-              {param.required && <span className="text-destructive ml-1">*</span>}
+              {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
             </Label>
             <Textarea
               id={param.name}
+              aria-required={ariaRequired}
               value={value || ''}
               onChange={(e) => handleChange(param.name, e.target.value)}
               placeholder={param.placeholder}
@@ -134,10 +143,11 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
           <div key={param.name} className="space-y-2">
             <Label htmlFor={param.name}>
               {param.label}
-              {param.required && <span className="text-destructive ml-1">*</span>}
+              {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
             </Label>
             <Input
               id={param.name}
+              aria-required={ariaRequired}
               type="number"
               value={value ?? ''}
               onChange={(e) => handleChange(param.name, Number.isNaN(e.target.valueAsNumber) ? '' : e.target.valueAsNumber)}
@@ -170,13 +180,15 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
           <div key={param.name} className="space-y-2">
             <Label htmlFor={param.name}>
               {param.label}
-              {param.required && <span className="text-destructive ml-1">*</span>}
+              {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
             </Label>
             <Select
               value={value || ''}
               onValueChange={(val) => handleChange(param.name, val)}
             >
-              <SelectTrigger>
+              {/* The trigger IS the focusable combobox control, so the state
+                  belongs on it (the Radix root renders no element of its own). */}
+              <SelectTrigger aria-required={ariaRequired}>
                 <SelectValue placeholder={param.placeholder || 'Select...'} />
               </SelectTrigger>
               <SelectContent>
@@ -199,10 +211,11 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
           <div key={param.name} className="space-y-2">
             <Label htmlFor={param.name}>
               {param.label}
-              {param.required && <span className="text-destructive ml-1">*</span>}
+              {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
             </Label>
             <Input
               id={param.name}
+              aria-required={ariaRequired}
               type="date"
               value={value || ''}
               onChange={(e) => handleChange(param.name, e.target.value)}
@@ -220,10 +233,11 @@ export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
           <div key={param.name} className="space-y-2">
             <Label htmlFor={param.name}>
               {param.label}
-              {param.required && <span className="text-destructive ml-1">*</span>}
+              {param.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
             </Label>
             <Input
               id={param.name}
+              aria-required={ariaRequired}
               type="text"
               value={value || ''}
               onChange={(e) => handleChange(param.name, e.target.value)}
diff --git a/packages/components/src/custom/field.tsx b/packages/components/src/custom/field.tsx
index 16c28c4cd5..9b4b57597e 100644
--- a/packages/components/src/custom/field.tsx
+++ b/packages/components/src/custom/field.tsx
@@ -61,7 +61,7 @@ const FieldContainer = React.forwardRef<HTMLDivElement, FieldProps>(
           </Label>
         )}
         
-        <SlotPrimitive 
+        <SlotPrimitive
           id={fieldId}
           aria-describedby={
             [description && descriptionId, error && errorId]
@@ -69,6 +69,15 @@ const FieldContainer = React.forwardRef<HTMLDivElement, FieldProps>(
               .join(" ") || undefined
           }
           aria-invalid={!!error}
+          // Required is a STATE, so it rides the same Slot injection as the
+          // other a11y wiring (objectui#3299) — one line here covers every
+          // consumer of FieldContainer. Until now `required` drove only the
+          // label's CSS asterisk (`after:content-['*']`), which never enters
+          // the a11y tree as a state. `|| undefined` so an optional field
+          // carries no attribute. Deliberately NOT the native `required`
+          // attribute (#3290 ruling: it arms browser constraint validation
+          // alongside the host's own `error` slot).
+          aria-required={required || undefined}
         >
           {children}
         </SlotPrimitive>
diff --git a/packages/plugin-detail/src/InlineCreateRelated.tsx b/packages/plugin-detail/src/InlineCreateRelated.tsx
index 3dbceb6e66..32d00f4bbd 100644
--- a/packages/plugin-detail/src/InlineCreateRelated.tsx
+++ b/packages/plugin-detail/src/InlineCreateRelated.tsx
@@ -207,11 +207,18 @@ export const InlineCreateRelated: React.FC<InlineCreateRelatedProps> = ({
                 <div key={field.name}>
                   <label className="text-xs font-medium text-muted-foreground mb-1 block">
                     {field.label}
+                    {/* Visual-only (objectui#3299): the required STATE is
+                        announced via `aria-required` on the input below. */}
                     {field.required && (
-                      <span className="text-destructive ml-0.5">*</span>
+                      <span className="text-destructive ml-0.5" aria-hidden="true">*</span>
                     )}
                   </label>
                   <Input
+                    // State channel for required (objectui#3299) — not the native
+                    // `required` attribute, per the #3290 ruling (it would arm the
+                    // browser's constraint-validation UI alongside this form's own
+                    // `isCreateValid` gating).
+                    aria-required={field.required || undefined}
                     type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
                     placeholder={field.placeholder || `Enter ${field.label.toLowerCase()}`}
                     value={formValues[field.name] || ''}
diff --git a/packages/plugin-detail/src/__tests__/InlineCreateRelated.ariaRequired.test.tsx b/packages/plugin-detail/src/__tests__/InlineCreateRelated.ariaRequired.test.tsx
new file mode 100644
index 0000000000..b3c10322a1
--- /dev/null
+++ b/packages/plugin-detail/src/__tests__/InlineCreateRelated.ariaRequired.test.tsx
@@ -0,0 +1,81 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * InlineCreateRelated — the create-tab inputs must announce required as a
+ * STATE on the control, not as a bare `*` next to the label (objectui#3299;
+ * same shape as #3290/#3298).
+ *
+ * Pre-fix, `field.required` drew `<span>*</span>` with no `aria-hidden` and
+ * put nothing on the `<Input>` — the component's own `isCreateValid` gating
+ * knew which fields were required, assistive tech did not.
+ *
+ * Deliberately NOT native `required` (#3290 ruling): this form validates via
+ * `isCreateValid` disabling the Create button; native required would arm the
+ * browser's constraint-validation bubble beside it.
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { InlineCreateRelated } from '../InlineCreateRelated';
+import type { RelatedFieldDefinition } from '../InlineCreateRelated';
+
+afterEach(cleanup);
+
+const fields: RelatedFieldDefinition[] = [
+  { name: 'name', label: 'Name', type: 'string', required: true },
+  { name: 'notes', label: 'Notes', type: 'string' },
+];
+
+/** Mount with the create tab open (the collapsed state renders only buttons). */
+function openCreate() {
+  const utils = render(
+    <InlineCreateRelated
+      objectName="Contact"
+      relationshipField="account_id"
+      fields={fields}
+      onCreateRecord={vi.fn()}
+    />,
+  );
+  fireEvent.click(screen.getByRole('button', { name: /New Contact/ }));
+  return utils;
+}
+
+describe('InlineCreateRelated — `aria-required` reaches the input (objectui#3299)', () => {
+  it('sets aria-required="true" on a required field input', () => {
+    openCreate();
+
+    expect(screen.getByPlaceholderText('Enter name')).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('omits the attribute entirely on an optional field, rather than writing "false"', () => {
+    openCreate();
+
+    expect(screen.getByPlaceholderText('Enter notes')).not.toHaveAttribute('aria-required');
+  });
+
+  it('hides the asterisk from the a11y tree (visual-only marker)', () => {
+    const { container } = openCreate();
+
+    const marker = container.querySelector('label > span');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveTextContent('*');
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('never sets the native `required` attribute (#3290: no double validation UI)', () => {
+    openCreate();
+
+    // NOT `toBeRequired()` — jest-dom counts `aria-required="true"` as
+    // required, so it cannot distinguish the channel under test.
+    const input = screen.getByPlaceholderText('Enter name') as HTMLInputElement;
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).not.toHaveAttribute('required');
+    expect(input.required).toBe(false);
+  });
+});