Testimonial Form Block for React

Nothing is sent today: submit checks the form, waits 600 ms and shows the thank-you. Replace that wait with your request. Post name, role, rating, quote and consent to your own endpoint, and call finish when it succeeds or show an error when it doesn't. Store the permission with the text, so you can always show when it was given.

It checks, in order, that there is a name, a rating from 1 to 5, a quote of at least 20 characters and that permission is on. Errors appear under their field in plain words with an alert icon, are read out when they appear, and focus moves to the first field that needs attention. Typing in a field clears its own error. The checks are in the validate function at the top of the file, so you can add your own, and the quote can't pass 280 characters because the field stops there; change LIMIT to move it.

Every field is held in state and the preview card reads the same state, so it can never disagree with the form. Until a field is filled in, the card shows a placeholder in its place, and its height is held by an unseen full-length quote so nothing around it moves as the text grows. From lg the card stays in view while the form scrolls. The preview isn't announced while typing, so screen reader users aren't interrupted; the thank-you and the sending state are announced politely.

Yes. Every field has a visible label, the rating is a group of five labelled radio buttons under a legend ("Your rating") that you can also drive with the arrow keys, and the permission switch is named. The character counter is tied to the quote field, so it is read after the label. Errors are tied to their fields and announced; the fields are read-only while sending so focus stays where it is; and after sending, focus moves to the thank-you heading. "Write another" clears the form and puts focus back on its heading. Stars and the switch use the text colour, so the Shine Button is the only primary control.

Yes. The two columns, the labels, the divider between them and the frame's marks follow the reading direction. The counter ("94 of 280 characters") and the quote sit in a bdi, so numbers and quotation marks keep their place.

Below lg the page column is one column: the header, then the preview, then the form, so the card is on the first screen and shows what the form will make. The name and role fields stack, and the Shine Button spans the width. It reads at 320px with no horizontal scroll. The quote field has a fixed height, so a long quote scrolls inside it instead of stretching the page.