Comment Posted Toast Success Block for React

Nothing is sent. The page, the three comments and the people are typed constants, a posted comment lives in the page's state, and the toast says no one was notified. To wire it, post to your comments endpoint, append what it returns, and make Undo delete the comment (or hold the send for a few seconds) before notifying anyone.

A portalled toaster sits at the corner of the whole window, outside the frame, and would not show in the preview. Here it is drawn at the foot of the stage so the block shows both states. It is the block's one live region, so a screen reader hears "Comment posted" once. In your app, raise it through your toaster with the same two actions.

It removes the last comment this person posted, swaps the toast to "Comment removed" with a Dismiss button, and returns focus to the composer. The thread never changes height: it scrolls inside a region of fixed size.

The composer refuses an empty post in words beside the button, keeps the focus in the field and adds no toast. The hint line returns once you type.

Tab runs through the thread region, the composer and Post, then to the toast's buttons. The toast takes no focus when it appears. View thread moves focus to the new comment, and the thread region scrolls with the arrow keys.

The drawn page goes and the thread fills the stage; the toast spans its width above the composer.