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/app/admin/settings/ai/AIClient.tsx
+20 -20
View File
@@ -131,7 +131,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
boxShadow: isConnected ? '0 2px 8px rgba(202, 117, 67, 0.25)' : 'none',
}}
title={!isConnected ? "Add your OpenAI API key in Settings to enable" : "Open tool"}
>
aria-label="Open Tool">
Open Tool
</button>
)}
@@ -140,7 +140,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
style={{
background: 'rgba(0, 0, 0, 0.04)',
color: 'rgba(0, 0, 0, 0.4)',
}}>
}} aria-label="Coming Soon">
Coming Soon
</button>
)}
@@ -149,7 +149,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
style={{
background: 'rgba(171, 162, 120, 0.15)',
color: '#92781e',
}}>
}} aria-label="Request Access">
Request Access
</button>
)}
@@ -225,7 +225,7 @@ function ConnectionStatusBanner({ isConnected, availableCount, onConfigure }: {
color: 'white',
boxShadow: '0 2px 8px rgba(202, 117, 67, 0.25)',
}}
>
aria-label="Add API Key">
Add API Key
</button>
</div>
@@ -783,7 +783,7 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
>
aria-label="Copy to clipboard">
Copy to clipboard
</button>
</div>
@@ -898,7 +898,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle} htmlFor="fld-price-tiers">Price Tiers</label>
<button type="button" onClick={addTier} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Tier</button>
<button type="button" onClick={addTier} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }} aria-label="+ Add Tier">+ Add Tier</button>
</div>
{priceTiers.map((tier, i) => (
<div key={`tier-${i}-${tier.tier}-${tier.price}`} className="flex items-center gap-2">
@@ -922,7 +922,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
</div>
{priceTiers.length > 1 && (
<button type="button" onClick={() => removeTier(i)} className="text-xs px-2 transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeTier(i)} className="text-xs px-2 transition-colors" style={{ color: 'var(--admin-danger)' }} aria-label="✕">✕</button>
)}
</div>
))}
@@ -932,7 +932,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle} htmlFor="fld-historical-sales">Historical Sales</label>
<button type="button" onClick={addSale} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
<button type="button" onClick={addSale} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }} aria-label="+ Add Row">+ Add Row</button>
</div>
<AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
<div className="grid grid-cols-4 gap-2 px-3 py-2">
@@ -971,7 +971,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
</div>
{historicalSales.length > 1 && (
<button type="button" onClick={() => removeSale(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeSale(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }} aria-label="✕">✕</button>
)}
</div>
))}
@@ -1048,7 +1048,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
>
aria-label="Copy to clipboard">
Copy to clipboard
</button>
</div>
@@ -1154,7 +1154,7 @@ function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Recommended Subject Line</p>
<p className="text-base font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{result.subjectLine}</p>
<button type="button" onClick={() => copyToClipboard(result.subjectLine)} className="mt-2 text-xs flex items-center gap-1 transition-colors" style={{ color: 'var(--admin-accent)' }}>
<button type="button" onClick={() => copyToClipboard(result.subjectLine)} className="mt-2 text-xs flex items-center gap-1 transition-colors" style={{ color: 'var(--admin-accent)' }} aria-label="Copy">
Copy
</button>
</AdminCard>
@@ -1410,7 +1410,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
onClick={addStop}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-accent)' }}
>
aria-label="+ Add Stop">
+ Add Stop
</button>
</div>
@@ -1419,7 +1419,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
<div className="flex items-center justify-between">
<span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--admin-text-muted)' }}>Stop {i + 1}</span>
{stops.length > 2 && (
<button type="button" onClick={() => removeStop(i)} className="text-xs transition-colors" style={{ color: 'var(--admin-danger)' }}>
<button type="button" onClick={() => removeStop(i)} className="text-xs transition-colors" style={{ color: 'var(--admin-danger)' }} aria-label="Remove">
Remove
</button>
)}
@@ -1546,7 +1546,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
>
aria-label="Copy to clipboard">
Copy to clipboard
</button>
</div>
@@ -1638,7 +1638,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle} htmlFor="fld-historical-sales-2">Historical Sales</label>
<button type="button" onClick={addRow} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
<button type="button" onClick={addRow} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }} aria-label="+ Add Row">+ Add Row</button>
</div>
<AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
<div className="grid grid-cols-4 gap-2 px-3 py-2">
@@ -1674,7 +1674,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
/>
{historicalData.length > 1 && (
<button type="button" onClick={() => removeRow(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeRow(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }} aria-label="✕">✕</button>
)}
</div>
))}
@@ -1746,7 +1746,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
>
aria-label="Copy to clipboard">
Copy to clipboard
</button>
</div>
@@ -1773,7 +1773,7 @@ function ToolModal({ tool, brandId, brandName, onClose }: ModalProps) {
<span className="text-2xl">{tool.icon}</span>
<h2 className="text-lg font-bold" style={{ color: 'var(--admin-text-primary)' }}>{tool.title}</h2>
</div>
<button type="button" onClick={onClose} className="p-2 transition-colors" style={{ color: 'var(--admin-text-muted)' }}>
<button type="button" onClick={onClose} className="p-2 transition-colors" style={{ color: 'var(--admin-text-muted)' }} aria-label="Close">
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -1875,7 +1875,7 @@ export default function AIsettingsClient({
<button type="button"
onClick={() => setActiveModule(null)}
className={`admin-filter-tab ${activeModule === null ? 'admin-filter-tab--active' : ''}`}
>
aria-label="All ()">
All ({AI_TOOLS.length})
</button>
{modules.map((m) => {
@@ -1885,7 +1885,7 @@ export default function AIsettingsClient({
key={m}
onClick={() => setActiveModule(activeModule === m ? null : m)}
className={`admin-filter-tab ${activeModule === m ? 'admin-filter-tab--active' : ''}`}
>
aria-label="()">
{m} ({count})
</button>
);
src/app/admin/settings/billing/BillingClientPage.tsx
+2 -2
View File
@@ -236,7 +236,7 @@ export default function BillingClientPage({ overview }: Props) {
<button type="button"
onClick={() => setCompareOpen(!compareOpen)}
className="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--admin-accent)] hover:text-[var(--admin-accent-hover)] transition-colors"
>
aria-label="plans">
{compareOpen ? "Hide" : "Compare"} plans
<svg className={`w-4 h-4 transition-transform ${compareOpen ? "rotate-180" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
@@ -338,7 +338,7 @@ export default function BillingClientPage({ overview }: Props) {
<button type="button"
onClick={() => setCompareOpen(false)}
className="inline-flex items-center gap-1.5 text-xs text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] transition-colors"
>
aria-label="Close">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
src/app/admin/settings/integrations/IntegrationsClient.tsx
+2 -2
View File
@@ -529,7 +529,7 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
<button type="button"
onClick={() => setShowAddModal(true)}
className="rounded-xl bg-violet-600 px-4 py-2.5 text-xs font-bold text-white hover:bg-violet-700 shrink-0"
>
aria-label="+ Add Integration">
+ Add Integration
</button>
</div>
@@ -617,7 +617,7 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
<div className="w-full max-w-lg rounded-2xl bg-zinc-900 border border-zinc-700 p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-bold text-zinc-100">Add Integration</h2>
<button type="button" onClick={() => setShowAddModal(false)} className="text-zinc-500 hover:text-zinc-300">
<button type="button" onClick={() => setShowAddModal(false)} className="text-zinc-500 hover:text-zinc-300" aria-label="Close">
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
src/app/admin/water-log/headgates/HeadgatesManager.tsx
+4 -4
View File
@@ -209,7 +209,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="mx-auto max-w-4xl flex items-center justify-between">
<div>
<div className="flex items-center gap-2">
<button type="button" onClick={() => router.back()} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-sm">← Back</button>
<button type="button" onClick={() => router.back()} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-sm" aria-label="← Back">← Back</button>
<h1 className="text-2xl font-bold text-[var(--admin-text-primary)]">Headgates & QR Codes</h1>
</div>
<p className="text-xs text-[var(--admin-text-muted)] mt-0.5">Manage headgates and generate QR codes for field access</p>
@@ -347,7 +347,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
Edit
</AdminButton>
{/* QR preview thumbnail */}
<button type="button" onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR">
<button type="button" onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR" aria-label="View / Print QR">
<Image
src={`/api/water-qr?token=${hg.headgate_token}&size=80`}
alt={`QR for ${hg.name}`}
@@ -396,7 +396,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden border border-[var(--admin-border)]">
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--admin-border)]">
<p className="font-bold text-[var(--admin-text-primary)]">Edit Headgate</p>
<button type="button" onClick={() => setEditHg(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<button type="button" onClick={() => setEditHg(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]" aria-label="Close">
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -560,7 +560,7 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
<p className="font-bold text-[var(--admin-text-primary)]">{hg.name}</p>
<p className="text-xs text-[var(--admin-text-muted)] mt-0.5">QR Label Preview</p>
</div>
<button type="button" onClick={onClose} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<button type="button" onClick={onClose} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]" aria-label="Close">
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
src/app/indian-river-direct/faq/FAQClientPage.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ export default function IndianRiverFAQPage({ phone }: { phone?: string }) {
<button type="button"
onClick={() => setSearchQuery("")}
className="absolute inset-y-0 right-5 flex items-center text-stone-400 hover:text-stone-600 transition-colors"
>
aria-label="Close">
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
src/app/tuxedo/faq/FAQClientPage.tsx
+1 -1
View File
@@ -168,7 +168,7 @@ export default function TuxedoFAQPage() {
<button type="button"
onClick={() => setSearchQuery("")}
className="absolute inset-y-0 right-4 flex items-center text-stone-400 hover:text-stone-600 transition-colors"
>
aria-label="Close">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>