Minimal Newsletter Footer Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your mailing-list provider: email holds the address. Show the confirmation when the request succeeds and an error line in place of the helper when it doesn't.

The form has noValidate, so the browser's own bubbles stay away. On submit, problemWith checks that something was typed and that it has an @ and a domain. The message replaces the helper line under the field, the field gets aria-invalid, the line is its description, and focus stays on the field. Typing clears the message. Edit problemWith to add rules.

The field's label is "Email address", hidden from sight and read by screen readers; the title above and the placeholder carry the meaning for everyone else. Pressing Enter in the field submits, like the button.

The form fades out and a status region takes its place at the same height, so nothing below moves: a check, "You are on the list", the address and a small "Use another address" button. The region takes focus when it appears, so a screen reader reads it at once. The button brings back an empty form with focus in the field.

Yes: the field is an input group, and the Shine Button sits in its end slot, so the pair reads as one control. Clicking the group's padding focuses the input. While the request runs the button shows a spinner and the input is read-only rather than disabled, so focus stays put.

The column keeps its width, the field and its button stay on one line down to 320 pixels, and the band stacks: the copyright, then the links. The footer is static, with no entrance animation, so reduced motion changes nothing except the confirmation's fade.