From af3f0f9a51ac60286a3c30cbdacd22189b6e5ba7 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 17:15:14 +0800
Subject: [PATCH] fix(a11y): bump shellChip tap target to 44px (min-h-10 ->
 min-h-11)

shellChip renders the 'All documents' filter <button> in master-search-header; at min-h-10 (40px) it was below the WCAG 2.5.5 tap-target minimum. Bump to min-h-11 (44px) in the recipe so every call site benefits. Output-identical apart from the 4px min-height. Updates docs/redesign/09-ui-primitives-recipes.md (gap 4 closed).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/redesign/09-ui-primitives-recipes.md | 13 ++++++++-----
 src/components/ui-primitives.tsx          |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/redesign/09-ui-primitives-recipes.md b/docs/redesign/09-ui-primitives-recipes.md
index c90e144510..9541b122ae 100644
--- a/docs/redesign/09-ui-primitives-recipes.md
+++ b/docs/redesign/09-ui-primitives-recipes.md
@@ -54,7 +54,7 @@ Values are tokens; the target sizes follow the `-11`/`-12` spacing scale (L6).
 | `chatSendButton`         | Composer send (accent)                | `h-11 w-11`         | ✅                | ❌     | ✅                        | ✅       |
 | `sidebarItem`            | Sidebar nav row                       | `min-h-11`          | ✅                | ❌     | ✅                        | ❌       |
 | `sidebarToolTile`        | Sidebar tool tile                     | `min-h-[64px]`      | ✅                | ❌     | ✅                        | ❌       |
-| `shellChip`              | Filter / mode chip                    | `min-h-10` ⚠️       | ✅                | ❌     | ❌                        | ❌       |
+| `shellChip`              | Filter / mode chip                    | `min-h-11`          | ✅                | ❌     | ❌                        | ❌       |
 
 ### Form fields
 
@@ -132,11 +132,14 @@ focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]` block
 3. **`disabled:` unhandled** on `navPill`, `chatMicroAction`,
    `chatComposerIconButton`, `sidebarItem` — a disabled state renders identically
    to enabled.
-4. **`shellChip` is `min-h-10` (40px)** — below the 44px WCAG tap minimum used
-   everywhere else. Promote to `min-h-11` if it's a real tap target.
+4. ✅ **FIXED (2026-07-03).** `shellChip` bumped `min-h-10` → `min-h-11` (40→44px) to
+   meet the WCAG tap minimum — it's used on a real `<button>` filter ("All documents"
+   in `master-search-header.tsx`).
 5. **Input focus uses `focus:` not `focus-visible:`** (`fieldControl`,
    `commandInput`) — intentional for text fields (focus ring should show on
    pointer focus too), but noted so it isn't "corrected" to `focus-visible:`.
 
-Gap 1 (the highest-value one) is now closed. Gaps 2–5 remain — all low-risk
-polish; gap 4 (`shellChip` tap size) is the next most worth doing.
+Gaps 1 and 4 (the a11y-relevant ones) are closed. Gaps 2, 3, 5 are intentionally
+left: gap 2 (`active:` press feedback) is an aesthetic/design-team call; gap 3's
+recipes (`navPill`, `chatMicroAction`, `sidebarItem`) are never rendered disabled, so
+adding `disabled:` there would be dead styling; gap 5 (inputs use `focus:`) is deliberate.
diff --git a/src/components/ui-primitives.tsx b/src/components/ui-primitives.tsx
index 9bae713536..51e5bea4c3 100644
--- a/src/components/ui-primitives.tsx
+++ b/src/components/ui-primitives.tsx
@@ -42,7 +42,7 @@ export const fieldControlPlain = `${fieldControl} px-3`;
 export const fieldIcon =
   "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[color:var(--text-soft)]";
 export const shellChip =
-  "inline-flex min-h-10 items-center gap-2 rounded-lg border px-3 text-xs font-semibold shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)]";
+  "inline-flex min-h-11 items-center gap-2 rounded-lg border px-3 text-xs font-semibold shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)]";
 export const navPill =
   "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
 export const metadataPill =