Animated Counter FAQ Block for React

From TOPICS, the list of topics at the foot of the start column: TOTAL is the sum of their counts, so the big figure and the list can't disagree. Change a count and the total follows. Label it with a period ("this week"), because a bare number reads as a claim.

The Counting Number counts up once when the page loads, from zero to the total, slowing as it settles. A copy of the final number sits invisibly in the same grid cell, so the figure takes its final width from the first frame and nothing moves while it counts. Screen readers read the final value, never the numbers in between. With reduced motion the figure shows its final value at once, with no count.

Edit QUESTIONS: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all seven, 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.

Below the lg breakpoint the title, sentence and figure stack above the questions (the figure drops from text-7xl to text-6xl), the rows run from rail to rail under a rule with + marks, and the topic list follows the last question. Nothing scrolls sideways at 320 pixels.