@@ -0,0 +1,40 @@
+---
+'@object-ui/app-shell': patch
+'@object-ui/plugin-designer': patch
+---
+
+fix(app-shell, plugin-designer): three more forms keep the required `*` out of the control's accessible name
+
+A flow screen's input fields (`ScreenView`), the metadata-admin `SchemaForm` and
+the `AppCreationWizard` basic step each drew the required marker as a bare `*`
+inside the label that names the control. A screen reader therefore announced
+"Title *" instead of "Title", and none of those controls reported that it was
+required.
+
+The marker is now `aria-hidden`, the rule `ActionParamDialog` and `FormPage`
+already follow (objectui#3299, objectui#10178): the `*` is for sighted users, and
+the requirement is announced as `aria-required` on the control. Each marker also
+carries `data-required-marker="true"`, the same locator the shared form
+renderer's marker uses.
+
+- `ScreenView`: every field control (text, number, email, date, textarea,
+  checkbox and select) carries `aria-required` when the field is required.
+- `SchemaForm`: the marker is hidden in the default row, in the boolean row, and
+  in a grid repeater's column header, which names every cell below it. The
+  controls `SchemaForm` renders itself (select, switch, number and text inputs,
+  textarea, the comma-separated list input and the JSON editor) carry
+  `aria-required` from the same flag that draws the marker.
+- Metadata-admin widgets: `WidgetProps` gains an optional `required` member, and
+  `SchemaForm` passes the same flag to a registered widget, in a row and in a
+  grid cell. Ten of the eleven `labelling: 'control'` widgets put it on their
+  control as `aria-required`: `ref:object`, `ref:component`, `object-selector`,
+  `field-selector`, `field-ref`, `view-ref`, `icon`, `color-input`,
+  `string-tags` and `secret`. `filter-builder` does not, because its control is
+  a plain button, where ARIA does not allow `aria-required`.
+- Colour picker: `ColorVariantPicker` takes an optional `required` and puts
+  `aria-required` on its radio group, and the `color-picker` widget passes the
+  field's flag through. Its other callers pass nothing, so they are unchanged.
+- `AppCreationWizard`: the App name and Title inputs carry `aria-required`.
+
+Native `required` is not added anywhere, so no browser validation appears beside
+each form's own required check.
@@ -0,0 +1,82 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectui#10367 — a flow screen's required `*` stays out of the control's
+ * accessible name, and the requirement reaches the control as a STATE.
+ *
+ * `ScreenView` writes each flat field's label as `Label htmlFor=ff-NAME` and
+ * `ScreenFieldInput` puts `ff-NAME` on the control, so everything inside that
+ * label is the control's name. The `*` used to be a bare span in there: the
+ * required text control was named "Title *", and no control carried `required`
+ * or `aria-required`. The objectui#10178 / objectui#3299 shape is the fix: the
+ * marker is `aria-hidden`, and `aria-required` goes on the control.
+ *
+ * `aria-required`, not native `required`, on every arm: the runner
+ * (`FlowRunner`) owns required enforcement and counts an unchecked `false` as
+ * an answer, while native `required` on a checkbox means "must be checked".
+ * So each required case also asserts that native `required` is absent.
+ *
+ * The marker is located by `data-required-marker` (the locator the shared
+ * form renderer already uses), never by the a11y attribute under test.
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ScreenView, type ScreenSpec } from './ScreenView';
+
+afterEach(cleanup);
+
+function renderScreen(fields: ScreenSpec['fields']) {
+  const spec = { nodeId: 'n1', kind: 'form', title: 'Step', fields } as unknown as ScreenSpec;
+  return render(<ScreenView screen={spec} values={{}} onValueChange={() => {}} />);
+}
+
+describe('objectui#10367 — ScreenView keeps the required `*` out of the accessible name', () => {
+  it('a required text field is found by its bare label and reports required', () => {
+    const { container } = renderScreen([{ name: 'title', label: 'Title', type: 'text', required: true }]);
+
+    // The card's named probe: this lookup missed while the name was "Title *".
+    const input = screen.getByRole('textbox', { name: 'Title' });
+    expect(input).toBeRequired();
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).not.toHaveAttribute('required');
+
+    // The sighted-user affordance is still drawn, just not announced.
+    const marker = container.querySelector('[data-required-marker]');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveTextContent('*');
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('every other control arm carries aria-required and a name without `*`', () => {
+    renderScreen([
+      { name: 'note', label: 'Note', type: 'textarea', required: true },
+      { name: 'agree', label: 'Agree', type: 'boolean', required: true },
+      { name: 'kind', label: 'Kind', type: 'text', required: true, options: [{ label: 'A', value: 'a' }] },
+    ]);
+
+    const note = screen.getByRole('textbox', { name: 'Note' });
+    expect(note).toHaveAttribute('aria-required', 'true');
+    expect(note).not.toHaveAttribute('required');
+
+    const agree = screen.getByRole('checkbox', { name: 'Agree' });
+    expect(agree).toHaveAttribute('aria-required', 'true');
+    expect(agree).not.toHaveAttribute('required');
+
+    const kind = screen.getByRole('combobox', { name: 'Kind' });
+    expect(kind).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('CONTROL — an optional field shows no marker and carries no aria-required', () => {
+    const { container } = renderScreen([
+      { name: 'title', label: 'Title', type: 'text' },
+      { name: 'agree', label: 'Agree', type: 'boolean' },
+    ]);
+
+    expect(container.querySelector('[data-required-marker]')).toBeNull();
+    const input = screen.getByRole('textbox', { name: 'Title' });
+    expect(input).not.toBeRequired();
+    expect(input).not.toHaveAttribute('aria-required');
+    expect(screen.getByRole('checkbox', { name: 'Agree' })).not.toHaveAttribute('aria-required');
+  });
+});
@@ -216,7 +216,12 @@ export function ScreenView({ screen, values, onValueChange, dataSource, objects,
         <div key={f.name} className="space-y-1.5">
           <Label htmlFor={`ff-${f.name}`} className="text-sm">
             {f.label || f.name}
-            {f.required && <span className="text-destructive"> *</span>}
+            {/* Visual-only (objectui#3299, objectui#10367): `aria-required` on
+                the control is the announced channel; hiding the `*` keeps it
+                out of the control's accessible name ("Title", not "Title *"). */}
+            {f.required && (
+              <span className="text-destructive" aria-hidden="true" data-required-marker="true"> *</span>
+            )}
           </Label>
           <ScreenFieldInput field={f} value={values[f.name]} onChange={(v) => onValueChange(f.name, v)} />
         </div>
@@ -238,11 +243,18 @@ export function ScreenView({ screen, values, onValueChange, dataSource, objects,
 export function ScreenFieldInput({ field, value, onChange }: { field: ScreenFieldSpec; value: unknown; onChange: (v: unknown) => void }) {
   const id = `ff-${field.name}`;
   const t = (field.type || 'text').toLowerCase();
+  // The required STATE, announced on the control itself — the label's `*` is
+  // visual-only (objectui#10367). `aria-required`, not native `required`: the
+  // runner owns required enforcement (`FlowRunner`'s submit check, which counts
+  // an unchecked `false` as an answer), and native `required` would add the
+  // browser's own verdict beside it — on a checkbox it means "must be checked".
+  // `undefined` when optional, so the attribute is omitted rather than "false".
+  const ariaRequired = field.required ? true : undefined;
 
   if (Array.isArray(field.options) && field.options.length > 0) {
     return (
       <Select value={value != null ? String(value) : undefined} onValueChange={(v) => onChange(v)}>
-        <SelectTrigger id={id}><SelectValue placeholder={field.placeholder || 'Select…'} /></SelectTrigger>
+        <SelectTrigger id={id} aria-required={ariaRequired}><SelectValue placeholder={field.placeholder || 'Select…'} /></SelectTrigger>
         <SelectContent>
           {field.options.map((o, i) => (
             <SelectItem key={i} value={String(o.value)}>{o.label}</SelectItem>
@@ -252,15 +264,16 @@ export function ScreenFieldInput({ field, value, onChange }: { field: ScreenFiel
     );
   }
   if (t === 'boolean' || t === 'checkbox') {
-    return <Checkbox id={id} checked={value === true} onCheckedChange={(c) => onChange(c === true)} />;
+    return <Checkbox id={id} aria-required={ariaRequired} checked={value === true} onCheckedChange={(c) => onChange(c === true)} />;
   }
   if (t === 'textarea' || t === 'markdown') {
-    return <Textarea id={id} value={(value as string) ?? ''} placeholder={field.placeholder} onChange={(e) => onChange(e.target.value)} />;
+    return <Textarea id={id} aria-required={ariaRequired} value={(value as string) ?? ''} placeholder={field.placeholder} onChange={(e) => onChange(e.target.value)} />;
   }
   const htmlType = t === 'number' || t === 'currency' ? 'number' : t === 'email' ? 'email' : t === 'date' ? 'date' : 'text';
   return (
     <Input
       id={id}
+      aria-required={ariaRequired}
       type={htmlType}
       value={(value as string) ?? ''}
       placeholder={field.placeholder}