janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(a11y): tap targets ≥28px + aria-pressed on pbi-card (Lighthouse 86 → ≥95)

Browse source 
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:
Janpeter Visser 2026-05-04 14:03:37 +02:00
parent ca4ba6deb5
commit fa10f87136
3 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/backlog/pbi-list.tsx
View file

@ -157,7 +157,7 @@ function SortablePbiRow({
isDragging={isDragging}
role="button"
tabIndex={0}
aria-selected={isSelected}
aria-pressed={isSelected}
onClick={onSelect}
onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect() } }}
badge={
@ -170,7 +170,7 @@ function SortablePbiRow({
<DemoTooltip show={isDemo}>
<button
onClick={(e) => { e.stopPropagation(); if (!isDemo) onEdit() }}
className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
className="inline-flex items-center justify-center min-h-7 min-w-7 border border-border rounded text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
aria-label="Bewerk PBI"
disabled={isDemo}
>
@ -180,7 +180,7 @@ function SortablePbiRow({
<DemoTooltip show={isDemo}>
<button
onClick={(e) => { e.stopPropagation(); if (!isDemo) onDelete() }}
className="text-muted-foreground hover:text-error text-xs disabled:opacity-40 disabled:cursor-not-allowed"
className="inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground hover:text-error text-base leading-none disabled:opacity-40 disabled:cursor-not-allowed"
aria-label="Verwijder PBI"
disabled={isDemo}
>

2
components/backlog/story-panel.tsx
View file

@ -106,7 +106,7 @@ function SortableStoryBlock({
actions={
<button
onClick={(e) => { e.stopPropagation(); onEdit() }}
className="text-muted-foreground hover:text-foreground p-0.5 rounded transition-colors"
className="inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground hover:text-foreground rounded transition-colors"
aria-label="Story bewerken"
>
<svg className="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">