From e763fb53506a49487567312ae7aa8e4d6a5627a0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 4 Aug 2026 05:30:07 +0000
Subject: [PATCH 1/2] fix(fields): deliver aria-invalid on 20 registered field
 widgets after validation failure (#3318)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the #3222/#3306 pattern per widget: spread toDomProps(props) onto the
widget's real focusable control (never a non-focusable wrapper, never a
non-DOM Radix Root), then an explicit aria-invalid={!!error} after the spread
so the widget's own computation from the published error slot wins.

Delivered types (removed from the NOT_YET_DELIVERED ratchet ledger):
multiselect, radio, checkboxes, tags, lookup, master_detail, user, owner,
file, image, location, object, color, rating, code, avatar, address,
geolocation, qrcode, object-ref.

Placement notes:
- radio: onto the Radix RadioGroup Root, a real <div role="radiogroup"> —
  the ARIA-designated carrier of aria-invalid for a set of radios.
- multiselect / checkboxes / rating: onto every focusable option control;
  the wrapper div carries id/aria-describedby but never aria-invalid, and
  never `name` (only DOM-legal on form controls — the #3291 leak class).
- lookup family: onto the shared trigger button (both picker branches).
- object-ref / recipient-picker: Combobox now forwards standard button
  attributes to its focusable role="combobox" trigger (the #3306
  SelectTrigger reasoning), so widgets finally have an element to deliver to.
- file / image / avatar: onto the focusable upload control (dropzone /
  upload button) — the keyboard path to the hidden file input.

Still on the ledger, each with its blocker documented in the ledger comment:
formula, summary, auto_number, vector, grid, slider, signature,
filter-condition, recipient-picker (the last two now deliver in their
editable states but render a gate hint with no focusable control in the
sweep's fresh-form state).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa
---
 packages/components/src/custom/combobox.tsx   | 17 ++++++-
 .../widget-aria-invalid-registry-e2e.test.tsx | 51 ++++++++++---------
 packages/fields/src/widgets/AddressField.tsx  | 15 +++++-
 packages/fields/src/widgets/AvatarField.tsx   |  9 +++-
 .../fields/src/widgets/CheckboxesField.tsx    | 18 +++++++
 packages/fields/src/widgets/CodeField.tsx     |  9 +++-
 packages/fields/src/widgets/ColorField.tsx    | 11 +++-
 packages/fields/src/widgets/FileField.tsx     | 14 ++++-
 .../src/widgets/FilterConditionField.tsx      | 11 ++++
 .../fields/src/widgets/GeolocationField.tsx   | 10 +++-
 packages/fields/src/widgets/ImageField.tsx    |  9 +++-
 packages/fields/src/widgets/LocationField.tsx |  9 +++-
 packages/fields/src/widgets/LookupField.tsx   | 14 ++++-
 .../fields/src/widgets/MultiSelectField.tsx   | 17 +++++++
 packages/fields/src/widgets/ObjectField.tsx   | 23 ++++++---
 .../fields/src/widgets/ObjectRefField.tsx     | 10 ++++
 packages/fields/src/widgets/QRCodeField.tsx   |  9 +++-
 packages/fields/src/widgets/RadioField.tsx    | 11 ++++
 packages/fields/src/widgets/RatingField.tsx   | 19 ++++++-
 .../src/widgets/RecipientPickerField.tsx      | 18 +++++++
 packages/fields/src/widgets/TagsField.tsx     | 12 ++++-
 21 files changed, 269 insertions(+), 47 deletions(-)

diff --git a/packages/components/src/custom/combobox.tsx b/packages/components/src/custom/combobox.tsx
index a1e73a2ee8..21714333a4 100644
--- a/packages/components/src/custom/combobox.tsx
+++ b/packages/components/src/custom/combobox.tsx
@@ -32,7 +32,18 @@ export interface ComboboxOption {
   label: string
 }
 
-export interface ComboboxProps {
+/**
+ * Beyond its own named props, the combobox accepts standard button attributes
+ * (`id`, `aria-*`, `data-*`, handlers, …) and forwards them to the trigger —
+ * the focusable `role="combobox"` button a user and their screen reader
+ * actually interact with. Without this seam a field widget rendering a
+ * Combobox had no element to deliver `aria-invalid` / `aria-describedby` to
+ * after a validation failure (objectui#3318; the same reason #3306 routes the
+ * select's pass-through onto `SelectTrigger`). `value` / `onChange` are
+ * omitted: this component's own `value` / `onValueChange` contract owns them.
+ */
+export interface ComboboxProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange"> {
   options: ComboboxOption[]
   value?: string
   onValueChange?: (value: string) => void
@@ -52,6 +63,7 @@ export function Combobox({
   emptyText = "No option found.",
   className,
   disabled,
+  ...triggerProps
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
 
@@ -59,6 +71,9 @@ export function Combobox({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          // Before this component's own props, which stay authoritative for
+          // the combobox contract (role, aria-expanded, className, disabled).
+          {...triggerProps}
           variant="outline"
           role="combobox"
           aria-expanded={open}
diff --git a/packages/fields/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx b/packages/fields/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx
index 88d79a0244..3ca8e8b960 100644
--- a/packages/fields/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx
+++ b/packages/fields/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx
@@ -159,11 +159,32 @@ const WIDGETS: Record<string, ComponentType<any>> = {
  * objectui#3318, not an accepted state: the field shows its red message while
  * assistive tech is told nothing.
  *
- * Mechanism, per widget: none of these forwards its DOM pass-through (which
- * carries the `<FormControl>` Slot's `aria-invalid`) to the control it
- * renders, nor computes one from the published `error` slot. `grid` is the
- * one partial case — it has per-CELL `aria-invalid` for its own line-item
- * validation, but a form-level failure does not drive it.
+ * The objectui#3318 delivery batch cleared 20 of the original 29 entries with
+ * the objectui#3222/#3306 pattern. What remains cannot take that pattern
+ * as-is; each entry names why, so the follow-up starts from the blocker and
+ * not from a re-audit:
+ *
+ * - `formula` / `summary` / `auto_number` / `vector` — read-only computed /
+ *   display widgets: they render static text and NO focusable control, so
+ *   there is no element assistive tech would read the state from (marking the
+ *   text span would be exactly the non-focusable-wrapper move this ledger's
+ *   rules forbid). A `required` failure on a non-editable field is a metadata
+ *   authoring problem more than a widget one.
+ * - `grid` — composite line-item editor with its own per-CELL `aria-invalid`
+ *   for line validation; driving it from a FORM-level failure needs a design
+ *   (which cell? the add-row button?) rather than a spread.
+ * - `slider` — the focusable thumb (`role="slider"`, the ARIA-designated
+ *   carrier) is rendered inside the synced shadcn `ui/slider.tsx` (a #7
+ *   no-touch file), which forwards arbitrary props only to its non-focusable
+ *   Root span; delivering needs a components-level change.
+ * - `signature` — the drawing `<canvas>` is not focusable at all (no keyboard
+ *   input path exists); the only focusable element is the auxiliary Clear
+ *   button. Needs a real a11y design, not an attribute.
+ * - `filter-condition` / `recipient-picker` — dependency-gated: with no
+ *   sibling `object_name` / `recipient_type` chosen (the state a fresh form
+ *   and THIS SWEEP render) they show a hint paragraph with no focusable
+ *   control. Their editable states DO deliver `aria-invalid` since #3318's
+ *   delivery batch.
  *
  * Do NOT add to this list to make a new widget pass; fix the widget (the
  * objectui#3222/#3306 pattern: spread `toDomProps(props)` onto the real
@@ -173,33 +194,13 @@ const WIDGETS: Record<string, ComponentType<any>> = {
  * its own ledger row red until it is removed here. The ledger only shrinks.
  */
 const NOT_YET_DELIVERED: ReadonlySet<string> = new Set([
-  'multiselect',
-  'radio',
-  'checkboxes',
-  'tags',
-  'lookup',
-  'master_detail',
-  'file',
-  'image',
-  'location',
   'formula',
   'summary',
   'auto_number',
-  'user',
-  'owner',
-  'object',
   'vector',
   'grid',
-  'color',
   'slider',
-  'rating',
-  'code',
-  'avatar',
-  'address',
-  'geolocation',
   'signature',
-  'qrcode',
-  'object-ref',
   'filter-condition',
   'recipient-picker',
 ]);
diff --git a/packages/fields/src/widgets/AddressField.tsx b/packages/fields/src/widgets/AddressField.tsx
index 32c5c54683..830ee3db3c 100644
--- a/packages/fields/src/widgets/AddressField.tsx
+++ b/packages/fields/src/widgets/AddressField.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, Label, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Address data structure
@@ -17,8 +18,14 @@ export interface AddressValue {
  * Address field widget - provides a structured address input
  * Supports street, city, state, zip code, and country
  */
-export function AddressField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<AddressValue>) {
+export function AddressField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<AddressValue>) {
   const address = value || {};
+  // DOM pass-through (objectui#3318): the whitelist spread goes onto the FIRST
+  // sub-input (street) — one carrier for the form renderer's aria-describedby;
+  // the composite's validation state goes onto EVERY focusable sub-input via
+  // `aria-invalid={!!error}` (a form-level failure means the whole address is
+  // missing/invalid, and whichever sub-input the user reaches must announce it).
+  const domProps = toDomProps(props);
 
   const handleFieldChange = (fieldName: keyof AddressValue, fieldValue: string) => {
     onChange({
@@ -47,6 +54,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
       <div>
         <Label htmlFor="street" className="text-xs">Street Address</Label>
         <Input
+          {...domProps}
           id="street"
           type="text"
           value={address.street || ''}
@@ -54,6 +62,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
           placeholder="123 Main St"
           disabled={readonly || props.disabled}
           className={props.className}
+          aria-invalid={!!error}
         />
       </div>
       
@@ -67,6 +76,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             onChange={(e) => handleFieldChange('city', e.target.value)}
             placeholder="San Francisco"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
         
@@ -79,6 +89,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             onChange={(e) => handleFieldChange('state', e.target.value)}
             placeholder="CA"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
       </div>
@@ -93,6 +104,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             onChange={(e) => handleFieldChange('zipCode', e.target.value)}
             placeholder="94102"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
         
@@ -105,6 +117,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             onChange={(e) => handleFieldChange('country', e.target.value)}
             placeholder="United States"
             disabled={readonly || props.disabled}
+            aria-invalid={!!error}
           />
         </div>
       </div>
diff --git a/packages/fields/src/widgets/AvatarField.tsx b/packages/fields/src/widgets/AvatarField.tsx
index 3785239a5d..1be68a4766 100644
--- a/packages/fields/src/widgets/AvatarField.tsx
+++ b/packages/fields/src/widgets/AvatarField.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
 import { Upload, X } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Avatar field widget - provides an avatar/profile picture uploader
  * Supports image URLs or file uploads
  */
-export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function AvatarField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [isHovered, setIsHovered] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   
@@ -92,11 +93,17 @@ export function AvatarField({ value, onChange, field, readonly, ...props }: Fiel
           className="hidden"
         />
         <Button
+          // DOM pass-through onto the widget's real focusable control — the
+          // upload button is the keyboard path to the hidden file input
+          // (objectui#3318).
+          {...toDomProps(props)}
           type="button"
           variant="outline"
           size="sm"
           onClick={() => fileInputRef.current?.click()}
           disabled={readonly || props.disabled}
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           <Upload className="w-4 h-4 mr-2" />
           {value ? 'Change' : 'Upload'} Avatar
diff --git a/packages/fields/src/widgets/CheckboxesField.tsx b/packages/fields/src/widgets/CheckboxesField.tsx
index fed6287325..ce0a48e681 100644
--- a/packages/fields/src/widgets/CheckboxesField.tsx
+++ b/packages/fields/src/widgets/CheckboxesField.tsx
@@ -2,6 +2,7 @@ import React, { useId, useEffect } from 'react';
 import { Checkbox, Label, EmptyValue, Badge } from '@object-ui/components';
 import type { OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -29,6 +30,7 @@ export function CheckboxesField({
   dependsOn: dependsOnProp,
   emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
 }: FieldWidgetComponentProps<string[]>) {
   const config = field as any;
@@ -90,8 +92,23 @@ export function CheckboxesField({
     onChange(next);
   };
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable checkbox below (`checkbox` is an
+  // aria-invalid-supporting role), computed from the published `error` slot
+  // (#3222). The per-item ids below stay authoritative for their labels.
+  // `name` is withheld too: it is only DOM-legal on form controls, and on
+  // this div it is exactly the leak #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+
   return (
     <div
+      {...groupDomProps}
       className={className}
       data-testid={fieldName ? `checkboxes-${fieldName}` : undefined}
     >
@@ -107,6 +124,7 @@ export function CheckboxesField({
               checked={selected.includes(value)}
               onCheckedChange={(checked) => toggle(value, !!checked)}
               disabled={props.disabled}
+              aria-invalid={!!error}
               data-testid={`checkboxes-option-${value}`}
             />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>
diff --git a/packages/fields/src/widgets/CodeField.tsx b/packages/fields/src/widgets/CodeField.tsx
index 497267bcb8..72a592b899 100644
--- a/packages/fields/src/widgets/CodeField.tsx
+++ b/packages/fields/src/widgets/CodeField.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Textarea, cn, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Code field widget - provides a code editor with syntax highlighting
  * Uses a simple textarea with monospace font
  * For advanced code editing, use the @object-ui/plugin-editor component
  */
-export function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function CodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const config = field;
   // Get code-specific configuration from field metadata
   const language = (config as any)?.language ?? 'javascript';
@@ -22,6 +23,8 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Textarea
+      // DOM pass-through onto the real focusable control (objectui#3318).
+      {...toDomProps(props)}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || `// Write ${language} code here...`}
@@ -29,6 +32,10 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
       className={cn("font-mono text-sm", props.className)}
       rows={12}
       spellCheck={false}
+      // AFTER the spread so this widget's own computation wins: `error` is
+      // the published validation slot (#3222), `!!undefined` → explicit
+      // "false".
+      aria-invalid={!!error}
     />
   );
 }
diff --git a/packages/fields/src/widgets/ColorField.tsx b/packages/fields/src/widgets/ColorField.tsx
index 2057d4a480..d48e1b1002 100644
--- a/packages/fields/src/widgets/ColorField.tsx
+++ b/packages/fields/src/widgets/ColorField.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Color field widget - provides a color picker input
  * Supports hex color values (e.g., #ff0000)
  */
-export function ColorField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function ColorField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const colorField = field as any;
 
   if (readonly) {
@@ -29,8 +30,14 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
         onChange={(e) => onChange(e.target.value)}
         disabled={readonly || props.disabled}
         className="w-10 h-10 rounded border border-input cursor-pointer"
+        // Both focusable halves of this widget announce the same validation
+        // state (objectui#3318).
+        aria-invalid={!!error}
       />
       <Input
+        // DOM pass-through onto the primary text control (objectui#3318): the
+        // whitelist spread carries the form renderer's id / aria-describedby.
+        {...toDomProps(props)}
         type="text"
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
@@ -38,6 +45,8 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
         disabled={readonly || props.disabled}
         className={props.className}
         pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
+        // AFTER the spread so this widget's own computation wins (#3222).
+        aria-invalid={!!error}
       />
     </div>
   );
diff --git a/packages/fields/src/widgets/FileField.tsx b/packages/fields/src/widgets/FileField.tsx
index 6aac2304ef..b68e879cac 100644
--- a/packages/fields/src/widgets/FileField.tsx
+++ b/packages/fields/src/widgets/FileField.tsx
@@ -4,6 +4,7 @@ import { useUpload } from '@object-ui/providers';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useUploadingSignal } from './useUploadingSignal';
 import {
   fileValueForSubmit,
@@ -115,7 +116,7 @@ function useFileUploads(opts: {
  * Supports single and multiple file uploads with configurable accepted file types.
  * L2: File size validation, per-file progress indicators, error messages.
  */
-export function FileField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetComponentProps<any>) {
+export function FileField({ value, onChange, field, readonly, onUploadingChange, error, ...props }: FieldWidgetComponentProps<any>) {
   const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const cameraRef = useRef<HTMLInputElement>(null);
@@ -209,6 +210,8 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
     }
   };
 
+  const { name: _domName, ...dropzoneDomProps } = toDomProps(props);
+
   return (
     <div className={props.className}>
       <input
@@ -233,8 +236,13 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
       )}
       
       <div className="space-y-2">
-        {/* Drag-and-drop zone */}
+        {/* Drag-and-drop zone — the widget's real focusable control (it is the
+            keyboard path to the hidden file input), so the DOM pass-through
+            and the validation state land here (objectui#3318). `name` is
+            withheld: only DOM-legal on form controls, and on this div it is
+            exactly the leak #3291 sweeps for. */}
         <div
+          {...dropzoneDomProps}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
@@ -255,6 +263,8 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
               inputRef.current?.click();
             }
           }}
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           <Upload className={`size-8 ${isDragOver ? 'text-primary' : 'text-muted-foreground'}`} />
           <div className="text-center">
diff --git a/packages/fields/src/widgets/FilterConditionField.tsx b/packages/fields/src/widgets/FilterConditionField.tsx
index 0ce36e4b26..4b73a01441 100644
--- a/packages/fields/src/widgets/FilterConditionField.tsx
+++ b/packages/fields/src/widgets/FilterConditionField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { FilterBuilder, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -297,6 +298,7 @@ export function FilterConditionField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string | object>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -397,10 +399,19 @@ export function FilterConditionField({
       {rawMode ? (
         <>
           <textarea
+            // DOM pass-through onto the raw-JSON editing surface
+            // (objectui#3318). NOTE this widget stays on the #3318 ledger
+            // regardless: its dependency-gated state (no `object_name` chosen
+            // yet — the state a fresh form and the registry sweep render) is a
+            // plain hint paragraph with no focusable control.
+            {...toDomProps(props)}
             className="min-h-[96px] w-full rounded border bg-background px-2 py-1 font-mono text-xs"
             value={rawValue}
             placeholder='{ "type": "customer", "is_active": true }'
             onChange={(e) => onChange(e.target.value as any)}
+            // The form's validation slot (#3222) OR this widget's own
+            // unparsable-JSON state, which already renders its red message.
+            aria-invalid={!!error || !parsed.ok}
           />
           {!parsed.ok && (
             <span className="text-xs text-destructive">{t('fields.filterCondition.invalidJson')}</span>
diff --git a/packages/fields/src/widgets/GeolocationField.tsx b/packages/fields/src/widgets/GeolocationField.tsx
index f814666b1f..c17eab00a4 100644
--- a/packages/fields/src/widgets/GeolocationField.tsx
+++ b/packages/fields/src/widgets/GeolocationField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Input, Button, Label, EmptyValue } from '@object-ui/components';
 import { MapPin, Crosshair } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Geolocation data structure
@@ -16,9 +17,13 @@ export interface GeolocationValue {
  * Geolocation field widget - provides a location picker with coordinates
  * Supports manual entry and browser geolocation API
  */
-export function GeolocationField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<GeolocationValue>) {
+export function GeolocationField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<GeolocationValue>) {
   const [isLoading, setIsLoading] = React.useState(false);
   const location = value || {};
+  // DOM pass-through (objectui#3318): the whitelist spread goes onto the FIRST
+  // sub-input (latitude); the composite's validation state goes onto BOTH
+  // focusable sub-inputs via `aria-invalid={!!error}`.
+  const domProps = toDomProps(props);
 
   const handleFieldChange = (fieldName: keyof GeolocationValue, fieldValue: string) => {
     onChange({
@@ -117,6 +122,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
         <div>
           <Label htmlFor="latitude" className="text-xs">Latitude</Label>
           <Input
+            {...domProps}
             id="latitude"
             type="number"
             value={location.latitude ?? ''}
@@ -125,6 +131,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
             disabled={readonly || props.disabled}
             step="any"
             className={props.className}
+            aria-invalid={!!error}
           />
         </div>
         
@@ -138,6 +145,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
             placeholder="-122.4194"
             disabled={readonly || props.disabled}
             step="any"
+            aria-invalid={!!error}
           />
         </div>
       </div>
diff --git a/packages/fields/src/widgets/ImageField.tsx b/packages/fields/src/widgets/ImageField.tsx
index 1fe6d459b7..b103912a89 100644
--- a/packages/fields/src/widgets/ImageField.tsx
+++ b/packages/fields/src/widgets/ImageField.tsx
@@ -4,6 +4,7 @@ import { useUpload } from '@object-ui/providers';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { ImageLightbox } from './ImageLightbox';
 import { useUploadingSignal } from './useUploadingSignal';
 import {
@@ -24,7 +25,7 @@ const ImageCropperDialog = lazy(() =>
  * ImageField - Image upload widget with preview thumbnails
  * Supports single and multiple image uploads with drag-and-drop and preview display
  */
-export function ImageField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetComponentProps<any>) {
+export function ImageField({ value, onChange, field, readonly, onUploadingChange, error, ...props }: FieldWidgetComponentProps<any>) {
   const inputRef = useRef<HTMLInputElement>(null);
   const imageField = field as any;
   const multiple = imageField?.multiple || false;
@@ -212,12 +213,18 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
         )}
         
         <Button
+          // DOM pass-through onto the widget's real focusable control — the
+          // upload button is the keyboard path to the hidden file input
+          // (objectui#3318).
+          {...toDomProps(props)}
           type="button"
           variant="outline"
           onClick={() => inputRef.current?.click()}
           className="w-full"
           disabled={uploading}
           data-testid="image-field-upload-button"
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           {uploading ? (
             <Loader2 className="size-4 mr-2 animate-spin" />
diff --git a/packages/fields/src/widgets/LocationField.tsx b/packages/fields/src/widgets/LocationField.tsx
index 50db44a84a..480cc40e2a 100644
--- a/packages/fields/src/widgets/LocationField.tsx
+++ b/packages/fields/src/widgets/LocationField.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * LocationField - Geographic coordinate input for latitude and longitude
  * Stores location as { latitude, longitude } object and displays as comma-separated pair
  */
-export function LocationField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<any>) {
+export function LocationField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<any>) {
   const config = field;
   // Location is stored as { latitude, longitude } object
   // For display, convert to "latitude, longitude" string format
@@ -39,12 +40,18 @@ export function LocationField({ value, onChange, field, readonly, ...props }: Fi
 
   return (
     <Input
+      // DOM pass-through onto the real focusable control (objectui#3318).
+      {...toDomProps(props)}
       type="text"
       value={displayValue}
       onChange={handleChange}
       placeholder={config?.placeholder || 'latitude, longitude'}
       disabled={readonly || props.disabled}
       className={props.className}
+      // AFTER the spread so this widget's own computation wins: `error` is
+      // the published validation slot (#3222), `!!undefined` → explicit
+      // "false".
+      aria-invalid={!!error}
     />
   );
 }
diff --git a/packages/fields/src/widgets/LookupField.tsx b/packages/fields/src/widgets/LookupField.tsx
index 5c46b2a103..40d4a28d60 100644
--- a/packages/fields/src/widgets/LookupField.tsx
+++ b/packages/fields/src/widgets/LookupField.tsx
@@ -11,6 +11,7 @@ import { cn,
   PopoverContent, EmptyValue } from '@object-ui/components';
 import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types';
 import { RecordPickerDialog, lookupFiltersToRecord } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
@@ -191,7 +192,7 @@ function mapFieldTypeToFilterType(
  * from the referenced object using `DataSource.find()`.
  * Falls back to static `options` when no DataSource is available.
  */
-export function LookupField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<any>) {
+export function LookupField({ value, onChange, field, readonly, error: fieldError, ...props }: FieldWidgetComponentProps<any>) {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useFieldTranslation();
   const listboxId = React.useId();
@@ -912,8 +913,15 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   // Shared field trigger — the anchor for either the inline PeoplePicker
   // (search fields) or the classic quick-select popover. No onClick: the Radix
   // trigger it is slotted into (PopoverTrigger / SheetTrigger) owns open/close.
+  //
+  // DOM pass-through onto this button — the widget's real focusable control —
+  // per objectui#3318. `name` is withheld: no native control here takes part
+  // in form submission, and a stray `name` on a button invites exactly the
+  // accidental-submitter semantics #3306 kept it off the SelectTrigger for.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
   const triggerButton = (
     <Button
+      {...triggerDomProps}
       variant="outline"
       className={cn(
         'min-w-0 flex-1 justify-start text-left font-normal',
@@ -925,6 +933,10 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       title={dependenciesMissing
         ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
         : undefined}
+      // AFTER the spread so this widget's own computation wins (#3222):
+      // `fieldError` is the published validation slot — NOT the popover's
+      // fetch error, which is a widget-internal state named `error` below.
+      aria-invalid={!!fieldError}
     >
       {hydrating ? (
         <Loader2
diff --git a/packages/fields/src/widgets/MultiSelectField.tsx b/packages/fields/src/widgets/MultiSelectField.tsx
index ac33c6c302..42a3f49b25 100644
--- a/packages/fields/src/widgets/MultiSelectField.tsx
+++ b/packages/fields/src/widgets/MultiSelectField.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Badge, EmptyValue, cn } from '@object-ui/components';
 import type { OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -31,6 +32,7 @@ export function MultiSelectField({
   dependsOn: dependsOnProp,
   emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
 }: FieldWidgetComponentProps<string[]>) {
   const config = field as any;
@@ -91,8 +93,22 @@ export function MultiSelectField({
     onChange(next);
   };
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable chip button below, computed from the
+  // published `error` slot (#3222), so whichever chip the user tabs to
+  // announces the failure. `name` is withheld too: it is only DOM-legal on
+  // form controls, and on this div it is exactly the leak #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+
   return (
     <div
+      {...groupDomProps}
       className={cn('flex flex-wrap gap-1.5', className)}
       data-testid={fieldName ? `multiselect-${fieldName}` : undefined}
     >
@@ -108,6 +124,7 @@ export function MultiSelectField({
             onClick={() => toggle(value)}
             disabled={props.disabled}
             aria-pressed={active}
+            aria-invalid={!!error}
             data-testid={`multiselect-option-${opt.value}`}
             className={cn(
               'rounded-full border px-3 py-1 text-sm transition-colors',
diff --git a/packages/fields/src/widgets/ObjectField.tsx b/packages/fields/src/widgets/ObjectField.tsx
index ed428b57eb..a33797f63a 100644
--- a/packages/fields/src/widgets/ObjectField.tsx
+++ b/packages/fields/src/widgets/ObjectField.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Textarea, cn, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * ObjectField - JSON object editor
  * Allows editing structured JSON data
  */
-export function ObjectField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<any>) {
+export function ObjectField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<any>) {
   const config = field;
   
   // Initialize string state based on value
@@ -16,7 +17,9 @@ export function ObjectField({ value, onChange, field, readonly, ...props }: Fiel
   };
   
   const [jsonString, setJsonString] = useState(getInitialJsonString);
-  const [error, setError] = useState<string | null>(null);
+  // Named `parseError`, NOT `error`: `error` is the published validation slot
+  // on the widget contract (#3222) and is destructured above.
+  const [parseError, setParseError] = useState<string | null>(null);
 
   // Sync internal string state when value changes externally
   // This is a controlled component pattern where we need to sync external changes
@@ -53,33 +56,39 @@ export function ObjectField({ value, onChange, field, readonly, ...props }: Fiel
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const str = e.target.value;
     setJsonString(str);
-    setError(null);
+    setParseError(null);
 
     if (!str.trim()) {
       onChange(null);
       return;
     }
-    
+
     try {
       const parsed = JSON.parse(str);
       onChange(parsed);
     } catch (e) {
       // Invalid JSON - don't propagate change to parent, but keep local state
-      setError("Invalid JSON");
+      setParseError("Invalid JSON");
     }
   };
 
   return (
     <div className="space-y-1">
       <Textarea
+        // DOM pass-through onto the real focusable control (objectui#3318).
+        {...toDomProps(props)}
         value={jsonString}
         onChange={handleChange}
         placeholder={config?.placeholder || '{\n  "key": "value"\n}'}
         disabled={readonly || props.disabled}
-        className={cn("font-mono text-xs", error ? "border-red-500 focus-visible:ring-red-500" : "", props.className)}
+        className={cn("font-mono text-xs", parseError ? "border-red-500 focus-visible:ring-red-500" : "", props.className)}
         rows={6}
+        // AFTER the spread so this widget's own computation wins (#3222).
+        // Invalid = the form's validation slot OR this widget's own unparsable
+        // draft (which already draws the red border above).
+        aria-invalid={!!error || !!parseError}
       />
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {parseError && <p className="text-xs text-red-500">{parseError}</p>}
     </div>
   );
 }
diff --git a/packages/fields/src/widgets/ObjectRefField.tsx b/packages/fields/src/widgets/ObjectRefField.tsx
index 36ec0166b1..15e66c630b 100644
--- a/packages/fields/src/widgets/ObjectRefField.tsx
+++ b/packages/fields/src/widgets/ObjectRefField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -31,6 +32,7 @@ export function ObjectRefField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -91,8 +93,14 @@ export function ObjectRefField({
     return <span className={className}>{label}</span>;
   }
 
+  // DOM pass-through onto the combobox trigger — the widget's real focusable
+  // control (objectui#3318). `name` is withheld: the trigger is a button, not
+  // a submission control (same reasoning as #3306's SelectTrigger).
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
+
   return (
     <Combobox
+      {...triggerDomProps}
       options={options}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
@@ -104,6 +112,8 @@ export function ObjectRefField({
       // `w-[200px]` is a component default that left this control stranded at
       // a third of the row while `名称` beside it ran full width.
       className={cn('w-full', className)}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     />
   );
 }
diff --git a/packages/fields/src/widgets/QRCodeField.tsx b/packages/fields/src/widgets/QRCodeField.tsx
index 21fc183287..6675982f9c 100644
--- a/packages/fields/src/widgets/QRCodeField.tsx
+++ b/packages/fields/src/widgets/QRCodeField.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * QR Code field widget - generates QR codes from text
  * Uses a simple SVG-based QR code generator
  */
-export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function QRCodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [showQR, setShowQR] = React.useState(false);
   const config = field;
 
@@ -47,12 +48,18 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
     <div className="space-y-3">
       <div className="flex items-center gap-2">
         <Input
+          // DOM pass-through onto the real focusable control (objectui#3318).
+          {...toDomProps(props)}
           type="text"
           value={value || ''}
           onChange={(e) => onChange(e.target.value)}
           placeholder={config?.placeholder || 'Enter text for QR code'}
           disabled={readonly || props.disabled}
           className={props.className}
+          // AFTER the spread so this widget's own computation wins: `error`
+          // is the published validation slot (#3222), `!!undefined` →
+          // explicit "false".
+          aria-invalid={!!error}
         />
         {value && (
           <>
diff --git a/packages/fields/src/widgets/RadioField.tsx b/packages/fields/src/widgets/RadioField.tsx
index 499b7c7037..faf8d8deb7 100644
--- a/packages/fields/src/widgets/RadioField.tsx
+++ b/packages/fields/src/widgets/RadioField.tsx
@@ -2,6 +2,7 @@ import React, { useId, useEffect } from 'react';
 import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -29,6 +30,7 @@ export function RadioField({
   dependsOn: dependsOnProp,
   emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
   const config = field as any;
@@ -77,11 +79,20 @@ export function RadioField({
   }
 
   return (
+    // DOM pass-through onto the radiogroup (objectui#3318). Unlike Radix
+    // `Select.Root` (#3306) this Root IS a real DOM element — a
+    // `<div role="radiogroup">` — and `radiogroup` is exactly the role
+    // WAI-ARIA designates to carry `aria-invalid` for a set of radios
+    // (`radio` itself does not support it): the group's state is announced
+    // when focus lands on any radio inside it.
     <RadioGroup
+      {...toDomProps(props)}
       value={value ?? ''}
       onValueChange={onChange}
       disabled={props.disabled}
       className={className}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     >
       {options.map((opt) => {
         // Radix speaks strings — stringify the (possibly numeric,
diff --git a/packages/fields/src/widgets/RatingField.tsx b/packages/fields/src/widgets/RatingField.tsx
index e7b880b67f..9e542ba14f 100644
--- a/packages/fields/src/widgets/RatingField.tsx
+++ b/packages/fields/src/widgets/RatingField.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<number>) {
   // Get rating-specific configuration from field metadata
   const ratingField = field as any;
   const max = ratingField?.max ?? 5;
@@ -37,8 +38,21 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
     );
   }
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable star button below, computed from the
+  // published `error` slot (#3222). `name` is withheld too: it is only
+  // DOM-legal on form controls, and on this div it is exactly the leak
+  // #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+
   return (
-    <div className={cn("flex items-center gap-1", className)}>
+    <div {...groupDomProps} className={cn("flex items-center gap-1", className)}>
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}
@@ -48,6 +62,7 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
           onMouseLeave={() => setHoverValue(null)}
           className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
           disabled={readonly || props.disabled}
+          aria-invalid={!!error}
         >
           <Star
             className={`w-5 h-5 transition-colors ${
diff --git a/packages/fields/src/widgets/RecipientPickerField.tsx b/packages/fields/src/widgets/RecipientPickerField.tsx
index c01a64741e..03cd6d0bf6 100644
--- a/packages/fields/src/widgets/RecipientPickerField.tsx
+++ b/packages/fields/src/widgets/RecipientPickerField.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -53,6 +54,7 @@ export function RecipientPickerField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -133,6 +135,8 @@ export function RecipientPickerField({
     // field is never un-editable.
     return (
       <input
+        // DOM pass-through onto the real focusable control (objectui#3318).
+        {...toDomProps(props)}
         className={cn(
           'w-full rounded border bg-background px-2 py-1 text-sm',
           className,
@@ -140,6 +144,7 @@ export function RecipientPickerField({
         value={value ?? ''}
         disabled={disabled || readonly}
         onChange={(e) => onChange(e.target.value as any)}
+        aria-invalid={!!error}
       />
     );
   }
@@ -149,8 +154,19 @@ export function RecipientPickerField({
     return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
   }
 
+  // DOM pass-through onto the combobox trigger — the widget's real focusable
+  // control (objectui#3318). `name` is withheld: the trigger is a button, not
+  // a submission control (same reasoning as #3306's SelectTrigger).
+  //
+  // NOTE this widget stays on the #3318 ledger regardless: its dependency-
+  // gated state (no `recipient_type` chosen yet — the state a fresh form and
+  // the registry sweep render) is a plain hint paragraph with no focusable
+  // control, so there is nothing there to carry the attribute.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
+
   return (
     <Combobox
+      {...triggerDomProps}
       options={options}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
@@ -163,6 +179,8 @@ export function RecipientPickerField({
       emptyText={records === null ? t('fields.recipient.loading') : t('fields.recipient.empty')}
       disabled={disabled}
       className={cn('w-full', className)}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     />
   );
 }
diff --git a/packages/fields/src/widgets/TagsField.tsx b/packages/fields/src/widgets/TagsField.tsx
index f049677bba..2f8754137d 100644
--- a/packages/fields/src/widgets/TagsField.tsx
+++ b/packages/fields/src/widgets/TagsField.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Badge, Input, EmptyValue, cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * TagsField - free-form list of string tags. Type a value and press Enter (or
  * comma) to add it; click a tag's × to remove it. The stored value is a
  * string[]. Used for the `tags` field type.
  */
-export function TagsField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string[]>) {
+export function TagsField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<string[]>) {
   const tags: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const [draft, setDraft] = React.useState('');
 
@@ -54,6 +55,10 @@ export function TagsField({ value, onChange, field, readonly, className, ...prop
         </Badge>
       ))}
       <Input
+        // DOM pass-through onto the real focusable control (objectui#3318):
+        // the whitelist spread carries the form renderer's id /
+        // aria-describedby to the input the user actually types in.
+        {...toDomProps(props)}
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         onKeyDown={onKeyDown}
@@ -61,6 +66,11 @@ export function TagsField({ value, onChange, field, readonly, className, ...prop
         disabled={props.disabled}
         placeholder={tags.length === 0 ? '输入后回车添加…' : ''}
         className="h-7 flex-1 border-0 bg-transparent p-0 px-1 shadow-none focus-visible:ring-0 min-w-[8ch]"
+        // AFTER the spread so this widget's own computation wins (the #3222
+        // discipline): `error` is the published validation slot, and
+        // `!!undefined` yields an explicit "false" — a valid field SAYS it is
+        // valid rather than staying mute.
+        aria-invalid={!!error}
       />
     </div>
   );

From 6d26c0f3dc9e77d7639075fec5acaf80f5312c4d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 4 Aug 2026 05:34:54 +0000
Subject: [PATCH 2/2] chore: changeset for the #3318 aria-invalid delivery
 batch

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NVPjPzmmAJ2Ngtvgg5MSRa
---
 .../widget-aria-invalid-delivery-batch.md     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 .changeset/widget-aria-invalid-delivery-batch.md

diff --git a/.changeset/widget-aria-invalid-delivery-batch.md b/.changeset/widget-aria-invalid-delivery-batch.md
new file mode 100644
index 0000000000..4a5c9c7290
--- /dev/null
+++ b/.changeset/widget-aria-invalid-delivery-batch.md
@@ -0,0 +1,33 @@
+---
+"@object-ui/fields": patch
+"@object-ui/components": patch
+---
+
+20 more registered field widgets now announce a failed validation to assistive
+tech: `multiselect`, `radio`, `checkboxes`, `tags`, `lookup`, `master_detail`,
+`user`, `owner`, `file`, `image`, `location`, `object`, `color`, `rating`,
+`code`, `avatar`, `address`, `geolocation`, `qrcode` and `object-ref` carry
+`aria-invalid="true"` on their real focusable control after a validation
+failure, where before the red message rendered while a screen reader was told
+nothing (objectui#3318, the registry-wide gap objectui#3306's sweep measured).
+
+Each widget follows the objectui#3222/#3306 pattern: the `toDomProps(props)`
+whitelist spread goes onto the control the user actually focuses — the input,
+the lookup trigger button, the radiogroup (`role="radiogroup"` is the
+ARIA-designated carrier for a set of radios), every chip/checkbox/star of the
+composite option widgets, the upload dropzone/button — followed by an explicit
+`aria-invalid={!!error}` computed from the published `error` slot. Wrapper
+`<div>`s never carry the state, and `name` is withheld from non-form-control
+elements (the objectui#3291 leak class).
+
+`Combobox` (`@object-ui/components`) now accepts standard button attributes
+and forwards them to its focusable `role="combobox"` trigger, giving
+combobox-based widgets an element to deliver `aria-invalid` /
+`aria-describedby` to — the same seam objectui#3306 opened on
+`SelectTrigger`.
+
+Nine types remain on the objectui#3318 ratchet ledger with their blockers
+documented there (`formula`/`summary`/`auto_number`/`vector` render no
+focusable control; `grid`, `slider`, `signature` need component-level design;
+`filter-condition`/`recipient-picker` deliver in their editable states but
+render a dependency-gate hint with no control in a fresh form).