From 44e4b70af5e8f5d3b1f2ba8a81cc5c325a1c60c9 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 17:01:34 +0200
Subject: [PATCH] feat(ST-607): WCAG AA accessibility fixes

- PBI row: role="button", tabIndex, aria-selected, onKeyDown (Enter/Space), focus-visible ring
- PBI "+" button: aria-label with priority name
- Sprint header cancel button: aria-label="Annuleer bewerken"
- Task create cancel button: aria-label="Annuleer"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/backlog/pbi-list.tsx     | 7 ++++++-
 components/sprint/sprint-header.tsx | 2 +-
 components/sprint/task-list.tsx     | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 6e0450c..4169864 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -89,9 +89,13 @@ function SortablePbiRow({
     <div
       ref={setNodeRef}
       style={style}
+      role="button"
+      tabIndex={0}
+      aria-selected={isSelected}
       onClick={onSelect}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect() } }}
       className={cn(
-        'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
+        'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
         isSelected && 'bg-primary-container text-primary-container-foreground'
       )}
     >
@@ -294,6 +298,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
                       <button
                         onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
                         className="text-xs text-muted-foreground hover:text-foreground"
+                        aria-label={`Nieuw PBI aanmaken (${PRIORITY_LABELS[priority]})`}
                       >
                         +
                       </button>
diff --git a/components/sprint/sprint-header.tsx b/components/sprint/sprint-header.tsx
index c9bbb8a..5ae83a6 100644
--- a/components/sprint/sprint-header.tsx
+++ b/components/sprint/sprint-header.tsx
@@ -84,7 +84,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
               <Textarea name="sprint_goal" defaultValue={sprint.sprint_goal} rows={2} className="text-sm flex-1" autoFocus />
               <div className="flex flex-col gap-1">
                 <SaveGoalButton />
-                <Button type="button" size="sm" variant="ghost" onClick={() => setEditingGoal(false)}>×</Button>
+                <Button type="button" size="sm" variant="ghost" aria-label="Annuleer bewerken" onClick={() => setEditingGoal(false)}>×</Button>
               </div>
             </form>
           ) : (
diff --git a/components/sprint/task-list.tsx b/components/sprint/task-list.tsx
index b7cefe4..116f546 100644
--- a/components/sprint/task-list.tsx
+++ b/components/sprint/task-list.tsx
@@ -136,7 +136,7 @@ function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprint
       <div className="flex gap-2">
         <Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
         <CreateSubmitButton />
-        <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
+        <Button type="button" variant="ghost" size="sm" className="h-7" aria-label="Annuleer" onClick={onDone}>×</Button>
       </div>
       {state && 'error' in state && typeof state.error === 'string' && (
         <p className="text-xs text-destructive">{state.error}</p>