Popularity Bars FAQ Block for React

Edit ENTRIES at the top of the file: each entry is an id, the question, its answer and reads, a plain number for the quarter. They can be in any order: the block sorts them, most read first, and MOST_READS (the largest) sets the bar's full length. To use real figures, fetch the numbers from your analytics on the server and pass them in as reads; the label, the order and the bars follow.

The number is the information and the bar is a glance: it's hidden from screen readers, because the count beside it says the same thing in words. Each bar is as long as its count is against the top row, so the first is always full length. The count is formatted by readsOf ("1.9k", or the whole number under a thousand) and wrapped in bdi, so a right-to-left layout keeps it in reading order.

Each question is a button inside its own h3 under the section's h2, and its name includes the count ("How hot should the water be? 1.9k reads"), so a screen reader hears the popularity with the question. One answer is open at a time. 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 six, and the browser's find in page opens the answer that holds a match.

The count tucks under the question and its bar; the column header keeps "Most read first" and drops "Reads this quarter". The rows run from rail to rail, and nothing scrolls sideways at 320 pixels.

The header and the rows fade up once when the page loads, with CSS transitions. With reduced motion the entrance is off. The answers open and close at once, with no height animation.