Votes FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question, its answer, a meta line ("Imports, 38 replies") and base, the score before your vote. 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.

No. Your votes live in the component's state, keyed by question, so a reload clears them and nobody else sees them. To store them, call your own endpoint from the cast function: it already knows the question and whether the vote went up, down or was taken back.

It's base plus your vote: one more with an up arrow, one fewer with a down arrow, so swapping from up to down moves the score by two. The score is wrapped in bdi so a right-to-left layout keeps the digits in order.

Each question is a button inside its own h3 under the section's h2. The rail is a group named "Vote on:" and the question, and its two arrows are toggle buttons named Upvote and Downvote that say whether they're pressed. In the Tab order they follow their own question. A polite status line reads "Upvoted. Score 143." after each press. Tab moves between the questions and the arrows; 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 six, and the browser's find in page opens the answer that holds a match.

The rail stays at the start of every row, narrower, and the question and its meta line wrap beside it with the chevron at the end. The rows keep a minimum height of six rem so the arrows and the score always fit, and nothing scrolls sideways at 320 pixels.