From 1eb143fad4e50670c9967fd55fd4c6274fdbe135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 18 Jun 2026 15:15:01 +0200
Subject: [PATCH] fix(a11y): raise sub-44px tap targets to the mobile floor

Bring interactive elements that fell below the 44px iOS/WCAG touch
floor up to min-h-11 on phones (relaxing to the denser sm density on
larger screens), and add visible focus rings where they were missing:

- TimesOfDayChips remove button + API-token copy buttons gain an
  inset hit-area so the visual density stays tight while the tap
  target clears the floor.
- Dose-history row-actions menu trigger and the insights suggested-
  prompt chips raise to min-h-11 sm:min-h-9.
- Sortable table headers and the glucose advanced disclosure toggle
  gain a focus-visible ring and a phone tap floor.
---
 src/components/data-list/sortable-head.tsx           |  2 +-
 .../insights/glucose/glucose-advanced-disclosure.tsx |  2 +-
 src/components/insights/suggested-prompts.tsx        | 12 ++++++------
 src/components/medications/dose-history-ledger.tsx   |  2 +-
 .../medications/scheduling/TimesOfDayChips.tsx       |  2 +-
 .../medications/sections/api-tokens-row.tsx          |  4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/data-list/sortable-head.tsx b/src/components/data-list/sortable-head.tsx
index c02c0ac12..44730b408 100644
--- a/src/components/data-list/sortable-head.tsx
+++ b/src/components/data-list/sortable-head.tsx
@@ -32,7 +32,7 @@ export function SortableHead({
       <button
         type="button"
         onClick={() => onSort(column)}
-        className="hover:text-foreground inline-flex items-center gap-1 transition-colors"
+        className="hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-11 items-center gap-1 rounded-sm transition-colors focus-visible:ring-2 focus-visible:outline-none sm:min-h-0"
       >
         {label}
         {isActive ? (
diff --git a/src/components/insights/glucose/glucose-advanced-disclosure.tsx b/src/components/insights/glucose/glucose-advanced-disclosure.tsx
index 5be77f4ed..66d74d63d 100644
--- a/src/components/insights/glucose/glucose-advanced-disclosure.tsx
+++ b/src/components/insights/glucose/glucose-advanced-disclosure.tsx
@@ -63,7 +63,7 @@ export function GlucoseAdvancedDisclosure({
         aria-expanded={open}
         aria-controls={regionId}
         data-slot="glucose-advanced-toggle"
-        className="text-muted-foreground hover:text-foreground flex min-h-11 w-full items-center justify-between gap-2 text-sm font-medium transition-colors"
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex min-h-11 w-full items-center justify-between gap-2 rounded-sm text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
       >
         <span>{t("insights.bloodGlucose.clinical.advanced.toggle")}</span>
         <ChevronDown
diff --git a/src/components/insights/suggested-prompts.tsx b/src/components/insights/suggested-prompts.tsx
index 5fe2abe2f..85b57b39a 100644
--- a/src/components/insights/suggested-prompts.tsx
+++ b/src/components/insights/suggested-prompts.tsx
@@ -85,14 +85,14 @@ export function SuggestedPrompts({
           type="button"
           onClick={() => onPick(prompt)}
           data-slot="insights-suggested-prompts-chip"
-          // v1.8.5 W4a — denser chips. The tap target stays comfortable
-          // (`min-h-9` ≈ 36 px, the WCAG/iOS floor) but the horizontal
-          // padding + type size drop a notch so the two prompts pack into
-          // fewer rows and the left column stops towering over the
-          // Health-Score card.
+          // v1.8.5 W4a — denser chips. The horizontal padding + type size
+          // drop a notch so the two prompts pack into fewer rows and the
+          // left column stops towering over the Health-Score card. The tap
+          // target clears the 44 px iOS/WCAG floor on phones (`min-h-11`)
+          // and relaxes to the denser 36 px from `sm` up.
           className={cn(
             "border-dracula-purple/18 hover:border-dracula-purple/40 hover:text-foreground",
-            "text-muted-foreground inline-flex min-h-9 items-center gap-1.5",
+            "text-muted-foreground inline-flex min-h-11 items-center gap-1.5 sm:min-h-9",
             "rounded-full border bg-transparent px-3 py-1.5 text-xs",
             "transition-colors focus-visible:ring-2 focus-visible:outline-none",
             "focus-visible:ring-dracula-purple/50",
diff --git a/src/components/medications/dose-history-ledger.tsx b/src/components/medications/dose-history-ledger.tsx
index 875f561c4..e94561ad5 100644
--- a/src/components/medications/dose-history-ledger.tsx
+++ b/src/components/medications/dose-history-ledger.tsx
@@ -669,7 +669,7 @@ function LedgerRowItem({
             <Button
               variant="ghost"
               size="icon-sm"
-              className="min-h-9 min-w-9"
+              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
               aria-label={t("medications.detail.verlauf.rowActionsLabel", {
                 time: timeLabel,
               })}
diff --git a/src/components/medications/scheduling/TimesOfDayChips.tsx b/src/components/medications/scheduling/TimesOfDayChips.tsx
index a81b60371..3ae3b7f22 100644
--- a/src/components/medications/scheduling/TimesOfDayChips.tsx
+++ b/src/components/medications/scheduling/TimesOfDayChips.tsx
@@ -238,7 +238,7 @@ export function TimesOfDayChips({
                 disabled={disabled}
                 aria-label={`${t(`${i18nPrefix}.remove`)} ${time}`}
                 onClick={() => onRemove(time)}
-                className="focus-visible:ring-ring hover:bg-background inline-flex h-7 w-7 items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                className="focus-visible:ring-ring hover:bg-background relative inline-flex h-7 w-7 items-center justify-center rounded-sm before:absolute before:inset-[-8px] before:content-[''] focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
                 data-slot="times-of-day-chip-remove"
               >
                 <X className="h-3.5 w-3.5" aria-hidden="true" />
diff --git a/src/components/medications/sections/api-tokens-row.tsx b/src/components/medications/sections/api-tokens-row.tsx
index 6d7b5f8e2..d2815bcc4 100644
--- a/src/components/medications/sections/api-tokens-row.tsx
+++ b/src/components/medications/sections/api-tokens-row.tsx
@@ -223,7 +223,7 @@ export function ApiTokensRow({
           onClick={() =>
             void copy(endpoint, t("medications.detail.api.urlCopied"))
           }
-          className="h-7 w-7 shrink-0"
+          className="relative h-7 w-7 shrink-0 before:absolute before:inset-[-8px] before:content-['']"
           aria-label={t("medications.detail.api.copyUrl")}
           data-slot="api-tokens-copy-url"
         >
@@ -328,7 +328,7 @@ export function ApiTokensRow({
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute top-1 right-1 h-7 w-7"
+                className="absolute top-1 right-1 h-7 w-7 before:absolute before:inset-[-8px] before:content-['']"
                 onClick={() =>
                   void copy(selectedExample.value, t("common.copied"))
                 }