Review Submit 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 Write a review 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 ReviewFields component and share the block's state, so stars set in the copy are 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 overall is the mean of the three ratings, in whole tenths so there is no floating-point drift (5, 4 and 4 make 13 over 3, so 4.3), and it shows only once all three are in; until then the tile says to rate all three. The read-only row of stars next to it rounds to the nearest half star, so 4.3 shows four and a half; the number is the exact figure and the stars are the picture. Each rating row is a group named for its criterion, and its stars are moved with the arrow keys; they are the foreground colour, not the warning tone the Rating defaults to.

The review needs 40 characters (and stops at 500). The bar fills as you type and the words beside it say "Add 24 more characters" and then "Long enough", with a polite message once when the limit is crossed. Writing tips swaps two short tips into the line under the form, where the missing-requirements line normally is, so opening it never moves the dialog; the line comes back when you close it. Title, brew and buy again are optional.

All three ratings and the length. Until then the button is quiet but still answers a press: the reason is on the line under the form ("Rate the aroma to post.", "Add 24 more characters to post."), pressing says it in a polite message and puts focus on the first stars or the review field that needs it. Posting closes the dialog and the drawn listing's rating row gains "Your review: 4.3 (pending, in this demo)". The header button then reads Edit review and the dialog reopens on what you posted; Cancel and Escape drop anything you changed.

No. A polite message says "Review posted for the Sencha tin, in this demo" and "Nothing was sent". In your app send the three scores, the choices and the text from post, and let the server compute and store the overall: the client's mean is for display. Say that a review is pending if you moderate, as here, and keep photos out unless you have a place to put them.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first stars, 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 brew choices are a group you move through with the arrow keys, Writing tips is a button with aria-expanded and aria-controls, 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. On a phone the dialog's body scrolls under a footer that stays in view.