Create 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 Create poll 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 PollFields component and share the block's state, so a question typed 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.

Each option is an input named for its place ("Option 3 of 4"). Add option adds one and moves focus into it; Remove takes one out and moves focus to the neighbour. The most is six and the fewest is two: at the limit the button stays in place and says why in a polite message ("A poll needs at least two options.", "6 options is the most a poll takes.") instead of disappearing. The list is a fixed height and scrolls inside itself, so adding a fifth or a sixth option never moves the dialog.

It is drawn from the same state as the form, on every keystroke: the question, the options that are filled in, a circle for one answer or a square once the switch is on, "Choose one." or "Choose any.", and the closing day. The closing day is the fixed AS_OF plus the length you picked (1 day, 3 days or 1 week), so with the preview's date it reads Mon 12 Oct for three days. The preview list is also a fixed height, and it is a tab stop so a keyboard can scroll it. On a phone the preview folds into a Preview the poll button under the form.

A question, and at least two options that are filled in and different from each other. Until then the button is quiet but still answers a press: the reason is on the line under the form ("Add a question to publish.", "Add one more option to publish.", "Two options are the same."), pressing says it in a polite message and puts focus on the field that needs it. The question stops at 120 characters, with a visible count and a spoken one only at 20, 10 and 0 left.

No. Publish poll puts the poll card in the drawn thread, closes the dialog and says "Nothing was posted in this demo" in a polite message. The dialog goes back to its opening state each time it closes. In your app post { question, choices, multiple, closes } from publish, let the server pick the closing time, and keep the same preview. The options and the question are typed here as examples.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the question, 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 switch is named for what it does, the length is a select named Open for, the preview option list is labelled, and one polite status message reports every change. 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.