Focus the first server-side form error

Connect a server error summary to invalid fields and move focus to the first actionable control.

MediumForm Accessibility

50 min0% acceptance

Description

Build ServerErrorForm for Title and Owner fields around an injected submit function. Submit once, map returned path issues to fields and pathless issues to the form, render a focusable linked error summary, connect messages with aria-describedby and aria-invalid, focus the first invalid control, and clear only errors for a field the user corrects.

Requirements

Export a ServerErrorForm component from src/App.tsx.
After a failed result, render a focusable named error summary containing every valid issue.
Connect Title and Owner messages to their controls through stable IDs and aria-describedby.
Set aria-invalid on exactly the fields that currently have server issues.
Render field issue entries as links whose fragments target the matching controls.
Focus the first invalid control in form DOM order after rendering server errors.
Keep pathless and unknown-path issues in the summary without assigning them to a field.
Changing a field clears only that field's issues and matching summary entries.
Disable duplicate submission while a request is pending and pass one current values snapshot.

Field issues

Input

Server returns title required and owner unknown

Expected output

Summary links point to Title and Owner; Title receives focus

Explanation

DOM order determines the first invalid control, not server issue order.

Correct one field

Input

After both errors render, edit Owner

Expected output

Owner's error clears while Title's message and summary entry remain

Explanation

Correction must not erase unrelated server feedback.

Constraints

Labels are Title and Owner
Do not focus invalid controls before their messages render
Preserve server message order within each field

Hints

Hint 1

Normalize issues into field buckets and form errors before updating component state.

Hint 2

Give controls stable IDs that summary anchors can reference directly.

Hint 3

After committing errors, focus by known field order rather than relying on the first issue path.

Reactformsaccessibility