fix: react-doctor prefer-tag-over-role 18→0 (native dialog, label dropzones, ul lists)

This commit is contained in:
Nora
2026-06-26 05:18:30 -06:00
parent 17c9c006ea
commit 0ea11e4db6
18 changed files with 402 additions and 311 deletions
+4 -13
View File
@@ -179,21 +179,12 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
{/* ── Upload ── */}
{step === "upload" && (
<div className="space-y-4">
<div
role="button"
tabIndex={0}
<label
onDragOver={(e) => { e.preventDefault(); }}
onDrop={handleDrop}
onClick={() => inputRef.current?.click()}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
inputRef.current?.click();
}
}}
className="flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed border-[var(--admin-border)] bg-white p-12 cursor-pointer hover:border-[var(--admin-accent)] hover:bg-[var(--admin-bg)] transition-colors"
>
<svg className="h-10 w-10 text-[var(--admin-text-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="h-10 w-10 text-[var(--admin-text-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<div className="text-center">
@@ -201,8 +192,8 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<p className="mt-1 text-sm text-[var(--admin-text-muted)]">or click to browse</p>
</div>
<p className="text-xs text-[var(--admin-text-muted)]">CSV, XLSX, XLS, TXT · max 5,000 rows · 10MB</p>
<input aria-label="File upload" ref={inputRef} type="file" accept=".csv,.xlsx,.xls,.txt" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }} />
</div>
<input aria-label="File upload" ref={inputRef} type="file" accept=".csv,.xlsx,.xls,.txt" className="sr-only" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }} />
</label>
{fileName && (
<div className="rounded-xl bg-green-50 border border-green-200 p-4 flex items-center gap-3">
+2 -2
View File
@@ -291,7 +291,7 @@ export default function CartClient() {
)}
</p>
</div>
<div className="flex items-center gap-3" role="group" aria-label={`Quantity controls for ${item.name}`}>
<fieldset className="flex items-center gap-3 border-0 p-0 m-0" aria-label={`Quantity controls for ${item.name}`}>
<button type="button"
onClick={() => decreaseQuantity(item.id)}
className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/10 text-white hover:bg-white/20 active:scale-95 transition-all text-xl font-medium"
@@ -303,7 +303,7 @@ export default function CartClient() {
className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500 text-white hover:bg-emerald-400 active:scale-95 transition-all text-xl font-medium shadow-lg shadow-emerald-500/20"
aria-label={`Increase quantity of ${item.name}`}
>+</button>
</div>
</fieldset>
</div>
<div className="mt-4 flex items-center justify-between pt-3 border-t border-white/5">
<p className="text-sm font-semibold text-white" aria-label={`Item total: $${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}`}>
+2 -2
View File
@@ -385,7 +385,7 @@ export default function PricingClientPage() {
function BillingToggle({ cycle, onChange }: { cycle: BillingCycle; onChange: (c: BillingCycle) => void }) {
return (
<div className="flex items-center gap-3" role="group" aria-label="Billing cycle selection">
<fieldset className="flex items-center gap-3 border-0 p-0 m-0" aria-label="Billing cycle selection">
<button type="button"
onClick={() => onChange("monthly")}
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-all ${
@@ -409,6 +409,6 @@ function BillingToggle({ cycle, onChange }: { cycle: BillingCycle; onChange: (c:
Annual
<span className="rounded-full bg-emerald-100 text-emerald-700 text-xs px-1.5 py-0.5 font-bold">-25%</span>
</button>
</div>
</fieldset>
);
}