Status FAQ Block for React

Edit its entry in SERVICES: label is the word shown and tone picks the dot (default for a service that's running normally, warning for degraded, info for maintenance). The summary in the header is counted from those entries, so it follows. The state is static: the block draws a state you set, and doesn't fetch one. To show live states, replace SERVICES with data from your status page.

No. Every badge pairs the dot with a word, and the dot is hidden from assistive technology. Only the exceptions are coloured: the normal state is a foreground dot, so a page with one problem shows one coloured dot.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all six, and the browser's find in page opens the answer that holds a match.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.

Each service in SERVICES has its question and answer: keep the answer to what the visitor should do, in one to three sentences. OPEN_QUESTION names the row that's open on load. One answer is open at a time. Add multiple to the Accordion to let several stay open.

The badge moves under the question, so a long question keeps its full width. The summary drops under the header's sentence, and the rows run from rail to rail. Nothing scrolls sideways at 320 pixels.