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>
This commit is contained in:
Janpeter Visser 2026-04-26 17:01:34 +02:00
parent 6615af8aa1
commit 44e4b70af5
3 changed files with 8 additions and 3 deletions

View file

@ -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>