forms: expand disclosure content into continuous answer (avoid duplicated preview)

docs/design-system/adoption-manifest.json

@@ -531,7 +531,11 @@
         "preview": ".design-sync/previews/Disclosure.tsx",
         "previewValid": true
       },
-      "testFiles": ["tests/design-sync-visual-exports.test.ts", "tests/ui-v2-components.dom.test.tsx"],
+      "testFiles": [
+        "tests/design-sync-visual-exports.test.ts",
+        "tests/ui-forms-section-nav.spec.ts",
+        "tests/ui-v2-components.dom.test.tsx"
+      ],
       "baseline": {
         "targetLayer": "v2",
         "liveLayer": "v2",
@@ -559,7 +563,11 @@
         "preview": ".design-sync/previews/DisclosureGroup.tsx",
         "previewValid": true
       },
-      "testFiles": ["tests/design-sync-visual-exports.test.ts"],
+      "testFiles": [
+        "tests/design-sync-visual-exports.test.ts",
+        "tests/forms-information-disclosure.dom.test.tsx",
+        "tests/ui-forms-section-nav.spec.ts"
+      ],
       "baseline": {
         "targetLayer": "v2",
         "liveLayer": "v2",

src/components/forms/form-detail-page.tsx

@@ -844,6 +844,10 @@ function formInformationItems(rows: Array<{ label: string; value?: string | null
         </span>
       ),
       description: value,
+      // The collapsed line is a preview of this same value. Opening the row
+      // replaces that preview with the fully wrapped answer instead of echoing
+      // it in a visually separate, bordered panel.
+      extendDescription: true,
       content: <p className={cn("text-sm leading-6", textMuted)}>{value}</p>,
     };
   });

src/components/ui/disclosure.tsx

@@ -10,6 +10,8 @@ export type DisclosureProps = {
   /** Right-aligned summary that stays visible while collapsed — a count, a status. */
   meta?: ReactNode;
   description?: ReactNode;
+  /** Replace the collapsed preview with the panel when open, so the copy reads as one continuous answer. */
+  extendDescription?: boolean;
   defaultOpen?: boolean;
   /** Controlled mode. Omit both to let the component own its state. */
   open?: boolean;
@@ -25,19 +27,18 @@ export type DisclosureProps = {
  * `aria-controls`. `aria-expanded` alone says something opened but never what —
  * that exact gap was the `AccessibleTable` expander defect.
  *
- * The panel is kept in the DOM and hidden with `hidden` rather than unmounted, so
- * the content is there to be revealed rather than re-fetched. On screen, `hidden`
- * is `display:none`, so a collapsed panel is genuinely out of the accessibility
- * tree and out of Ctrl-F — that is correct for a control the reader can open, and
- * the docstring here used to claim otherwise.
+ * The panel stays mounted and uses the author-level `hidden` utility while
+ * collapsed rather than the HTML `hidden` attribute. On screen the utility is
+ * `display:none`, so a collapsed panel is genuinely out of the accessibility
+ * tree and out of Ctrl-F — that is correct for a control the reader can open.
  *
  * Print is the case where it is NOT correct. A printed page has no disclosure to
  * open, so a collapsed section prints as if the guideline never mentioned it —
  * exactly the failure this component is supposed to prevent, made permanent on
  * paper and unnoticeable, because the reader holding the printout has no way to
- * tell a section was omitted. `print:block` on the panel (author styles beat the
- * UA `[hidden]` rule) expands every collapsed section for print; the chevron is
- * dropped, since a rotated arrow means nothing on paper.
+ * tell a section was omitted. `print:block` overrides the author-level collapse
+ * utility and expands every collapsed section for print; the
+ * chevron is dropped, since a rotated arrow means nothing on paper.
  *
  * No height animation. Animating `height` or `grid-template-rows` forces layout
  * every frame and is a measurable CLS contributor; the chevron rotates on
@@ -48,6 +49,7 @@ export function Disclosure({
   children,
   meta,
   description,
+  extendDescription = false,
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
@@ -101,10 +103,14 @@ export function Disclosure({
                 trigger stays label-sized. Full copy lives in the panel for SR
                 once expanded. Wrap from sm+ so desktop scanners are not forced
                 through a tap the way phone truncation requires. */}
-            {description ? (
+            {description && !(extendDescription && open) ? (
               <span
                 aria-hidden="true"
-                className={cn("block truncate text-xs sm:whitespace-normal sm:leading-5", textMuted)}
+                className={cn(
+                  "block truncate text-xs sm:whitespace-normal sm:leading-5",
+                  extendDescription && "print:hidden",
+                  textMuted,
+                )}
               >
                 {description}
               </span>
@@ -117,9 +123,12 @@ export function Disclosure({
         id={panelId}
         role="region"
         aria-labelledby={`${id}-trigger`}
-        hidden={!open}
         data-open={open ? "true" : "false"}
-        className="border-t border-[color:var(--border)] px-3 py-3 print:block"
+        className={cn(
+          "px-3 py-3 print:block",
+          !open && "hidden",
+          extendDescription ? "pt-0" : "border-t border-[color:var(--border)]",
+        )}
       >
         {children}
       </div>
@@ -128,7 +137,14 @@ export function Disclosure({
 }
 
 export type DisclosureGroupProps = {
-  items: Array<{ id: string; title: ReactNode; description?: ReactNode; meta?: ReactNode; content: ReactNode }>;
+  items: Array<{
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    extendDescription?: boolean;
+    meta?: ReactNode;
+    content: ReactNode;
+  }>;
   exclusive?: boolean;
   className?: string;
   headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -149,6 +165,7 @@ export function DisclosureGroup({ items, exclusive = false, className, headingLe
           key={item.id}
           title={item.title}
           description={item.description}
+          extendDescription={item.extendDescription}
           meta={item.meta}
           headingLevel={headingLevel}
           open={openIds.includes(item.id)}

tests/forms-information-disclosure.dom.test.tsx

@@ -17,6 +17,7 @@ vi.mock("@/components/account-data-provider", () => ({
   }),
 }));
 
+// Adoption evidence: these form assertions exercise DisclosureGroup.items[].extendDescription.
 describe("Form information disclosures", () => {
   it("expands a tick row to reveal the full information content", async () => {
     const user = userEvent.setup();
@@ -42,12 +43,15 @@ describe("Form information disclosures", () => {
     const panel = document.getElementById(panelId);
     expect(panel).toBeTruthy();
     if (!panel) return;
-    expect(panel).toHaveAttribute("hidden");
+    expect(panel).not.toHaveAttribute("hidden");
+    expect(panel).toHaveClass("hidden", "print:block");
 
     await user.click(trigger);
 
     expect(trigger).toHaveAttribute("aria-expanded", "true");
-    expect(panel).not.toHaveAttribute("hidden");
+    expect(within(trigger).queryByText(fullText)).not.toBeInTheDocument();
+    expect(panel).not.toHaveClass("hidden");
+    expect(panel).not.toHaveClass("border-t");
     expect(within(panel).getByText(fullText)).toBeVisible();
   });
 
@@ -82,7 +86,7 @@ describe("Form information disclosures", () => {
     const firstPanel = document.getElementById(panelIds[0]!);
     expect(firstPanel).toBeTruthy();
     if (!firstPanel) return;
-    expect(firstPanel).not.toHaveAttribute("hidden");
+    expect(firstPanel).not.toHaveClass("hidden");
     expect(within(firstPanel).getByText("First clinical detail")).toBeVisible();
 
     await user.click(triggers[1]);

tests/ui-forms-section-nav.spec.ts

@@ -24,7 +24,64 @@ import { visibleByTestId } from "./playwright-settlement";
  */
 const FORM_ROUTE = "/forms/transport-crisis-form";
 
+// Adoption evidence: these browser regressions exercise DisclosureGroup.items[].extendDescription.
 test.describe("Forms section navigation", () => {
+  test("expands information previews into one continuous answer", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
+
+    const section = page.getByRole("region", { name: "Form information" });
+    const trigger = section.getByRole("button", { name: "Does not authorise" });
+    const preview = "Psychiatric treatment or detention beyond the linked authority.";
+
+    await expect(trigger.getByText(preview)).toBeVisible({ timeout: 20_000 });
+    await trigger.click();
+
+    const panel = page.locator(`#${await trigger.getAttribute("aria-controls")}`);
+    await expect(trigger.getByText(preview)).toHaveCount(0);
+    await expect(panel.getByText(preview)).toBeVisible();
+    await expect(panel).not.toHaveClass(/border-t/);
+  });
+
+  test("prints extended information once while collapsed", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
+
+    const section = page.getByRole("region", { name: "Form information" });
+    const trigger = section.getByRole("button", { name: "Does not authorise" });
+    const preview = "Psychiatric treatment or detention beyond the linked authority.";
+
+    await expect(trigger).toBeVisible({ timeout: 20_000 });
+    const panelId = await trigger.getAttribute("aria-controls");
+    if (!panelId) throw new Error("Disclosure trigger is missing aria-controls");
+
+    const panel = page.locator(`#${panelId}`);
+    const disclosure = panel.locator("xpath=..");
+    const triggerPreview = disclosure.locator('button span[aria-hidden="true"]').filter({ hasText: preview });
+
+    await expect(triggerPreview).toHaveCount(1);
+    await expect(triggerPreview).toBeVisible();
+    await expect(panel).toBeHidden();
+
+    await page.emulateMedia({ media: "print" });
+
+    await expect(triggerPreview).toBeHidden();
+    await expect(panel.getByText(preview, { exact: true })).toBeVisible();
+    await expect
+      .poll(
+        () =>
+          disclosure.getByText(preview, { exact: true }).evaluateAll(
+            (elements) =>
+              elements.filter((element) => {
+                const style = getComputedStyle(element);
+                return style.display !== "none" && style.visibility !== "hidden" && element.getClientRects().length > 0;
+              }).length,
+          ),
+        { message: "extended description should print exactly once" },
+      )
+      .toBe(1);
+  });
+
   test("opens a section sheet listing the anchors the form record actually paints", async ({ page }) => {
     await page.setViewportSize({ width: 1280, height: 900 });
     await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });

tests/ui-v2-components.dom.test.tsx

@@ -1251,11 +1251,11 @@ describe("Disclosure — print", () => {
     );
 
     const panel = screen.getByTestId("disclosure").querySelector('[role="region"]');
-    expect(panel).toHaveAttribute("hidden");
+    expect(panel).not.toHaveAttribute("hidden");
     expect(panel).toHaveAttribute("data-open", "false");
     // On paper there is no control to open, so a collapsed section would print
     // as though the guideline never mentioned it — undetectably.
-    expect(panel?.className).toContain("print:block");
+    expect(panel).toHaveClass("hidden", "print:block");
   });
 
   it("keeps an open panel visible and still print-expanded", () => {
@@ -1267,6 +1267,8 @@ describe("Disclosure — print", () => {
 
     const panel = screen.getByRole("region");
     expect(panel).not.toHaveAttribute("hidden");
+    expect(panel).not.toHaveClass("hidden");
+    expect(panel).toHaveClass("print:block");
     expect(panel).toHaveAttribute("data-open", "true");
   });
 });