mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
fix(ui): tap-targets reach 44px on tour, notification, backups buttons (v1.4.15 H4)
WCAG 2.5.5 Level AAA target-size floor for non-essential controls is 24×24 px and Level AA pointer-target is 24×24 with 24 px gap, but the mobile-app convention everyone follows is the 44×44 hit-area Apple HIG / Material recommend. The default `<Button size="sm">` in the shadcn-base lands at `h-8` (32 px) — readable on desktop, tight on phones, especially in the most-touched admin/settings/onboarding surfaces called out in the v1.4.15 design review. Cross-cutting `button.tsx` `h-9 → h-11` was rejected as too risky mid-marathon (every UI affected, dozens of layout assumptions). The targeted alternative bumps the listed call-sites with `min-h-11` overrides: tour Skip / Back / Next, notification re-enable + send- test, backups Restore / Download / Run-now / Upload. Admin-only recent-audit-preview is a `<Link>` not a `<Button>` and is left alone. The shadcn `min-h-` Tailwind utility wins over the variant `h-` because both apply but `min-h-` only floors. So desktop visuals stay within ~4 px of the previous render while mobile reaches the 44 px floor.
This commit is contained in:
1 parent
ae13dc0fb2
commit
b863e2cc3d
3 files changed
+20
-1
No files matched your search
@@ -87,6 +87,7 @@ function RestoreRowDialog({
|
||||
aria-label={t("admin.section.backups.restoreAria", {
|
||||
username: row.username,
|
||||
})}
|
||||
className="min-h-11"
|
||||
>
|
||||
{pending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -343,6 +344,7 @@ export function BackupsSection() {
|
||||
size="sm"
|
||||
disabled={runBackup.isPending}
|
||||
onClick={() => runBackup.mutate()}
|
||||
className="min-h-11"
|
||||
>
|
||||
{runBackup.isPending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -398,6 +400,7 @@ export function BackupsSection() {
|
||||
variant="outline"
|
||||
disabled={upload.isPending}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="min-h-11"
|
||||
>
|
||||
{upload.isPending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -438,6 +441,7 @@ export function BackupsSection() {
|
||||
size="sm"
|
||||
disabled={runBackup.isPending}
|
||||
onClick={() => runBackup.mutate()}
|
||||
className="min-h-11"
|
||||
>
|
||||
{runBackup.isPending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -496,6 +500,7 @@ export function BackupsSection() {
|
||||
aria-label={t("admin.section.backups.downloadAria", {
|
||||
username: row.username,
|
||||
})}
|
||||
className="min-h-11"
|
||||
>
|
||||
{downloadingId === row.id ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
|
||||
@@ -417,13 +417,19 @@ export function OnboardingTour({
|
||||
{t(stop.bodyKey)}
|
||||
</p>
|
||||
|
||||
{/* v1.4.15 H4 design: tour footer buttons reach the WCAG 2.5.5
|
||||
44 px tap-target floor on mobile. The `size="sm"` default
|
||||
of `h-8` clipped to ~32 px which Marc reported as too small
|
||||
on the iPad / iPhone PWA shell. Bumping to `min-h-11` (44 px)
|
||||
keeps the desktop visual close enough — the buttons grow
|
||||
~4 px taller — while making mobile usable. */}
|
||||
<footer className="mt-5 flex items-center justify-between gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleSkip}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
className="text-muted-foreground hover:text-foreground min-h-11"
|
||||
>
|
||||
{t("onboarding.tour.skip")}
|
||||
</Button>
|
||||
@@ -434,6 +440,7 @@ export function OnboardingTour({
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handlePrev}
|
||||
className="min-h-11"
|
||||
>
|
||||
{t("onboarding.tour.back")}
|
||||
</Button>
|
||||
@@ -444,6 +451,7 @@ export function OnboardingTour({
|
||||
size="sm"
|
||||
onClick={handleNext}
|
||||
data-testid="onboarding-tour-primary"
|
||||
className="min-h-11"
|
||||
>
|
||||
{isLast ? t("onboarding.tour.done") : t("onboarding.tour.next")}
|
||||
</Button>
|
||||
|
||||
@@ -256,6 +256,10 @@ function ChannelRow({
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* v1.4.15 H4 design: action buttons hit the WCAG 2.5.5 44 px
|
||||
floor on mobile via `min-h-11`. Settings is the most-touched
|
||||
mobile surface; `size="sm"` here clips to ~32 px which Marc
|
||||
flagged as too small on the iPad/iPhone PWA shell. */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{channel.state === "auto_disabled" && (
|
||||
<Button
|
||||
@@ -265,6 +269,7 @@ function ChannelRow({
|
||||
onClick={onReEnable}
|
||||
disabled={reEnablePending}
|
||||
data-testid={`re-enable-${channel.type}`}
|
||||
className="min-h-11"
|
||||
>
|
||||
{reEnablePending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -281,6 +286,7 @@ function ChannelRow({
|
||||
onClick={onTest}
|
||||
disabled={testPending || channel.state === "auto_disabled"}
|
||||
data-testid={`send-test-${channel.type}`}
|
||||
className="min-h-11"
|
||||
>
|
||||
{testPending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
|
||||
Reference in new issue
Block a user