Quick Poll Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Vote button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PollBody component and share the block's state, so a choice made in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

So the answer isn't swayed by the count, and so the rows are the whole question. The rows and the results sit in one grid cell: the live one is in view and the other stays in place unseen, so the dialog is exactly as tall before and after the vote. Pressing Vote with nothing chosen says "Pick a place to vote." and puts focus on the rows; after a vote, focus goes to the results, which are named for the question.

The place counts are typed, twelve votes in all, and your vote adds one to the place you chose, so the total is 13. Each share is the count over the total, and the four shares are rounded together by the largest-remainder rule, so they always add up to 100 (39, 23, 23 and 15 for Tacos, Noodles, Pizza and Salads). The count is written as words with the share ("5 votes, 39%"), the bar is a decoration with the same figures beside it, and in a right-to-left layout the bar still grows from the left. When two places tie for the lead, the line says so instead of naming one.

It takes your vote out of the counts, so they go back to the typed twelve, and shows the rows again with your choice still selected, with a polite message that the vote was taken back. After you vote, the header button reads View results and opens the dialog on the results. Done closes the dialog and returns focus to that button.

No. The vote lives in this tab only: it is added to typed counts and a polite message says "Voted for Tacos in this demo" and "Nothing was sent". The drawn agenda row changes to "You voted for Tacos". In your app send the vote from submit, take the counts from the response (the server owns the tally), and keep the same swap. The closing day is worked out from two fixed dates, AS_OF and CLOSES, so replace them with your poll's own.

Yes. The real dialog is named by its question and described by its sentence, focus starts on the rows and stays inside until it closes, and Escape, Cancel and the close button all return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The rows are native radio buttons in a radio group, so the arrow keys choose, the problem is announced as an alert, and one polite status message reports the result. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.