Procurement Pack FAQ Block for React

Edit DOCS at the top of the file: each document has an id, a title, a one-line note and its pages. The checkboxes, the count, the page total and the button label all read from it, and the third answer lists the titles from the same array. All documents start ticked; change the initial selected state to start with fewer.

The form checks the email field, a required type="email" input, and then shows "Requested. Check your inbox within one business day for 3 documents." in a status line that screen readers announce. Nothing is sent: put your own request in the submit handler with the email and the ticked ids. Changing a checkbox or the email clears the confirmation, and the line keeps room for two lines so it never moves the pack.

Each document is a Checkbox with an id, inside a label that points at it, so clicking anywhere on the tile toggles it; the box is named by the document's title and described by its note.

The three tiles sit in a group named "The procurement pack". A ticked tile gets a quiet tint and a darker edge; the colour of the button is the only primary on the block.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". One answer is open at a time.

Tab moves through the questions, then the three checkboxes, the email field and the button; Space toggles a checkbox and Enter in the email field submits. Each question is a button inside its own h3 under the section's h2.

Below the lg breakpoint the title comes first, the questions follow from rail to rail, and the pack comes under them behind its own top rule, with the button across its full width. On a desktop the pack stays in view beside the rows while you read. Nothing scrolls sideways at 320 pixels.