Reading Progress FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The header and the band's words say "Eight", so change them if you add or remove a question: the count and the ring's percentage come from the list's length. The final Shine Button is a link (href="#"): point it at your quiz or sign-off page. The button renders the link it's given with render, with nativeButton={false}.

A question counts the first time it opens, including the one that is open when the page loads, and closing it doesn't undo it. The ring, the "of 8" count and the checks all come from one list of ids in state; a reload starts again from OPEN_QUESTION. To keep progress, write that list to storage or your own endpoint and read it back in an effect after mount. The Accordion takes multiple, so any number of rows stay open.

Each question is a button inside its own h3 under the section's h2, and it begins with "Read:" for screen readers once you've opened it. The ring is decorative; the words beside it are a polite status that reads "3 of 8 read" and, at the end, "You're all caught up". When the Shine Button appears it takes its place after the band in the reading order. Tab moves between the questions; the arrow keys don't move between questions on this base.

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

The header and the band fade up once when the page loads, and the ring's stroke eases to its new length each time you open a question. With reduced motion the entrance is off and the ring jumps to the new length. The answers open and close at once, with no height animation.