Guestbook Customer Wall Block for React

Nowhere but this page's state. The submit handler prepends the note to a list held in React state (or the framework's equivalent) and tells you so in a status line. A refresh clears it. To keep notes, send details to your own endpoint where the comment in submit says, and render what comes back.

NOTES holds the five seed notes, newest first, each with a name, where, text and when. LIMIT is the longest note and SHORTEST the least that says anything. A note's initials are made from its name, so no photographs are needed.

A field is checked when you leave it (an empty one waits until you submit), and once an error shows it re-checks as you type. Submitting checks both required fields, the name and the note, and moves focus to the first one with a problem. Each error is text with an icon, linked to its field with aria-describedby.

A status line under the button changes to "Added to the top of the wall for this visit. It wasn't sent anywhere." The line is re-created on each note, so a screen reader reads it every time. The new note is a normal list item with its "Only on this page" badge.

The heading comes first, then the framed form, then the notes under a rule from rail to rail. On wide screens the notes take the first three fifths and the form the last two, with the divider running from the top rule to the foot of the block.

The heading, the form and the list fade up once on load. With reduced motion they simply appear. A new note appears without animation.