mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 13:22:14 +00:00
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:
1 parent
dd6b0867a4
commit
8e238d1834
2 files changed
+10
-2
No files matched your search
@@ -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,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user