Newsletter FAQ Block for React

No: nothing leaves the page. subscribe checks the address, shows the button's loading state for a short simulated wait (LATENCY) and then the confirmation. Replace the body of the timeout with a call to your mailing list, and show the confirmation when it answers. The confirmation says to open the message you sent and confirm, so it fits a double opt-in list.

problemWith checks that it isn't empty and looks like an address (something, an at sign, a domain with a dot). The message goes under the field, the field is marked invalid and keeps focus, and typing clears it. The field is read-only, not disabled, while the request runs, so it keeps focus. It isn't checked on each key.

The field has a visible label, and the error is tied to it. A polite status line says "Subscribing…" while the request runs, then focus moves to the confirmation, which is read out. "Use a different address" empties the field and puts focus back in it.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found".

Each question is a button inside its own h3. Tab moves through the form first, then the questions; Enter or Space opens and closes one, and the button says whether it's expanded. Tab alone moves between questions on this library: its accordion doesn't take arrow keys.

Below the lg breakpoint the header and the form come first, with the button under the field, and the six questions follow, running rail to rail under a rule with + marks. Nothing scrolls sideways at 320 pixels, and a long address wraps in the confirmation.