Voting Comments Block for React Aria

Edit QUESTION, ASKER and ANSWERS. An answer has an id, the author's handle, an ISO at, its body and the votes it has before yours. The ordering, the counts and the accepted state are worked out from that list. Handles are made up here; use your members' real display names and keep them in a bdi so a right-to-left name does not scramble the line.

Order follows the typed votes, not your own, so pressing a toggle changes one number and nothing else. That keeps the page still, and means two people looking at the same answers see the same order. If you want live reordering, sort by the total including yours in orderedOf, and hold the heights of the rows so nothing jumps while a finger is on it.

The Asking as switch stands for "I am the person who asked". With it on, each answer shows Accept; the accepted one is pressed, moves to the top and states "Accepted by the asker". Pressing Accept on the same answer again takes it back, and accepting another moves it. Focus stays on the button you pressed, even though its row moves. In a real app, show the control only to the asker and check that on the server.

The votes, the accepted answer and the sort. The status line says what changed, and nothing is saved or sent. To make it real, send the vote from the toggle's handler, store at most one vote per person and answer, and return the new totals; the toggle shows the pressed state from the server's answer.

Each vote toggle is named after its answer ("Upvote the answer by quietheron") and reports whether it is pressed; the count is part of its name so it is read as "41 votes". Accepted is written in words with a check, not shown by colour. The answers are an ordered list, the sort is a labelled group and the status line is read out politely.

The switch drops under the sentence and the sort control fills the width of its band. Each answer keeps its vote toggle at the start with a target of at least 44 pixels, and the Accept button sits under the words.