From 0e657a5c3eca9cf4741fb10936253ff8d87e4862 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 08:18:35 +0000
Subject: [PATCH 1/2] Fix frontend a11y/layout audit findings: toggle-group +
 duplicate padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two P2 findings from the repo audit (self-contained frontend):

- differentials-home: the result-type filters used role="tab"/role="tablist"
  + aria-selected but had no tabpanel, aria-controls, or roving tabindex — an
  incomplete/mismatched ARIA-tabs pattern. They filter a single results list
  (they don't switch between panels), so convert them to a single-select toggle
  group (role="group" + aria-pressed), matching the repo's existing toggle-group
  convention. No test asserted the old roles.

- global-search-shell: the reserves-floating-composer (non-answer, non-compact)
  branch set both sm:pb-[calc(9rem+safe-area)] AND sm:pb-8 in one className, so
  the effective bottom padding depended on Tailwind class ordering. That branch
  reserves space for the full floating composer, so keep the calc reserve
  (matching the answer branch) and drop the erroneous sm:pb-8.

Verified offline: prettier + lint clean, typecheck clean on both files, 53
differentials unit tests pass. Browser a11y/layout is exercised by the CI
ui-accessibility / ui-critical / ui-regression gates (ui_changed).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019UQUcNriJUVSGRhWz794RQ
---
 src/components/clinical-dashboard/differentials-home.tsx  | 8 +++++---
 src/components/clinical-dashboard/global-search-shell.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/clinical-dashboard/differentials-home.tsx b/src/components/clinical-dashboard/differentials-home.tsx
index 3b888af2a..8c1a6e43d 100644
--- a/src/components/clinical-dashboard/differentials-home.tsx
+++ b/src/components/clinical-dashboard/differentials-home.tsx
@@ -276,10 +276,13 @@ function ResultTypeTabs({
     { id: "diagnosis" as const, label: "Diagnoses", count: diagnosisCount },
   ];
 
+  // Single-select filters over one results list — modeled as a toggle group
+  // (role="group" + aria-pressed), not ARIA tabs (which would need tabpanels,
+  // aria-controls, and roving tabindex for content that does not exist here).
   return (
     <div
       data-testid="differential-result-type-tabs"
-      role="tablist"
+      role="group"
       aria-label="Result type"
       className="polished-scroll flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] p-1 shadow-[var(--shadow-inset)]"
     >
@@ -289,8 +292,7 @@ function ResultTypeTabs({
           <button
             key={tab.id}
             type="button"
-            role="tab"
-            aria-selected={active}
+            aria-pressed={active}
             aria-label={`${tab.label} (${tab.count})`}
             onClick={() => onFilterChange(tab.id)}
             className={cn(
diff --git a/src/components/clinical-dashboard/global-search-shell.tsx b/src/components/clinical-dashboard/global-search-shell.tsx
index a13d9efda..a3397ec2c 100644
--- a/src/components/clinical-dashboard/global-search-shell.tsx
+++ b/src/components/clinical-dashboard/global-search-shell.tsx
@@ -593,7 +593,7 @@ function GlobalStandaloneSearchShellClient({
                 ? "max-sm:pb-[var(--mobile-composer-reserve)] sm:pb-[calc(9rem+env(safe-area-inset-bottom))]"
                 : useCompactBottomSearch
                   ? "max-sm:pb-[var(--mobile-composer-reserve)] sm:pb-8"
-                  : "max-sm:pb-[var(--mobile-composer-reserve)] sm:pb-[calc(9rem+env(safe-area-inset-bottom))] sm:pb-8",
+                  : "max-sm:pb-[var(--mobile-composer-reserve)] sm:pb-[calc(9rem+env(safe-area-inset-bottom))]",
           )}
         >
           <div className="max-sm:flex max-sm:min-h-0 max-sm:flex-1 max-sm:flex-col">

From 8fcdb6be06fbe9bb2ba65220e2b0439fdb9870f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 08:34:06 +0000
Subject: [PATCH 2/2] Update differentials filter tests for the toggle-group
 conversion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The result-type filters became a toggle group (role="group" + aria-pressed
buttons) instead of an ARIA tablist, so the ui-tools regression assertions that
located them via getByRole("tab") found nothing. Query them as buttons — their
aria-label ("All (N)" etc.) is unchanged, so the name matchers still hold. The
genuine "Overview" tab locator (page.getByRole) is untouched.

Fixes the UI regression failures at tests/ui-tools.spec.ts:1193 and :1274. The
separate ui-smoke phone-header-collapse failure is unrelated: this PR's padding
change is sm:+ only and cannot affect phone (max-sm) behavior.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019UQUcNriJUVSGRhWz794RQ
---
 tests/ui-tools.spec.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index ef26aea94..055725179 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -1245,11 +1245,11 @@ test.describe("Clinical KB tools launcher", () => {
     await expect(page.getByTestId("differentials-search-results")).toBeVisible();
     const tabs = page.getByTestId("differential-result-type-tabs");
     await expect(tabs).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: /All \(\d+\)/ })).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: /Presentations \(\d+\)/ })).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: /Diagnoses \(\d+\)/ })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: /All \(\d+\)/ })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: /Presentations \(\d+\)/ })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: /Diagnoses \(\d+\)/ })).toBeVisible();
 
-    const tabMetrics = await tabs.getByRole("tab").evaluateAll((buttons) =>
+    const tabMetrics = await tabs.getByRole("button").evaluateAll((buttons) =>
       buttons.map((button) => {
         const rect = button.getBoundingClientRect();
         return { height: rect.height, scrollHeight: button.scrollHeight };
@@ -1341,11 +1341,11 @@ test.describe("Clinical KB tools launcher", () => {
     await expect(page.getByTestId("differentials-search-results")).toBeVisible();
     const tabs = page.getByTestId("differential-result-type-tabs");
     await expect(tabs).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: "All (8)" })).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: "Presentations (1)" })).toBeVisible();
-    await expect(tabs.getByRole("tab", { name: "Diagnoses (7)" })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: "All (8)" })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: "Presentations (1)" })).toBeVisible();
+    await expect(tabs.getByRole("button", { name: "Diagnoses (7)" })).toBeVisible();
 
-    const tabMetrics = await tabs.getByRole("tab").evaluateAll((tabElements) =>
+    const tabMetrics = await tabs.getByRole("button").evaluateAll((tabElements) =>
       tabElements.map((tab) => {
         const rect = tab.getBoundingClientRect();
         return { height: rect.height, scrollHeight: tab.scrollHeight };