tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-08 20:42:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): bump /admin/users + /admin/login-overview tap targets to WCAG 2.5.5

Browse Source 
The four per-row action buttons on `/admin/users` (role toggle, edit,
reset password, force-logout) and the filter pills on both routes
were sized `h-7` (28px) — well below WCAG 2.5.5 AA's 44×44px target
that the rest of the app already honours (bottom-nav, dashboard
quick-add). Mobile users on a 360px viewport had four 28×28px buttons
crammed into the right edge of every user row.

Adds `min-h-11 min-w-11` to all six button sites. The visual icon-only
look is preserved — only the hit-area expands.

Closes H2 from .planning/phase-6-design-findings.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-09 17:44:58 +02:00
1 parent bd24f130ee
commit 499cfad107
2 files changed
+7 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/admin/login-overview-section.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export function LoginOverviewSection() {
<Button
variant={filter === "all" ? "default" : "ghost"}
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-3 text-xs"
onClick={() => setFilter("all")}
>
{t("admin.allAuthEvents")}
@@ -82,7 +82,7 @@ export function LoginOverviewSection() {
<Button
variant={filter === "failed" ? "default" : "ghost"}
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-3 text-xs"
onClick={() => setFilter("failed")}
>
{t("admin.failedOnly")}
src/components/admin/user-management-section.tsx
+5 -5
View File
@@ -179,7 +179,7 @@ export function UserManagementSection() {
key={value}
variant={filter === value ? "default" : "ghost"}
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-3 text-xs"
onClick={() => setFilter(value)}
aria-pressed={filter === value}
>
@@ -238,7 +238,7 @@ export function UserManagementSection() {
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-3 text-xs"
onClick={() =>
updateUser.mutate({
id: u.id,
@@ -264,7 +264,7 @@ export function UserManagementSection() {
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-2 text-xs"
onClick={() => startEdit(u)}
title={t("admin.editUser")}
aria-label={t("admin.editUser")}
@@ -274,7 +274,7 @@ export function UserManagementSection() {
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
className="min-h-11 min-w-11 px-2 text-xs"
onClick={() => startReset(u)}
title={t("admin.resetPassword")}
aria-label={t("admin.resetPassword")}
@@ -284,7 +284,7 @@ export function UserManagementSection() {
<Button
variant="ghost"
size="sm"
className="text-destructive hover:text-destructive h-7 px-2 text-xs"
className="text-destructive hover:text-destructive min-h-11 min-w-11 px-2 text-xs"
onClick={() => setLogoutTarget(u)}
disabled={u.id === currentUserId}
title={