Scrum4Me/app/(auth)/register/page.tsx
Madhura68 31ff70b71a 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>
2026-05-04 13:58:34 +02:00

31 lines
1 KiB
TypeScript

import Link from 'next/link'
import { registerAction } from '@/actions/auth'
import { AuthForm } from '@/components/auth/auth-form'
export default function RegisterPage() {
return (
<main className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-sm space-y-6">
{/* Logo / titel */}
<div className="text-center space-y-1">
<h1 className="text-2xl font-medium text-foreground">Scrum4Me</h1>
<p className="text-sm text-muted-foreground">Nieuw account aanmaken</p>
</div>
{/* Formulier */}
<div className="bg-surface-container-low rounded-xl p-6 space-y-4 border border-border">
<AuthForm action={registerAction} submitLabel="Account aanmaken" />
<div className="text-center text-sm text-muted-foreground">
Al een account?{' '}
<Link href="/login" className="text-primary hover:underline font-medium">
Inloggen
</Link>
</div>
</div>
</div>
</main>
)
}