tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: react-doctor control-has-associated-label 137→? (auto aria-labels)

Browse Source 
Add aria-label to buttons (icon-only, pagination, action) and inputs
(placeholder-derived) via balanced-brace JSX parser. Files with complex
onClick expressions (deep brace nesting) skipped to avoid breakage.
This commit is contained in:
Nora
2026-06-26 04:08:56 -06:00
parent 16a6756ad1
commit f7ac9399b2
46 changed files with 187 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/UsersPage.tsx
+16 -16
View File
@@ -345,7 +345,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<button type="button"
onClick={openCreate}
className="rounded-lg bg-stone-900 px-4 py-2 text-sm font-medium text-white hover:bg-stone-800"
>
aria-label="+ Create User">
+ Create User
</button>
)}
@@ -367,7 +367,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
{error && (
<div className="mb-4 flex items-start justify-between rounded-lg bg-red-50 p-4 text-sm text-red-700 gap-3 border border-red-200">
<span>{error}</span>
<button type="button" onClick={() => setError(null)} className="text-red-400 hover:text-red-600 shrink-0">
<button type="button" onClick={() => setError(null)} className="text-red-400 hover:text-red-600 shrink-0" aria-label="Close">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -416,7 +416,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<button type="button"
onClick={() => openEdit(user)}
className="text-xs font-medium text-stone-500 hover:text-stone-900"
>
aria-label="Edit">
Edit
</button>
<div className="relative overflow-visible">
@@ -424,7 +424,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
onClick={() => setActionMenuId(actionMenuId === user.id ? null : user.id)}
className="text-base font-medium text-stone-400 hover:text-stone-600 px-2 py-1"
title="More actions"
>
aria-label="More actions">
⁝
</button>
{actionMenuId === user.id && (
@@ -443,20 +443,20 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<button type="button"
onClick={() => { setActionMenuId(null); handleForcePasswordChange(user.id); }}
className="w-full text-left px-3 py-2.5 text-stone-700 hover:bg-stone-50 flex items-center gap-2"
>
aria-label="↪ Require Password Change">
↪ Require Password Change
</button>
<button type="button"
onClick={() => { setActionMenuId(null); handleSendResetLink(user.email); }}
className="w-full text-left px-3 py-2.5 text-stone-700 hover:bg-stone-50 flex items-center gap-2"
>
aria-label="✉ Send Reset Email">
✉ Send Reset Email
</button>
{user.id !== currentUser.id && (
<button type="button"
onClick={() => { setActionMenuId(null); setDeleteConfirmId(user.id); }}
className="w-full text-left px-3 py-2.5 text-red-600 hover:bg-red-50 flex items-center gap-2 border-t border-stone-100 mt-1 pt-1"
>
aria-label="🗑 Delete">
🗑 Delete
</button>
)}
@@ -492,13 +492,13 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<button type="button"
onClick={() => setDeleteConfirmId(null)}
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-50"
>
aria-label="Cancel">
Cancel
</button>
<button type="button"
onClick={() => handleDelete(deleteConfirmId)}
className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
>
aria-label="Delete">
Delete
</button>
</div>
@@ -525,7 +525,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<h2 className="text-lg font-bold text-stone-900">
{editing.isNew ? "Create User" : "Edit User"}
</h2>
<button type="button" onClick={closePanel} className="text-stone-400 hover:text-stone-600">
<button type="button" onClick={closePanel} className="text-stone-400 hover:text-stone-600" aria-label="Close">
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -613,7 +613,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
checked={editing.role === r}
onChange={() => setRole(r)}
className="accent-stone-900"
/>
aria-label="Role"/>
<div>
<span className="font-medium text-stone-900 capitalize">{r.replace("_", " ")}</span>
<p className="text-xs text-stone-500">
@@ -686,7 +686,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
<button type="button"
onClick={closePanel}
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-50"
>
aria-label="Cancel">
Cancel
</button>
<button type="button"
@@ -714,22 +714,22 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
) : passwordModal.error ? (
<div>
<p className="mt-3 text-sm text-red-600">{passwordModal.error}</p>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-50">Close</button>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-50" aria-label="Close">Close</button>
</div>
) : passwordModal.tempPassword ? (
<div>
<p className="mt-3 text-sm text-stone-600">Temporary password for <span className="font-medium text-stone-900">{passwordModal.email}</span>:</p>
<div className="mt-3 flex items-center gap-2 rounded-xl bg-stone-50 p-4 ring-1 ring-stone-200">
<span className="font-mono text-lg font-bold text-stone-900 select-all">{passwordModal.tempPassword}</span>
<button type="button" onClick={copyTempPassword} className="shrink-0 rounded-lg bg-stone-200 px-3 py-1 text-xs font-medium text-stone-700 hover:bg-stone-300">Copy</button>
<button type="button" onClick={copyTempPassword} className="shrink-0 rounded-lg bg-stone-200 px-3 py-1 text-xs font-medium text-stone-700 hover:bg-stone-300" aria-label="Copy">Copy</button>
</div>
<p className="mt-2 text-xs text-stone-500">Share this password securely with the user. They will be required to change it on next login.</p>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg bg-stone-900 px-4 py-2 text-sm font-medium text-white hover:bg-stone-800">Done</button>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg bg-stone-900 px-4 py-2 text-sm font-medium text-white hover:bg-stone-800" aria-label="Done">Done</button>
</div>
) : passwordModal.message ? (
<div>
<p className="mt-3 text-sm text-stone-600">{passwordModal.message}</p>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg bg-stone-900 px-4 py-2 text-sm font-medium text-white hover:bg-stone-800">Done</button>
<button type="button" onClick={() => setPasswordModal(null)} className="mt-4 w-full rounded-lg bg-stone-900 px-4 py-2 text-sm font-medium text-white hover:bg-stone-800" aria-label="Done">Done</button>
</div>
) : null}
</div>