Feedback Rating 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 Rate this chat 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 RateFields component and share the block's state, so a face pressed 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.

Emoji look different on every system and can't take the theme's colours, and a screen reader says what each one is called, not what it means on a scale. Each face is an inline SVG of three strokes in the current text colour, hidden from assistive technology, and its button carries the name: Very bad, Bad, Okay, Good, Great. The group is single-choice and never empties: pressing the chosen face again does nothing, so a recorded score can't be lost by accident. The words at the ends are visible, and the chosen word is read out.

The score is recorded the moment a face is pressed, not at Done, so a person who taps and closes has still answered. Closing says "Rating kept: Good" in a polite message, and the header button becomes Change rating. The comment is separate: it is kept when you press Done or Add comment, and the drawn chat then says "You rated this chat: Good, with a comment". Nothing is sent. In your app post the score from rate the moment it changes, and the comment from finish.

From the score, in promptOf: one or two asks what went wrong, three asks what would have helped, four or five asks what worked well. Before a face is chosen the box is disabled and says "Pick a face first", and its height never changes, so the faces don't move when it wakes. The button says "Choose a face first" until then and answers a press by saying so and putting focus on the faces.

Yes. The real dialog is named by its title and described by its sentence, focus stays inside until it closes, and Escape and the close button return focus to the button that opened it. Arrow keys move between faces and press one; Tab goes on to the comment. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on Rate this chat.

The copy shown on load docks to the foot of the frame as a bottom sheet, the faces and the comment above the button. The faces keep touch targets of 44 px, 48 from the small breakpoint, and stay in one row down to 320 px. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.