Print-Friendly FAQ Block for React

The button calls window.print(), and the page's print: styles do the rest. The accordion, the spine's lines, the band's rule, the button and its note are hidden; a plain list of every question with its answer, hidden on screen, appears in their place; each entry avoids breaking across pages; and a one-line footnote appears at the foot. Colours are set with three variables on the section (--foreground, --muted-foreground, --border), so a dark theme still prints black on white. Browsers leave out background colours by default, and nothing here relies on one.

Because it works the same on every library and can't be broken by how an accordion hides its closed answers: a closed panel is hidden by the browser's own hidden attribute, which a print style can't reliably undo. The list is a dl that's display: none on screen, so screen readers skip it and the page shows each answer once. It's built from the same QUESTIONS array as the rows, so the two can't drift apart. The rows also keep every closed answer in the markup as hidden="until-found" (hiddenUntilFound).

Yes. It counts the questions from the same QUESTIONS array the rows are built from, so adding or removing one updates "Prints all 8 answers". It doesn't promise a page count, because that depends on the browser, the paper and the reader's font size.

Each question is a button inside its own h3 under the section's h2, and the print button is a real button with its text. Tab moves between the print button and the questions; Enter or Space opens and closes a row, and the button says whether it's expanded. Tab alone moves between questions on this library: its accordion doesn't take arrow keys.

It's an outline Button with a printer icon. Printing is a convenience, not the block's main call to action, so it keeps the primary colour for your own sign-up or booking button elsewhere on the page.

Below the md breakpoint the header stacks, the print button spans the full width under the text, and the rows run rail to rail. Many phones can't print directly; there the browser's share sheet usually offers "Print" or "Save as PDF".