Digest Chooser 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 and picked the ids of the digests that were ticked. Show the confirmation when the request succeeds and an error line in the form when it doesn't.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks that at least one digest is ticked and that the email has an @ and a domain. Each problem appears under its control with an icon, the email field gets aria-invalid and an aria-describedby pointing to the message, and focus moves to the first problem: the first tick box, or the email field. Typing or ticking clears the message.

Edit DIGESTS at the top of the file: each has an id, a title and one line of detail. The first tick box is on by default (useState(["weekly"])); change that array to start with none, or all of them. The confirmation lists the titles of whatever was ticked, in the list's order.

Each row is one label, so clicking the title or the line under it toggles the box. The box takes its name from the title and its description from the line under it, and the rows sit in a fieldset with a screen-reader-only legend, so they are read as a group. The box itself is the focusable control, and focus lands on the first one when the choice is missing.

It repeats the address and the digests, so the visitor can spot a typo, and it says what happens next: confirm the link. It's a status region that takes focus when it appears, so a screen reader reads it at once, and "Use another address" brings back a fresh form with focus on its heading.

Below lg the halves stack with a rule between them: the brand and the two link groups, then the sign-up, then the legal band. The submit button goes full width. Nothing scrolls sideways at 320 pixels, and the footer is a static layout with no entrance animation, so reduced motion changes nothing except the confirmation's fade.