From a3764046f33486532ffda89e2c781c88cd7c0c86 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Oct 2026 20:46:14 +0000
Subject: [PATCH 1/2] fix(app-shell): name Studio's group-title, Description,
 Help text and nav-item inputs

The form designer's inline group-title input takes the group inspector's
"Group name" label as its aria-label. The field inspector's local
TextareaField closes its label/textarea pair with a per-instance useId(),
which names Description and Help text. The nav-item inspector ties its
"Link to object" and "Label" labels to their controls with htmlFor.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QsR2jT6kwaZ4RiKsDR3s5f
---
 .changeset/26732-studio-input-names.md        | 10 +++
 ...ieldInspector.textareaNames-26732.test.tsx | 81 +++++++++++++++++++
 .../inspectors/ObjectFieldInspector.tsx       |  6 +-
 ...FormDesigner.groupTitleName-26732.test.tsx | 41 ++++++++++
 .../studio-design/ObjectFormDesigner.tsx      |  3 +
 ...rface.navItemInspectorNames-26732.test.tsx | 58 +++++++++++++
 .../studio-design/StudioDesignSurface.tsx     | 15 +++-
 7 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/26732-studio-input-names.md
 create mode 100644 ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.textareaNames-26732.test.tsx
 create mode 100644 ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.groupTitleName-26732.test.tsx
 create mode 100644 ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.navItemInspectorNames-26732.test.tsx

diff --git a/.changeset/26732-studio-input-names.md b/.changeset/26732-studio-input-names.md
new file mode 100644
index 00000000000..66cee1e26c1
--- /dev/null
+++ b/.changeset/26732-studio-input-names.md
@@ -0,0 +1,10 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): Studio's group-title, Description, Help text, nav "Link to object" and nav "Label" inputs have accessible names
+
+Clause-②: no
+Metadata-protocol: none
+
+Five Studio inputs were anonymous to screen readers and automated accessibility checks. The form designer's inline group-title input is now named "Group name", the label the group inspector gives the same value. The field inspector's Description and Help text textareas, and the Interfaces nav-item inspector's "Link to object" picker and "Label" input, are now tied to the labels already drawn above them, so each is announced by its label and clicking the label focuses it. Nothing changes visually and nothing changes in what is saved.
diff --git a/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.textareaNames-26732.test.tsx b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.textareaNames-26732.test.tsx
new file mode 100644
index 00000000000..8b55a6dd4e3
--- /dev/null
+++ b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.textareaNames-26732.test.tsx
@@ -0,0 +1,81 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectstack#26732 — the field inspector's Description and Help text
+ * textareas are named by their visible labels.
+ *
+ * Before: the local `TextareaField` drew its `<Label>` beside the textarea
+ * without closing the pair, so assistive tech read two anonymous edit fields
+ * and clicking a label focused nothing. It now closes the pair the way
+ * `_shared.tsx`'s form atoms do (`htmlFor` ⇄ a per-instance `useId()`).
+ */
+
+import '@testing-library/jest-dom/vitest';
+import * as React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+
+vi.mock('../useMetadata', () => ({
+  useMetadataClient: () => ({
+    withPreviewDrafts: () => ({ list: vi.fn().mockResolvedValue([]) }),
+  }),
+}));
+
+vi.mock('../previews/useObjectFields', () => ({
+  useObjectFields: () => ({ fields: [], loading: false, error: null }),
+}));
+
+import { ObjectFieldInspector } from './ObjectFieldInspector';
+import { t, type SupportedLocale } from '../i18n';
+// `designer.field.description` / `designer.field.helpText` live in
+// `@object-ui/i18n`'s `studio` namespace, whose `zh` catalogue is fetched on
+// demand. Resident before any case, so the zh names are read after it lands.
+import { loadStudioCatalogue } from '@object-ui/i18n/namespaces/studio';
+await loadStudioCatalogue('zh');
+
+afterEach(cleanup);
+
+function renderTextField(locale: SupportedLocale) {
+  render(
+    <ObjectFieldInspector
+      type="object"
+      name="account"
+      draft={{
+        name: 'account',
+        fields: {
+          notes: { type: 'text', label: 'Notes', description: 'What the note is for', inlineHelpText: 'Shown under the field' },
+        },
+      }}
+      selection={{ kind: 'field', id: 'notes' }}
+      onPatch={vi.fn()}
+      onClearSelection={vi.fn()}
+      onSelectionChange={vi.fn()}
+      readOnly={false}
+      locale={locale}
+    />,
+  );
+}
+
+describe('objectstack#26732 — the field inspector names its Description and Help text textareas', () => {
+  it('en: each textarea is found by its label and holds its own key', () => {
+    renderTextField('en-US');
+    const description = screen.getByRole('textbox', { name: t('designer.field.description', 'en-US') });
+    const helpText = screen.getByRole('textbox', { name: t('designer.field.helpText', 'en-US') });
+    expect(description.tagName).toBe('TEXTAREA');
+    expect(description).toHaveValue('What the note is for');
+    expect(helpText.tagName).toBe('TEXTAREA');
+    expect(helpText).toHaveValue('Shown under the field');
+    expect(screen.getByLabelText(t('designer.field.description', 'en-US'))).toBe(description);
+  });
+
+  it('zh: the same textareas carry the Chinese labels as their names', () => {
+    renderTextField('zh-CN');
+    const name = t('designer.field.description', 'zh-CN');
+    // The zh catalogue is resident, so this is the Chinese label, not the en fallback.
+    expect(name).toBe('描述');
+    expect(screen.getByRole('textbox', { name })).toHaveValue('What the note is for');
+    expect(screen.getByRole('textbox', { name: t('designer.field.helpText', 'zh-CN') })).toHaveValue(
+      'Shown under the field',
+    );
+  });
+});
diff --git a/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx
index fca77b0cacb..304e83140d1 100644
--- a/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx
+++ b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx
@@ -1516,10 +1516,14 @@ function TextareaField({
   mono?: boolean;
   placeholder?: string;
 }) {
+  // The pair is closed the way `_shared.tsx`'s form atoms close theirs: an id
+  // minted per instance, so the label names the textarea.
+  const id = React.useId();
   return (
     <div className="space-y-1">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Label htmlFor={id} className="text-xs text-muted-foreground">{label}</Label>
       <textarea
+        id={id}
         value={value}
         disabled={disabled}
         rows={rows}
diff --git a/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.groupTitleName-26732.test.tsx b/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.groupTitleName-26732.test.tsx
new file mode 100644
index 00000000000..aa2e95966a1
--- /dev/null
+++ b/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.groupTitleName-26732.test.tsx
@@ -0,0 +1,41 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectstack#26732 — the form designer's inline group-title input has an
+ * accessible name.
+ *
+ * Before: a declared group's header held a bare `<input>` with no label, no
+ * `aria-label` and no `id`, so a screen reader announced an unnamed edit field.
+ * There is no visible label beside it, so it names itself with the label the
+ * group inspector gives the same value (`engine.studio.designer.group.nameLabel`).
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ObjectFormDesigner } from './ObjectFormDesigner';
+import { t } from '../metadata-admin/i18n';
+
+afterEach(cleanup);
+
+const draft = {
+  name: 'crm_account',
+  fields: [{ name: 'name', type: 'text', label: 'Account Name', group: 'basic' }],
+  fieldGroups: [{ key: 'basic', label: 'Basic Information' }],
+};
+
+describe('objectstack#26732 — the form designer names its group-title input', () => {
+  it("a declared group's title input is found by its name and holds the group's label", () => {
+    render(
+      <ObjectFormDesigner
+        draft={draft}
+        systemFieldNames={new Set()}
+        onChange={vi.fn()}
+        onSelectField={() => {}}
+        onSelectGroup={() => {}}
+      />,
+    );
+    const input = screen.getByRole('textbox', { name: t('engine.studio.designer.group.nameLabel', 'en-US') });
+    expect(input).toHaveValue('Basic Information');
+  });
+});
diff --git a/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.tsx b/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.tsx
index 0d5e4661d32..359642f8233 100644
--- a/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.tsx
+++ b/ui/packages/app-shell/src/views/studio-design/ObjectFormDesigner.tsx
@@ -481,6 +481,9 @@ function Section({
       <div className="flex h-11 items-center gap-2 border-b px-4">
         {isDeclared && !readOnly ? (
           <input
+            // No visible label sits beside the inline title: the input names
+            // itself with the group inspector's own name-field label.
+            aria-label={t('engine.studio.designer.group.nameLabel', locale)}
             defaultValue={title}
             onBlur={(e) => e.target.value.trim() && e.target.value !== title && onRename(e.target.value)}
             onKeyDown={(e) => {
diff --git a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.navItemInspectorNames-26732.test.tsx b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.navItemInspectorNames-26732.test.tsx
new file mode 100644
index 00000000000..cdc731ce868
--- /dev/null
+++ b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.navItemInspectorNames-26732.test.tsx
@@ -0,0 +1,58 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectstack#26732 — the Interfaces nav-item inspector's *Link to object*
+ * picker and *Label* input are named by their visible labels.
+ *
+ * Before: both labels were drawn above their controls without `htmlFor`, so
+ * the picker's trigger and the text input were anonymous to assistive tech.
+ * Each now closes the pair with a `useId()`, as the inspector's target, URL
+ * and icon fields already did.
+ */
+import '@testing-library/jest-dom/vitest';
+import * as React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { MetadataCtx } from '@object-ui/react';
+
+import { StudioNavItemInspector } from './StudioDesignSurface';
+import { t } from '../metadata-admin/i18n';
+
+afterEach(cleanup);
+
+const METADATA = {
+  apps: [],
+  objects: [{ name: 'account', label: 'Customers' }],
+  dashboards: [],
+  reports: [],
+  pages: [],
+  loading: false,
+  error: null,
+  refresh: async () => {},
+  invalidate: () => {},
+  ensureType: async () => [],
+  getItem: async () => null,
+  getItemsByType: () => [],
+  getTypeStatus: () => 'ready' as const,
+};
+
+describe('objectstack#26732 — the nav-item inspector names its object picker and label input', () => {
+  it('an object entry: the picker and the Label field are found by their labels', () => {
+    render(
+      <MetadataCtx.Provider value={METADATA as never}>
+        <StudioNavItemInspector
+          navId="navigation[0]"
+          appDraft={{ navigation: [{ id: 'nav_account', type: 'object', objectName: 'account', label: 'Accounts' }] }}
+          objects={[{ name: 'account', label: 'Customers' }]}
+          packageId="com.acme.app"
+          onNavPatch={vi.fn()}
+          onClear={vi.fn()}
+        />
+      </MetadataCtx.Provider>,
+    );
+    expect(screen.getByRole('combobox', { name: t('engine.studio.nav.linkObject', 'en-US') })).toBe(
+      screen.getByTestId('nav-link-object'),
+    );
+    expect(screen.getByRole('textbox', { name: t('engine.studio.nav.label', 'en-US') })).toHaveValue('Accounts');
+  });
+});
diff --git a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
index e3ba37b0f9a..d0b4294e584 100644
--- a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
+++ b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
@@ -2614,6 +2614,8 @@ export function StudioNavItemInspector({
   const targetLabel = useNavTargetLabel();
   const typeGroupName = React.useId();
   const iconFieldId = React.useId();
+  const objectFieldId = React.useId();
+  const labelFieldId = React.useId();
   const idx = React.useMemo(() => {
     const m = /^navigation\[(\d+)\]$/.exec(navId);
     return m ? Number(m[1]) : -1;
@@ -2732,8 +2734,11 @@ export function StudioNavItemInspector({
       : inheritedNavEntryText(node as NavEntryLike, targetLabel);
   const labelField = (
     <div>
-      <label className="mb-1 block text-[11px] font-medium text-muted-foreground">{t('engine.studio.nav.label', locale)}</label>
+      <label htmlFor={labelFieldId} className="mb-1 block text-[11px] font-medium text-muted-foreground">
+        {t('engine.studio.nav.label', locale)}
+      </label>
       <input
+        id={labelFieldId}
         value={navItemLabelText(label, locale)}
         onChange={(e) => editLabel(e.target.value)}
         placeholder={placeholderText}
@@ -2772,8 +2777,11 @@ export function StudioNavItemInspector({
       </fieldset>
       {(kind === 'object' || kind === null) && (
         <div>
-          <label className="mb-1 block text-[11px] font-medium text-muted-foreground">{t('engine.studio.nav.linkObject', locale)}</label>
+          <label htmlFor={objectFieldId} className="mb-1 block text-[11px] font-medium text-muted-foreground">
+            {t('engine.studio.nav.linkObject', locale)}
+          </label>
           <StudioPicker
+            id={objectFieldId}
             value={boundObject}
             options={[
               { value: '', label: t('engine.studio.nav.chooseObject', locale) },
@@ -3044,7 +3052,8 @@ const PICKER_XS = 'h-auto rounded px-2 py-1 text-xs';
  *   opens there.
  * - Each caller keeps the name its native control had: a `<label htmlFor>`
  *   names the trigger by `id`, and a wrapping `<label>` names it as it named
- *   the native control. The object picker had none and still has none.
+ *   the native control. The nav-item inspector's object picker is named by
+ *   its *Link to object* label the same way.
  */
 function StudioPicker({
   id,

From 67406db6830d639495c117ebea029a5c84db2b5a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Oct 2026 21:08:50 +0000
Subject: [PATCH 2/2] test(app-shell): the nav-item inspector's object picker
 is now named by its Link to object label

The shared-Select suite pinned that the object picker had no accessible
name, as its native control had none. The picker is now tied to its
visible label, so the pin reads that name instead.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QsR2jT6kwaZ4RiKsDR3s5f
---
 ...udioDesignSurface.sharedSelect-11865.test.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.sharedSelect-11865.test.tsx b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.sharedSelect-11865.test.tsx
index 91bf0eb9c20..0282666e619 100644
--- a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.sharedSelect-11865.test.tsx
+++ b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.sharedSelect-11865.test.tsx
@@ -14,8 +14,9 @@
  * What is pinned:
  *   - each picker IS the primitive (a Radix combobox trigger), shows what the
  *     entry or the dialog holds, and no native select is left;
- *   - each picker keeps the accessible name the native control had (the
- *     object picker had none, and has none);
+ *   - each picker keeps the accessible name the native control had, and the
+ *     object picker, which had none, is named by its *Link to object* label
+ *     (objectstack#26732);
  *   - every option of every picker writes what the native control wrote:
  *     the inspector's `onNavPatch` value as JSON text plus the keys it holds
  *     as `undefined` (JSON erases those), the *New object* save and the
@@ -158,7 +159,7 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-/** The object picker's handle: it has no accessible name, as the native control had none. */
+/** The object picker's handle, kept from when it had no accessible name (the native control had none). */
 const OBJECT_PICKER = 'nav-link-object';
 const CHOOSE_OBJECT = en('engine.studio.nav.chooseObject');
 const CHOOSE = en('engine.inspector.appNav.choose');
@@ -337,13 +338,14 @@ describe('the nav-item inspector picks with the shared Select (objectui#11865)',
   });
 
   // The names were read on the native controls; red there only because the object picker is found by its test id.
-  it('each picker keeps the name its label gave the native control; the object picker had none', async () => {
+  // The object picker had none there; objectstack#26732 names it by its *Link to object* label.
+  it('each picker keeps the name its label gave the native control; the object picker is named by its label', async () => {
     const names: Record<string, string[]> = {};
     for (const key of ['objBorn', 'pageBorn', 'dashBound', 'reportBorn', 'actionBorn', 'compBorn', 'docBorn', 'urlDefault']) {
       renderEntry(key);
       names[key] = screen.getAllByRole('combobox').map((c) => {
         // objectui#12455 — the inspector's Icon picker is a combobox named by its label too.
-        const named = ['Page', 'Dashboard', 'Report', 'Action', 'Component', 'Doc page', 'Book', 'Open in', 'Icon'].find(
+        const named = ['Link to object', 'Page', 'Dashboard', 'Report', 'Action', 'Component', 'Doc page', 'Book', 'Open in', 'Icon'].find(
           (n) => screen.queryByRole('combobox', { name: n }) === c,
         );
         return named ?? '';
@@ -351,7 +353,7 @@ describe('the nav-item inspector picks with the shared Select (objectui#11865)',
       cleanup();
     }
     expect(names).toEqual({
-      objBorn: ['', 'Icon'],
+      objBorn: ['Link to object', 'Icon'],
       pageBorn: ['Page', 'Icon'],
       dashBound: ['Dashboard', 'Icon'],
       reportBorn: ['Report', 'Icon'],
@@ -361,7 +363,7 @@ describe('the nav-item inspector picks with the shared Select (objectui#11865)',
       urlDefault: ['Open in', 'Icon'],
     });
     renderEntry('objBorn');
-    expect(screen.getByTestId(OBJECT_PICKER)).not.toHaveAccessibleName();
+    expect(screen.getByTestId(OBJECT_PICKER)).toHaveAccessibleName('Link to object');
   });
 
   it('each picker lists its options in the order the native control did', async () => {