Touch-target pass: 44px min on default-size buttons (WCAG 2.5.5)

Applies .mobile-touch-target to 32 default-size <Button> elements (32px
tall, below the mobile minimum) across 9 files for strict WCAG 2.5.5
compliance: Save, Cancel, Delete, Validate SSH, Run job, Build index,
Update connection, Add service, etc. Plus the shared DialogFooter Cancel
+ Confirm buttons (used by every ConfirmDialog).

The class applies min-height/min-width: 44px only below md
(max-width: 767px); no-op at md+, so desktop sizing is unchanged.

Completes the touch-target audit started in Slice 9 (which covered icon
buttons, size=sm buttons, checkboxes, switches). 122 tests pass; lint/
build green. No new tests (@media queries aren't honored by jsdom).

Refs openspec/changes/mobile-responsive-parity/verify-report.md residual
risk #2.
This commit is contained in:
Developer
2026-06-26 15:45:34 +00:00
parent 09b9c45665
commit d05de0aacd
9 changed files with 78 additions and 25 deletions
+22 -4
View File
@@ -429,10 +429,20 @@ function ShortcutCard({
>
Open
</Button>
<Button size="sm" variant="outline" onClick={onEdit} className="mobile-touch-target">
<Button
size="sm"
variant="outline"
onClick={onEdit}
className="mobile-touch-target"
>
Edit
</Button>
<Button size="sm" variant="destructive" onClick={onDelete} className="mobile-touch-target">
<Button
size="sm"
variant="destructive"
onClick={onDelete}
className="mobile-touch-target"
>
Delete
</Button>
</div>
@@ -503,10 +513,18 @@ export function Dashboard() {
description="Quick links to websites today, with room for action and user shortcuts later."
action={
<div className="flex gap-2">
<Button variant="outline" onClick={() => setWidgetDialogOpen(true)}>
<Button
variant="outline"
className="mobile-touch-target"
onClick={() => setWidgetDialogOpen(true)}
>
Edit dashboard
</Button>
<Button variant="outline" onClick={openCreateShortcut}>
<Button
variant="outline"
className="mobile-touch-target"
onClick={openCreateShortcut}
>
Add shortcut
</Button>
</div>