Persist values, tighten validation, and a11y on /onboarding
- Server action echoes kitaName, the three module booleans, and the
Mindest-Verfügbarkeiten value on every error path so failed submits no
longer wipe what the user typed; OnboardingState gains an `attempt`
counter that drives a per-field remount key on the client.
- Schema now rejects min=0 when the Notdienst module is active (via
superRefine) — previously a kita could be created with 0 minimum days,
which is fachlich sinnlos. When the module is off, 0 stays valid.
- Validation error messages reworded from terse fragments ("Nicht
negativ.", "Bitte ganze Zahl.") to full sentences.
- Field error <p> elements gain role="alert" + aria-live="polite" so
screen readers announce them on submit.
- CardTitle now accepts as="h1" and the onboarding page uses it for
"Willkommen, …" — the page now has a real top-level heading.
- ModuleCheckbox uses aria-labelledby + aria-describedby so the
accessible name is just the module title; the longer description is
exposed as secondary info instead of being concatenated into the AN.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
t.indorf
@@ -1,22 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { useActionState } from "react";
|
||||
import { useActionState, useId } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import { completeOnboardingAction, type OnboardingState } from "./actions";
|
||||
|
||||
const initialState: OnboardingState = {};
|
||||
import {
|
||||
completeOnboardingAction,
|
||||
initialOnboardingState,
|
||||
} from "./actions";
|
||||
|
||||
export function OnboardingForm() {
|
||||
const [state, formAction, pending] = useActionState(
|
||||
completeOnboardingAction,
|
||||
initialState,
|
||||
initialOnboardingState,
|
||||
);
|
||||
|
||||
// Bumping the key on each attempt forces uncontrolled inputs to remount with
|
||||
// the echoed defaultValue from the server — otherwise React's <form action>
|
||||
// semantics would wipe them after a failed submit.
|
||||
const attemptKey = state.attempt;
|
||||
|
||||
const kitaError = state.errors?.kitaName?.[0];
|
||||
const minError = state.errors?.notdienstMinPerChildPerMonth?.[0];
|
||||
|
||||
return (
|
||||
<form action={formAction} className="space-y-8">
|
||||
{/* ----- Schritt 1: Name ----- */}
|
||||
@@ -27,14 +36,24 @@ export function OnboardingForm() {
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="kitaName">Name des Elternvereins / der Kita</Label>
|
||||
<Input
|
||||
key={`kitaName-${attemptKey}`}
|
||||
id="kitaName"
|
||||
name="kitaName"
|
||||
required
|
||||
placeholder="z.B. Waldameisen e.V."
|
||||
aria-invalid={!!state.errors?.kitaName}
|
||||
defaultValue={state.values?.kitaName ?? ""}
|
||||
aria-invalid={!!kitaError}
|
||||
aria-describedby={kitaError ? "kitaName-error" : undefined}
|
||||
/>
|
||||
{state.errors?.kitaName?.[0] && (
|
||||
<p className="text-xs text-destructive">{state.errors.kitaName[0]}</p>
|
||||
{kitaError && (
|
||||
<p
|
||||
id="kitaName-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="text-xs text-destructive"
|
||||
>
|
||||
{kitaError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -45,22 +64,25 @@ export function OnboardingForm() {
|
||||
Schritt 2 · Module aktivieren
|
||||
</legend>
|
||||
<ModuleCheckbox
|
||||
key={`notdienstModuleEnabled-${attemptKey}`}
|
||||
name="notdienstModuleEnabled"
|
||||
label="Notdienst-Planung"
|
||||
description="Verfügbarkeiten erfassen, Plan generieren, bei Krankheitsausfall alarmieren."
|
||||
defaultChecked
|
||||
defaultChecked={state.values?.notdienstModuleEnabled ?? true}
|
||||
/>
|
||||
<ModuleCheckbox
|
||||
key={`terminModuleEnabled-${attemptKey}`}
|
||||
name="terminModuleEnabled"
|
||||
label="Terminkalender"
|
||||
description="Kita-Feste, Schließtage und private Anfragen koordinieren."
|
||||
defaultChecked
|
||||
defaultChecked={state.values?.terminModuleEnabled ?? true}
|
||||
/>
|
||||
<ModuleCheckbox
|
||||
key={`adressbuchModuleEnabled-${attemptKey}`}
|
||||
name="adressbuchModuleEnabled"
|
||||
label="Eltern-Adressbuch"
|
||||
description="Eltern können sich auf Opt-In-Basis untereinander finden."
|
||||
defaultChecked
|
||||
defaultChecked={state.values?.adressbuchModuleEnabled ?? true}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
@@ -74,29 +96,49 @@ export function OnboardingForm() {
|
||||
Mindest-Verfügbarkeiten pro Kind und Monat
|
||||
</Label>
|
||||
<Input
|
||||
key={`notdienstMinPerChildPerMonth-${attemptKey}`}
|
||||
id="notdienstMinPerChildPerMonth"
|
||||
name="notdienstMinPerChildPerMonth"
|
||||
type="number"
|
||||
min={0}
|
||||
max={31}
|
||||
defaultValue={2}
|
||||
defaultValue={state.values?.notdienstMinPerChildPerMonth ?? 2}
|
||||
required
|
||||
aria-invalid={!!state.errors?.notdienstMinPerChildPerMonth}
|
||||
aria-invalid={!!minError}
|
||||
aria-describedby={
|
||||
minError
|
||||
? "notdienstMinPerChildPerMonth-error"
|
||||
: "notdienstMinPerChildPerMonth-helper"
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Wie viele Tage müssen Eltern pro Monat als verfügbar markieren?
|
||||
Diesen Wert kannst du später jederzeit ändern.
|
||||
</p>
|
||||
{state.errors?.notdienstMinPerChildPerMonth?.[0] && (
|
||||
<p className="text-xs text-destructive">
|
||||
{state.errors.notdienstMinPerChildPerMonth[0]}
|
||||
{!minError && (
|
||||
<p
|
||||
id="notdienstMinPerChildPerMonth-helper"
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
Wie viele Tage müssen Eltern pro Monat als verfügbar markieren?
|
||||
Diesen Wert kannst du später jederzeit ändern.
|
||||
</p>
|
||||
)}
|
||||
{minError && (
|
||||
<p
|
||||
id="notdienstMinPerChildPerMonth-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="text-xs text-destructive"
|
||||
>
|
||||
{minError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{state.errors?._form?.[0] && (
|
||||
<p className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<p
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
{state.errors._form[0]}
|
||||
</p>
|
||||
)}
|
||||
@@ -119,12 +161,34 @@ function ModuleCheckbox({
|
||||
description: string;
|
||||
defaultChecked?: boolean;
|
||||
}) {
|
||||
const id = useId();
|
||||
const titleId = `${id}-title`;
|
||||
const descId = `${id}-desc`;
|
||||
return (
|
||||
<label className="flex items-start gap-3 rounded-md border p-4 transition-colors hover:bg-muted/40">
|
||||
<Checkbox name={name} defaultChecked={defaultChecked} className="mt-0.5" />
|
||||
// The wrapping <label htmlFor> keeps the whole card clickable to toggle
|
||||
// the checkbox. aria-labelledby narrows the accessible name to just the
|
||||
// module title, with the description exposed via aria-describedby so
|
||||
// screen readers can present it as secondary info rather than as part of
|
||||
// the primary label.
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="flex cursor-pointer items-start gap-3 rounded-md border p-4 transition-colors hover:bg-muted/40"
|
||||
>
|
||||
<Checkbox
|
||||
id={id}
|
||||
name={name}
|
||||
defaultChecked={defaultChecked}
|
||||
aria-labelledby={titleId}
|
||||
aria-describedby={descId}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div className="grid gap-1 leading-none">
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
<span className="text-xs text-muted-foreground">{description}</span>
|
||||
<span id={titleId} className="text-sm font-medium">
|
||||
{label}
|
||||
</span>
|
||||
<span id={descId} className="text-xs text-muted-foreground">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user