Round Tabs Debate Blog Block for React

Edit OPENING, REBUTTAL and CLOSING at the top of the file. Each round has a pro and a con argument (a title and three points), and WRITERS holds the two writers' names, roles and the word each cover sets. BASE_VOTES holds the example counts before a reader votes: replace them with your own numbers, or send the vote to your server in choose.

The two vote buttons are a single-choice toggle group that may be empty. Pressing one adds one to its side; pressing the pressed one takes it back; pressing the other moves your vote across. The shares are worked out from the two counts, the first rounded and the second what remains, so they always add to 100, and the bar, the counts and the percentages all come from the same numbers. A polite status line says what changed.

Each round is drawn twice. The live round sits in a grid cell, and an unseen copy of all three (hidden from assistive technology and the keyboard) sits in the same cell, so the cell is as tall as the tallest round. Switching only changes what shows on top.

The tabs are a labelled tab list: Tab reaches the selected tab, the arrow keys move between rounds, and Home and End jump to the first and last. The two arguments are a list under the round's name, each with its writer, a heading and three points. The vote buttons are a labelled toggle group: Tab reaches it, the arrows move between the two buttons and Space or Enter presses one. The bar is decoration; the counts and percentages are text.

The three tabs fit one line. In a round the two arguments stack, For first, with a hairline between them, and the poll's buttons sit under its title. Nothing scrolls sideways at 320 pixels.

Yes. The tabs, the two columns and their divider mirror, so For stays first. The covers and the bar are artwork or a chart and keep their own direction; the counts and percentages are isolated with bdi.