From 8e238d183431138aa36dd5bfe172e761343d664f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 28 Jun 2026 18:29:33 +0200 Subject: [PATCH] a11y: lift the shared Coach icon and info-hint to the 44px touch floor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The top-right Coach hand-off icon button and the info-hint trigger sat below the WCAG 2.5.5 44px minimum on touch. Grow both hit boxes to 44px on touch while keeping the visible footprint unchanged — the Coach button is a fill-less ghost, and the info-hint offsets its padding with an equal negative margin so inline layout is untouched. --- src/components/insights/ask-coach-action.tsx | 6 +++++- src/components/ui/info-hint.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/insights/ask-coach-action.tsx b/src/components/insights/ask-coach-action.tsx index 08aa56d33..c0e038126 100644 --- a/src/components/insights/ask-coach-action.tsx +++ b/src/components/insights/ask-coach-action.tsx @@ -146,7 +146,11 @@ export function AskCoachIconButton({ aria-label={accessibleLabel} onClick={() => launch.askCoach(question, scope, autoSend)} className={cn( - "text-muted-foreground hover:text-foreground size-8", + // Keep the quiet 32px visual on pointer surfaces, but grow the + // tap target to the WCAG 2.5.5 44px floor on touch (the ghost has + // no fill, so the larger hit box is invisible). Matches the + // header-action convention on the biomarker detail page. + "text-muted-foreground hover:text-foreground min-h-11 min-w-11 sm:size-8", className, )} > diff --git a/src/components/ui/info-hint.tsx b/src/components/ui/info-hint.tsx index 671b09cec..d3caa2de9 100644 --- a/src/components/ui/info-hint.tsx +++ b/src/components/ui/info-hint.tsx @@ -36,7 +36,11 @@ export function InfoHint({ data-slot="info-hint" aria-label={t("common.moreInfo")} className={cn( - "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -m-1 inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-full p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none", + // A 44px (WCAG 2.5.5) tap target whose visible footprint stays at + // the 24px the icon needs: the 44px box is offset by an equal + // negative margin (`p-2.5` + `-m-2.5`), so surrounding inline + // layout is unchanged while the touchable area meets the floor. + "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -m-2.5 inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full p-2.5 transition-colors focus-visible:ring-2 focus-visible:outline-none", className, )} >