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:
parent
6615af8aa1
commit
44e4b70af5
3 changed files with 8 additions and 3 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue