fix(a11y): static accessibility findings (v1-readiness #4 — code-side)
Statische audit op happy-path-code; 4 categorieën gefixt vóór de Lighthouse-
verificatie die de gebruiker handmatig draait:
1. <main>-landmark op /login en /register (waren <div>); auth-pages krijgen
nu een correcte landmark zodat screen-readers ze kunnen overslaan/nav
2. solo-task-card.tsx: agent-status-pill had role="button" + aria-label maar
GEEN tabIndex en GEEN onKeyDown — keyboard-onbereikbaar. Nu compleet:
tabIndex={0} + Enter/Space-handler
3. Form-label-associaties via htmlFor + id-pairs:
- story-dialog (5): code, title, description, acceptance + priority via labelledby
- task-dialog (3): title, description, implementation_plan
- todo-list PromotePbi/PromoteStory dialogs (6): title, product, pbi, priority
Lighthouse a11y "form-field-multiple-labels" en "label" rules worden
hierdoor groen.
Niet aangeraakt:
- pbi-dialog: htmlFor was al goed gewired
- auth-form: htmlFor was al goed gewired
- Color-contrast: gebruikt MD3-tokens; theoretisch correct (verifieer in
Lighthouse run)
- Heading-hierarchy: nog niet gescand — kan in vervolgronde
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
43778e3bcb
commit
31ff70b71a
6 changed files with 42 additions and 25 deletions
|
|
@ -63,11 +63,19 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
|
|||
{job && (
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] px-1.5 py-0 rounded border flex items-center gap-1 shrink-0',
|
||||
'text-[10px] px-1.5 py-0 rounded border flex items-center gap-1 shrink-0 cursor-pointer',
|
||||
JOB_STATUS_COLORS[job.status],
|
||||
)}
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onClick()
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Agent-status: ${JOB_STATUS_LABELS[job.status]}`}
|
||||
>
|
||||
{JOB_STATUS_ACTIVE.has(job.status) && <Loader2 className="animate-spin" size={8} />}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue