Report Content 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 Report post 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 ReportBody component and share the block's state, so a reason picked 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.

The three panes, the reasons, the details and what happens next, sit in one grid cell: the live one is in view and the others stay in place unseen and inert, so the dialog is as tall as the tallest pane at every width and never moves between steps. One Shine Button does all three jobs, labelled Continue, Send report and Done, and the button beside it reads Cancel, Back and Undo report, so focus never leaves the footer's two buttons; each new pane's heading takes focus so a screen reader starts at it. Continue with no reason says "Pick a reason first." and focuses the reasons.

The details are optional, except for Something else, which needs a few words (the quiet button explains and focuses the field if you send without them). The field stops at 300 characters with a count that is hidden from assistive technology. The switch mutes the author for you, in this tab only, and the last pane and the drawn post both say so. The line under the switch tells the author that a post was reported and never who reported it; for Self-harm it says to contact local emergency services if someone is in danger.

Only what the demo can show: a typed reference (KG-4821), the day a moderator reads it, two days after the fixed AS_OF date so it never ages, that the outcome comes in your inbox quoting the reference, and whether the author is muted. Undo report takes everything back and returns to the first step with a polite message; Done closes the dialog and the header button then reads View report, which reopens the dialog on that pane.

No. A polite message says "Report KG-4821 sent in this demo" and "Nothing was reported to anyone". In your app send { reason, details, mute } from advance, show the reference your server returns, and keep the third pane. Keep the author's name out of the message to the author, and handle the Self-harm reason with your own safeguards; the copy here is an example.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the reasons 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 reasons are native radio buttons in a radio group, the switch is named for what it does, each problem is announced as an alert, and one polite status message reports what changed. 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.