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:
Marc-André Bombeck committed 2026-05-10 00:29:44 +02:00
1 parent ae13dc0fb2
commit b863e2cc3d
3 files changed
+20 -1

No files matched your search

+5
View File
@@ -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" />
+9 -1
View File
@@ -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" />