a11y: lift the shared Coach icon and info-hint to the 44px touch floor

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.
This commit is contained in:
Marc-André Bombeck committed 2026-06-28 18:29:33 +02:00
1 parent dd6b0867a4
commit 8e238d1834
2 files changed
+10 -2

No files matched your search

+5 -1
View File
@@ -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,
)}
>
+5 -1
View File
@@ -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,
)}
>