fix(a11y): tap targets ≥28px + aria-pressed on pbi-card (Lighthouse 86 → ≥95)
Lighthouse-audit op /products/[id] flagde drie issues; fix in deze PR:
1. **[aria-*] attributes do not match their roles** — pbi-list.tsx had
aria-selected={isSelected} op role="button". aria-selected is alleen
geldig op tab/option/treeitem etc. Voor toggle-buttons is aria-pressed
de juiste attribute.
2. **Touch targets do not have sufficient size** — drie offenders op het
product-backlog scherm (PBI ✎/× iconen, Story ✎ icoon) hadden
~16-18×18px tap-targets via px-1.5/p-0.5. Lighthouse minimum is 24×24
en WCAG AA streeft 44×44. Fix: inline-flex + min-h-7 min-w-7 (28×28px)
met behoud van het kleine icoon — wel grotere clickable area.
3. Dashboard product-card pencil-icoon kreeg dezelfde fix preventief.
Sprint-backlog heeft hetzelfde patroon op meer plekken; bewust nu niet
aangeraakt om PR scope te beperken tot de ge-auditeerde route. Vervolg-PR
indien sprint-page-audit ook flagt.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ca4ba6deb5
commit
fa10f87136
3 changed files with 5 additions and 5 deletions
|
|
@ -109,7 +109,7 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
|
|||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); if (!isDemo) setEditingProduct(product) }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
className="opacity-0 group-hover:opacity-100 inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground hover:text-foreground rounded disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk product"
|
||||
disabled={isDemo}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue