From cc492fdeb5956c8bf9d80621f07e346e63f6ef9a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 18:43:41 +0000
Subject: [PATCH 1/2] fix(forms): stop long pathway step codes overflowing the
 decision context

The before/parallel/after lists in the decision-context card render the
step code in a fixed-width column. `pathwayItems` keeps the raw string as
the code when it looks like a form code, which includes qualified codes
like "6B attachment" (e.g. form 6B's parallel step), so the code cell
overflowed into the title.

Render only the split head ("6B") in that compact cell via a new
PathwayStepCode helper (reusing the shared splitFormCode) with truncation
and a full-code tooltip; the adjacent title column already carries the
full label, so nothing is lost.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YJY1EzEXiBayz13Q6p2GwL
---
 src/components/forms/form-detail-page.tsx | 24 +++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/forms/form-detail-page.tsx b/src/components/forms/form-detail-page.tsx
index a5b092ea..2c31c328 100644
--- a/src/components/forms/form-detail-page.tsx
+++ b/src/components/forms/form-detail-page.tsx
@@ -43,7 +43,7 @@ import {
   toneSuccess,
   toneWarning,
 } from "@/components/ui-primitives";
-import { FormCodeBadge } from "@/components/forms/form-code-badge";
+import { FormCodeBadge, splitFormCode } from "@/components/forms/form-code-badge";
 import { appModeHomeHref } from "@/lib/app-modes";
 import { formCatalogDetails, type FormRecord } from "@/lib/form-ranker";
 import type { ServiceChipTone, ServiceContact, ServiceCriterion, ServiceSummaryCard } from "@/lib/service-ranker";
@@ -203,6 +203,22 @@ function DetailCard({ card }: { card: ServiceSummaryCard }) {
   );
 }
 
+// Compact code cell for the pathway before/parallel/after lists. The full label
+// is shown in the adjacent title column, so the code cell only needs the short
+// head ("6B") — this keeps a qualifier like "6B attachment" from overflowing the
+// fixed-width column while the full string stays available as a tooltip.
+function PathwayStepCode({ code }: { code: string }) {
+  const { head, qualifier } = splitFormCode(code);
+  return (
+    <span
+      className={cn("truncate text-sm font-bold text-[color:var(--text-heading)]", codeText)}
+      title={qualifier ? `${head} ${qualifier}` : undefined}
+    >
+      {head}
+    </span>
+  );
+}
+
 function PathwayContextCard({
   form,
   code,
@@ -253,7 +269,7 @@ function PathwayContextCard({
                 key={`${item.code}-${item.title}`}
                 className="grid grid-cols-[3.25rem_minmax(0,1fr)] gap-2 border-b border-[color:var(--border)] p-2.5 last:border-b-0"
               >
-                <span className={cn("text-sm font-bold text-[color:var(--text-heading)]", codeText)}>{item.code}</span>
+                <PathwayStepCode code={item.code} />
                 <p className={cn("text-xs font-medium leading-5", textMuted)}>{item.title}</p>
               </div>
             ))}
@@ -280,7 +296,7 @@ function PathwayContextCard({
                 key={`${item.code}-${item.title}`}
                 className="grid grid-cols-[2.75rem_minmax(0,1fr)] gap-2 border-b border-[color:var(--border)] p-2.5 last:border-b-0"
               >
-                <span className={cn("text-sm font-bold text-[color:var(--text-heading)]", codeText)}>{item.code}</span>
+                <PathwayStepCode code={item.code} />
                 <p className={cn("text-xs font-medium leading-5", textMuted)}>{item.title}</p>
               </div>
             ))}
@@ -295,7 +311,7 @@ function PathwayContextCard({
                 key={`${item.code}-${item.title}`}
                 className="grid grid-cols-[2.75rem_minmax(0,1fr)] gap-2 border-b border-[color:var(--border)] p-2.5 last:border-b-0"
               >
-                <span className={cn("text-sm font-bold text-[color:var(--text-heading)]", codeText)}>{item.code}</span>
+                <PathwayStepCode code={item.code} />
                 <p className={cn("text-xs font-medium leading-5", textMuted)}>{item.title}</p>
               </div>
             ))}

From 2bae0ea4a5ec18aa61dd723beb4adfb7fe3bd89a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 21:47:43 +0000
Subject: [PATCH 2/2] a11y(forms): expose full pathway step code to assistive
 tech

PathwayStepCode showed only the split head ("6B") visually, leaving the
full code reachable only via the title tooltip, which assistive tech does
not reliably announce. Add an sr-only full-code label and mark the
decorative head aria-hidden, matching FormCodeBadge's pattern, so screen
readers get "6B attachment" while the compact visual is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YJY1EzEXiBayz13Q6p2GwL
---
 src/components/forms/form-detail-page.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/forms/form-detail-page.tsx b/src/components/forms/form-detail-page.tsx
index f71823a5..e2f32132 100644
--- a/src/components/forms/form-detail-page.tsx
+++ b/src/components/forms/form-detail-page.tsx
@@ -202,18 +202,21 @@ function DetailCard({ card }: { card: ServiceSummaryCard }) {
   );
 }
 
-// Compact code cell for the pathway before/parallel/after lists. The full label
-// is shown in the adjacent title column, so the code cell only needs the short
-// head ("6B") — this keeps a qualifier like "6B attachment" from overflowing the
-// fixed-width column while the full string stays available as a tooltip.
+// Compact code cell for the pathway before/parallel/after lists. Visually it
+// shows only the short head ("6B") so a qualifier like "6B attachment" can't
+// overflow the fixed-width column, but the full code is exposed to assistive
+// tech via an sr-only label (the decorative head is aria-hidden) and to sighted
+// users via a tooltip — matching FormCodeBadge's pattern.
 function PathwayStepCode({ code }: { code: string }) {
   const { head, qualifier } = splitFormCode(code);
+  const fullCode = qualifier ? `${head} ${qualifier}` : head;
   return (
     <span
       className={cn("truncate text-sm font-bold text-[color:var(--text-heading)]", codeText)}
-      title={qualifier ? `${head} ${qualifier}` : undefined}
+      title={qualifier ? fullCode : undefined}
     >
-      {head}
+      <span className="sr-only">{fullCode}</span>
+      <span aria-hidden>{head}</span>
     </span>
   );
 }