mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-15 06:52:04 +00:00
fix(a11y): bump /admin/users + /admin/login-overview tap targets to WCAG 2.5.5
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:
1 parent
bd24f130ee
commit
499cfad107
2 files changed
+7
-7
No files matched your search
@@ -74,7 +74,7 @@ export function LoginOverviewSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant={filter === "all" ? "default" : "ghost"}
|
variant={filter === "all" ? "default" : "ghost"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-3 text-xs"
|
||||||
onClick={() => setFilter("all")}
|
onClick={() => setFilter("all")}
|
||||||
>
|
>
|
||||||
{t("admin.allAuthEvents")}
|
{t("admin.allAuthEvents")}
|
||||||
@@ -82,7 +82,7 @@ export function LoginOverviewSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant={filter === "failed" ? "default" : "ghost"}
|
variant={filter === "failed" ? "default" : "ghost"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-3 text-xs"
|
||||||
onClick={() => setFilter("failed")}
|
onClick={() => setFilter("failed")}
|
||||||
>
|
>
|
||||||
{t("admin.failedOnly")}
|
{t("admin.failedOnly")}
|
||||||
|
|||||||
@@ -179,7 +179,7 @@ export function UserManagementSection() {
|
|||||||
key={value}
|
key={value}
|
||||||
variant={filter === value ? "default" : "ghost"}
|
variant={filter === value ? "default" : "ghost"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-3 text-xs"
|
||||||
onClick={() => setFilter(value)}
|
onClick={() => setFilter(value)}
|
||||||
aria-pressed={filter === value}
|
aria-pressed={filter === value}
|
||||||
>
|
>
|
||||||
@@ -238,7 +238,7 @@ export function UserManagementSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-3 text-xs"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
updateUser.mutate({
|
updateUser.mutate({
|
||||||
id: u.id,
|
id: u.id,
|
||||||
@@ -264,7 +264,7 @@ export function UserManagementSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-2 text-xs"
|
||||||
onClick={() => startEdit(u)}
|
onClick={() => startEdit(u)}
|
||||||
title={t("admin.editUser")}
|
title={t("admin.editUser")}
|
||||||
aria-label={t("admin.editUser")}
|
aria-label={t("admin.editUser")}
|
||||||
@@ -274,7 +274,7 @@ export function UserManagementSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-7 px-2 text-xs"
|
className="min-h-11 min-w-11 px-2 text-xs"
|
||||||
onClick={() => startReset(u)}
|
onClick={() => startReset(u)}
|
||||||
title={t("admin.resetPassword")}
|
title={t("admin.resetPassword")}
|
||||||
aria-label={t("admin.resetPassword")}
|
aria-label={t("admin.resetPassword")}
|
||||||
@@ -284,7 +284,7 @@ export function UserManagementSection() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
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)}
|
onClick={() => setLogoutTarget(u)}
|
||||||
disabled={u.id === currentUserId}
|
disabled={u.id === currentUserId}
|
||||||
title={
|
title={
|
||||||
|
|||||||
Reference in new issue
Block a user