From 2039307d3c5a8c68fe19be36aaa5513c2e699b79 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 26 Oct 2026 19:13:54 +0000
Subject: [PATCH 1/4] test(plugin-detail): pin the inline-edit pencil's
 keyboard focus reveal

Red first: the read-mode pencil in DetailSection and HeaderHighlight is
revealed on hover only, so a Tab stop lands on an invisible control.

Claude-Session: https://claude.ai/code/session_01SMps7wq7rBTk53e8KTSEup
Co-authored-by: Claude <noreply@anthropic.com>
---
 ...nlineEditPencil.focusReveal-25883.test.tsx | 205 ++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 ui/packages/plugin-detail/src/__tests__/inlineEditPencil.focusReveal-25883.test.tsx

diff --git a/ui/packages/plugin-detail/src/__tests__/inlineEditPencil.focusReveal-25883.test.tsx b/ui/packages/plugin-detail/src/__tests__/inlineEditPencil.focusReveal-25883.test.tsx
new file mode 100644
index 00000000000..3e63a1d57d2
--- /dev/null
+++ b/ui/packages/plugin-detail/src/__tests__/inlineEditPencil.focusReveal-25883.test.tsx
@@ -0,0 +1,205 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { InlineEditProvider } from '@object-ui/react';
+import type { DetailViewSection } from '@object-ui/types';
+import { DetailSection } from '../DetailSection';
+import { HeaderHighlight } from '../HeaderHighlight';
+
+/**
+ * objectstack#25883 item 1 — the read-mode inline-edit pencil was revealed on
+ * HOVER only (`opacity-0 group-hover:opacity-100`). It is a real `<button>`, so
+ * a keyboard Tab stop landed on it while it stayed fully transparent: the
+ * focus ring the shared `Button` draws was painted at opacity 0.
+ *
+ * The pencil must now also show while it, or anything else in its field, has
+ * keyboard focus, in both places it is drawn: the details body
+ * (`DetailSection`) and the highlights strip (`HeaderHighlight`). Hover and
+ * double-click behave exactly as before.
+ *
+ * jsdom has no layout and no CSS engine, so "visible on focus" cannot be
+ * measured here. What these tests pin is the contract a browser turns into
+ * visibility: the pencil is a focusable button, it carries the focus-reveal
+ * utilities next to the unchanged hover reveal, the shared focus ring is still
+ * on it, and the `group` its `group-*` variants resolve against is its own
+ * field. Activation and double-click are asserted behaviourally.
+ *
+ * The pencil is found by its icon, not by its localized label, so the tests
+ * hold in every locale.
+ */
+
+const pencilButtons = (root: HTMLElement): HTMLButtonElement[] =>
+  Array.from(root.querySelectorAll('svg.lucide-pencil')).map(
+    (svg) => svg.closest('button') as HTMLButtonElement,
+  );
+
+function expectFocusRevealContract(pencil: HTMLButtonElement) {
+  // A real, enabled, tabbable control: the Tab stop the defect is about.
+  expect(pencil.tagName).toBe('BUTTON');
+  expect(pencil).not.toBeDisabled();
+  expect(pencil.getAttribute('tabindex')).not.toBe('-1');
+  pencil.focus();
+  expect(pencil).toHaveFocus();
+
+  const cls = pencil.classList;
+  // Hidden at rest, revealed on hover: unchanged.
+  expect(cls.contains('opacity-0')).toBe(true);
+  expect(cls.contains('group-hover:opacity-100')).toBe(true);
+  // Revealed on keyboard focus of the pencil itself …
+  expect(cls.contains('focus-visible:opacity-100')).toBe(true);
+  // … and while focus is anywhere inside its field (e.g. a lookup's link).
+  expect(cls.contains('group-focus-within:opacity-100')).toBe(true);
+  // The shared Button's focus ring survives the className merge, so the
+  // revealed pencil also shows where focus is.
+  expect(cls.contains('focus-visible:ring-2')).toBe(true);
+
+  // `group-*` variants resolve against the nearest `.group` ancestor; it must
+  // be this field's own wrapper, so focus in one field reveals only its pencil.
+  const group = pencil.closest('.group');
+  expect(group).not.toBeNull();
+  expect(pencilButtons(group as HTMLElement)).toEqual([pencil]);
+}
+
+describe('DetailSection read-mode pencil — keyboard focus reveal (#25883)', () => {
+  beforeAll(() => {
+    // useIsMobile() keys off window.innerWidth; the desktop row carries the pencil.
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1280 });
+  });
+
+  const objectSchema = {
+    fields: {
+      title: { type: 'text' },
+      city: { type: 'text' },
+      score: { type: 'formula' },
+    },
+  };
+  const section: DetailViewSection = {
+    fields: [
+      { name: 'title', label: 'Title' },
+      { name: 'city', label: 'City' },
+      { name: 'score', label: 'Score' },
+    ],
+  } as DetailViewSection;
+  const data = { title: 'Hello', city: 'Paris', score: 42 };
+
+  it('draws one focus-revealed pencil per editable field, none on a computed one', () => {
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={data}
+        objectSchema={objectSchema}
+        onEnterInlineEdit={vi.fn()}
+      />,
+    );
+    const pencils = pencilButtons(container);
+    expect(pencils).toHaveLength(2); // title + city; the formula has none
+    pencils.forEach(expectFocusRevealContract);
+  });
+
+  it('activating the focused pencil enters inline edit on its own field', () => {
+    const onEnter = vi.fn();
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={data}
+        objectSchema={objectSchema}
+        onEnterInlineEdit={onEnter}
+      />,
+    );
+    const [titlePencil, cityPencil] = pencilButtons(container);
+    cityPencil.focus();
+    // Enter / Space on a native <button> dispatch `click`.
+    fireEvent.click(cityPencil);
+    expect(onEnter).toHaveBeenCalledTimes(1);
+    expect(onEnter).toHaveBeenCalledWith('city');
+    expect(titlePencil).not.toHaveFocus();
+  });
+
+  it('double-click on the value still enters inline edit', () => {
+    const onEnter = vi.fn();
+    render(
+      <DetailSection
+        section={section}
+        data={data}
+        objectSchema={objectSchema}
+        onEnterInlineEdit={onEnter}
+      />,
+    );
+    fireEvent.doubleClick(screen.getByText('Hello'));
+    expect(onEnter).toHaveBeenCalledWith('title');
+  });
+
+  it('draws no pencil when the record offers no inline edit', () => {
+    const { container } = render(
+      <DetailSection section={section} data={data} objectSchema={objectSchema} />,
+    );
+    expect(pencilButtons(container)).toHaveLength(0);
+  });
+});
+
+describe('HeaderHighlight pencil — keyboard focus reveal (#25883)', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1280 });
+  });
+
+  const objectSchema = {
+    fields: {
+      owner: { type: 'text' },
+      score: { type: 'formula' },
+    },
+  };
+  const fields = [
+    { name: 'owner', label: 'Owner' },
+    { name: 'score', label: 'Score' },
+  ] as any;
+  const data = { owner: 'Alice', score: '99' };
+
+  it('draws a focus-revealed pencil on the editable highlight only', () => {
+    const { container } = render(
+      <InlineEditProvider canEdit>
+        <HeaderHighlight fields={fields} data={data} objectSchema={objectSchema} />
+      </InlineEditProvider>,
+    );
+    const pencils = pencilButtons(container);
+    expect(pencils).toHaveLength(1); // owner; the formula has none
+    expectFocusRevealContract(pencils[0]);
+  });
+
+  it('activating the focused pencil enters the shared edit session', () => {
+    const { container } = render(
+      <InlineEditProvider canEdit>
+        <HeaderHighlight fields={fields} data={data} objectSchema={objectSchema} />
+      </InlineEditProvider>,
+    );
+    const [pencil] = pencilButtons(container);
+    pencil.focus();
+    fireEvent.click(pencil);
+    expect(screen.getByDisplayValue('Alice')).toBeInTheDocument();
+  });
+
+  it('double-click on the highlight still enters the shared edit session', () => {
+    render(
+      <InlineEditProvider canEdit>
+        <HeaderHighlight fields={fields} data={data} objectSchema={objectSchema} />
+      </InlineEditProvider>,
+    );
+    fireEvent.doubleClick(screen.getByText('Alice'));
+    expect(screen.getByDisplayValue('Alice')).toBeInTheDocument();
+  });
+
+  it('draws no pencil when the record is not editable', () => {
+    const { container } = render(
+      <InlineEditProvider canEdit={false}>
+        <HeaderHighlight fields={fields} data={data} objectSchema={objectSchema} />
+      </InlineEditProvider>,
+    );
+    expect(pencilButtons(container)).toHaveLength(0);
+  });
+});

From 73f0c5ba1430760bccbb3c34135f3466fa266899 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 26 Oct 2026 19:39:51 +0000
Subject: [PATCH 2/4] fix(plugin-detail): reveal the inline-edit pencil on
 keyboard focus

The read-mode pencil in DetailSection and HeaderHighlight was
`opacity-0 group-hover:opacity-100`: a real button, so a Tab stop
landed on an invisible control. It now also shows on
`focus-visible` and `group-focus-within`, the spelling RowActionMenu
and data-table already use. Hover and double-click are unchanged.

Claude-Session: https://claude.ai/code/session_01SMps7wq7rBTk53e8KTSEup
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/25883-pencil-focus-reveal.md           | 12 ++++++++++++
 ui/packages/plugin-detail/src/DetailSection.tsx   |  5 ++++-
 ui/packages/plugin-detail/src/HeaderHighlight.tsx |  4 +++-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/25883-pencil-focus-reveal.md

diff --git a/.changeset/25883-pencil-focus-reveal.md b/.changeset/25883-pencil-focus-reveal.md
new file mode 100644
index 00000000000..268721e1452
--- /dev/null
+++ b/.changeset/25883-pencil-focus-reveal.md
@@ -0,0 +1,12 @@
+---
+'@object-ui/plugin-detail': patch
+---
+
+fix(plugin-detail): the record page's inline-edit pencil shows on keyboard focus, not only on hover
+
+Clause-②: no
+Metadata-protocol: none
+
+In read mode, the pencil beside an editable field (in the details body and in the highlights strip) was transparent until the pointer hovered its field. The pencil is a real button, so a keyboard user tabbing through the record landed on a control they could not see, focus ring included. It now also shows while it has keyboard focus, or while anything else in its field does. Hover, the row's hint and double-click to edit are unchanged.
+
+What to do: nothing.
diff --git a/ui/packages/plugin-detail/src/DetailSection.tsx b/ui/packages/plugin-detail/src/DetailSection.tsx
index c250f9bfcac..c17491491fa 100644
--- a/ui/packages/plugin-detail/src/DetailSection.tsx
+++ b/ui/packages/plugin-detail/src/DetailSection.tsx
@@ -747,7 +747,10 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                    // A real Tab stop, so it is revealed on keyboard focus as
+                    // well as on hover — itself, or anything in its field
+                    // (objectstack#25883). The Button's own ring marks it.
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0"
                     aria-label={t('detail.editInlineHint')}
                     onClick={(e) => {
                       e.stopPropagation();
diff --git a/ui/packages/plugin-detail/src/HeaderHighlight.tsx b/ui/packages/plugin-detail/src/HeaderHighlight.tsx
index 095ff254d16..256df4c0625 100644
--- a/ui/packages/plugin-detail/src/HeaderHighlight.tsx
+++ b/ui/packages/plugin-detail/src/HeaderHighlight.tsx
@@ -448,7 +448,9 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-5 w-5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                            // Revealed on keyboard focus too, as in the details
+                            // body (objectstack#25883).
+                            className="h-5 w-5 shrink-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity"
                             aria-label={t('detail.editInlineHint')}
                             onClick={(e) => {
                               e.stopPropagation();

From 55fe5e19864477f6057f078eb046b31235d99c7b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 26 Oct 2026 20:17:27 +0000
Subject: [PATCH 3/4] chore(sdui): re-record the plugin-detail sources digest

`node scripts/gen-sdui-manifest-node.mjs` under the verify lock: the
artefact is unchanged and only plugin-detail's record moved;
`node scripts/check-sdui-manifest.mjs` exits 0.

Claude-Session: https://claude.ai/code/session_01SMps7wq7rBTk53e8KTSEup
Co-authored-by: Claude <noreply@anthropic.com>
---
 scripts/sdui-manifest.sources/plugin-detail.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sdui-manifest.sources/plugin-detail.json b/scripts/sdui-manifest.sources/plugin-detail.json
index 053011d42f8..5c38c5bc313 100644
--- a/scripts/sdui-manifest.sources/plugin-detail.json
+++ b/scripts/sdui-manifest.sources/plugin-detail.json
@@ -1 +1 @@
-{"package":"ui/packages/plugin-detail","sources":54,"sha256":"e22491dc392ede00c47cdea1d193d7c03c9c01751e65ee851adb17f2038b7ad2","manifestSha256":"1f6e1ccb925a678eaa393f9091dfc7d0285e4e3626e0a5c61a5474687debabb7"}
+{"package":"ui/packages/plugin-detail","sources":54,"sha256":"f518cda7c97f7935aae0f7090275c761b5bd123bd49ca67aa5e228a54649bee0","manifestSha256":"1f6e1ccb925a678eaa393f9091dfc7d0285e4e3626e0a5c61a5474687debabb7"}

From f87a96fdfd450590283820d7b9232409c39c42e5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Oct 2026 00:59:23 +0000
Subject: [PATCH 4/4] chore(sdui): re-record the plugin-detail sources digest
 on the merged tree

The merge took main's scripts/sdui-manifest.sources/plugin-detail.json
(main moved it with the activity fold and the related-list actions fix);
`node scripts/gen-sdui-manifest-node.mjs` under the verify lock re-records
it over the merged plugin-detail sources. The artefact is unchanged and
only plugin-detail's record moved; `node scripts/check-sdui-manifest.mjs`
exits 0.

Claude-Session: https://claude.ai/code/session_01SMps7wq7rBTk53e8KTSEup
Co-authored-by: Claude <noreply@anthropic.com>
---
 scripts/sdui-manifest.sources/plugin-detail.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sdui-manifest.sources/plugin-detail.json b/scripts/sdui-manifest.sources/plugin-detail.json
index 8a4ae13d597..bae93ebbc0d 100644
--- a/scripts/sdui-manifest.sources/plugin-detail.json
+++ b/scripts/sdui-manifest.sources/plugin-detail.json
@@ -1 +1 @@
-{"package":"ui/packages/plugin-detail","sources":54,"sha256":"f0ccf59f3607d2208796fa3fbbd3d176b7ad09850cbd1e6feca0cc46eb108895","manifestSha256":"1f6e1ccb925a678eaa393f9091dfc7d0285e4e3626e0a5c61a5474687debabb7"}
+{"package":"ui/packages/plugin-detail","sources":54,"sha256":"3c11cf1d844d26e9da5b18bf3e6bb1cab2d52dc1f5fce9544c94fd35382a1bd9","manifestSha256":"1f6e1ccb925a678eaa393f9091dfc7d0285e4e3626e0a5c61a5474687debabb7"}