Remove/update item UX is clear and reversible
Why it matters
Icon-only destructive controls — a bare "X" with no label, no confirmation, and no aria-label — remove items without warning and leave screen reader users with no way to identify what the button does. WCAG 2.2 SC 4.1.2 (Name, Role, Value) and SC 2.5.3 (Label in Name) both require that interactive controls expose an accessible name matching visible text. A user who accidentally taps an unlabeled remove button loses cart items with no recovery path; on mobile, mis-taps are routine. The business impact is measurable: unrecoverable cart losses increase abandonment and support load.
Severity rationale
Medium because the damage is self-inflicted data loss rather than a security breach, but the WCAG 2.2 violations expose the site to accessibility litigation risk.
Remediation
In src/components/CartItem.tsx, replace icon-only remove buttons with labeled controls that include an aria-label, visible text, and a confirmation step:
// src/components/CartItem.tsx
<button
onClick={() => { if (confirm(`Remove ${item.name}?`)) onRemove(item.id) }}
aria-label={`Remove ${item.name}`}
>
Remove
</button>
For quantity inputs, add aria-label={\Quantity for ${item.name}`}` and render a visible "Updated" toast on change so sighted users get feedback without a reload.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Cart & Checkout UX Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- wcag:2.2 · 4.1.2 — Name, Role, Value
- wcag:2.2 · 2.5.3 — Label in Name
Taxons
History
- 2026-04-18·v1.0.0·Initial import from ecommerce-cart-ux·automated