From fa10f8713670fd7271e3b86a88e48e919bdcb1a9 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 4 May 2026 14:03:37 +0200
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20tap=20targets=20=E2=89=A528px=20+?=
 =?UTF-8?q?=20aria-pressed=20on=20pbi-card=20(Lighthouse=2086=20=E2=86=92?=
 =?UTF-8?q?=20=E2=89=A595)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/backlog/pbi-list.tsx       | 6 +++---
 components/backlog/story-panel.tsx    | 2 +-
 components/dashboard/product-list.tsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index d03dd14..01e4a03 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -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}
             >
diff --git a/components/backlog/story-panel.tsx b/components/backlog/story-panel.tsx
index c39b858..78fa2ad 100644
--- a/components/backlog/story-panel.tsx
+++ b/components/backlog/story-panel.tsx
@@ -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">
diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index 587e101..211fecc 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -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}
                     >