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

fix: react-doctor a11y improvements (skeletons, icons, social links, toggles)

Browse Source
This commit is contained in:
Nora
2026-06-26 04:50:38 -06:00
parent 3249ff0a55
commit cad6d64eee
6 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/BrandSettingsForm.tsx
+2
View File
@@ -712,6 +712,8 @@ function FeatureToggle({
<div className="flex items-start gap-3">
<button
type="button"
aria-label={`Toggle ${label}`}
aria-pressed={checked}
onClick={() => onChange(!checked)}
className={`relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors ${
checked ? "bg-green-600" : "bg-zinc-600"
src/components/admin/CampaignListPanel.tsx
+1
View File
@@ -289,6 +289,7 @@ export default function CampaignListPanel({ initialCampaigns, brandId = "6429430
key={c.id}
className="hover:bg-[var(--admin-card-hover)] cursor-pointer transition-colors"
onClick={() => router.push(`/admin/communications/campaigns/${c.id}`)}
aria-label={`View campaign ${c.name}`}
>
<td className="px-3 sm:px-4 py-3 font-medium text-[var(--admin-text-primary)]">{c.name}</td>
<td className="px-3 sm:px-4 py-3">
src/components/admin/ContactListPanel.tsx
+4 -4
View File
@@ -279,7 +279,7 @@ export default function ContactListPanel({
<th className="text-left px-4 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider">Source</th>
<th className="text-left px-4 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider">Email Opt</th>
<th className="text-left px-4 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wider">Unsub</th>
<th className="text-right px-4 py-3"></th>
<th className="text-right px-4 py-3" aria-label="Actions"></th>
</tr>
</thead>
<tbody className="bg-white">
@@ -304,7 +304,7 @@ export default function ContactListPanel({
<th className="text-left px-4 py-3.5 font-semibold text-stone-500 text-xs uppercase tracking-wider">Source</th>
<th className="text-left px-4 py-3.5 font-semibold text-stone-500 text-xs uppercase tracking-wider">Email Opt</th>
<th className="text-left px-4 py-3.5 font-semibold text-stone-500 text-xs uppercase tracking-wider">Unsubscribed</th>
<th className="text-right px-4 py-3.5"></th>
<th className="text-right px-4 py-3.5" aria-label="Actions"></th>
</tr>
</thead>
<tbody className="divide-y divide-[var(--admin-border)] bg-white">
@@ -333,14 +333,14 @@ export default function ContactListPanel({
<td className="px-4 py-3.5">
{c.email_opt_in ? (
<span className="inline-flex items-center gap-1 text-emerald-600 text-xs font-semibold">
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<svg aria-hidden="true" className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Opted in
</span>
) : (
<span className="inline-flex items-center gap-1 text-red-500 text-xs font-semibold">
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<svg aria-hidden="true" className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>