Ranked Winners Team Block for React

Edit PROJECTS at the top of the file: a name, a sentence, a team, a stack and the judges' score. The rows are sorted by score, best first, and the place numerals (1st, 2nd, 3rd) come from that order, so you never type a place. OUT_OF is the top score. The header counts the people from the teams of the projects and the people's choice.

Nothing leaves the page: the toggle adds one to the count in this demo and says so ("counted in this demo"); pressing it again takes the vote back. To collect real votes, send the new state to your server in the toggle's change handler and start the count from what it returns.

It is a toggle button, so Space and Enter press it and it says whether it is pressed. Its name is "Vote for Afterparty map" plus the count, and a polite line under it reads the new total once. Pressed, the button inverts to the foreground colour.

Because the order is the result. The list is an ol named "Judged places", each place's numeral is followed by the hidden word "place", and each project is a heading, so screen reader users can jump between them.

Below sm the numeral sits above the project's name and the rest of the row stacks under it: the team, then the score and the stack chips. The vote button sits under the people's-choice text. Nothing scrolls sideways at 320 pixels.

Yes. The rows follow the page direction, the ordinals and counts are wrapped in bdi, and the avatars overlap from the start edge.