Error Feedback Form Block for React

Nothing leaves the page. Send feedback waits under a spinner for less than a second, then shows "Thanks, that helps" with the chip you chose, your words and the email, and a polite status says nothing was sent; Send another brings back an empty form and moves focus to the message. To wire it for real, post the chip, the message, the email and the error reference to your support inbox or issue tracker where the code says so, keep the busy state until it answers, and show its error under the field it concerns if it fails.

A chip puts a starting sentence in the message ("I was saving my changes and ") so the visitor only has to finish it. It never replaces words the visitor wrote: a chip fills the message only while it's empty or still holds just a starting sentence, so changing chips before typing swaps the sentence and changing them after leaves the message alone. Pressing the chosen chip again clears the choice. The starting words don't count toward the ten characters, so a message can't pass by choosing a chip and sending.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing Send feedback with an empty or too short message, or an email that isn't an address, writes one sentence under that field and moves focus to the first problem. The email is optional: empty is fine, a half-typed address isn't. Every field keeps a line for its problem even when there is none, so a problem never pushes the page.

REFERENCE is a typed constant, so the block reads the same on the server and in every browser. In your app, generate one id per failure, log it with the stack trace and send it with the feedback, so a message can be matched to the failure. Showing it under the button tells the visitor it will travel with their note.

The chips scroll sideways inside their own row instead of wrapping, the form fills the width and Send feedback stays on the first screen, full width. The textarea keeps its height, so a long message never shoves the button down the page.

The chips are a labelled group of toggle buttons: arrow keys move between them and Space or Enter presses one. Each field has a real label, its problem is tied to it and read out when focus lands there, and after sending, focus moves to the thank-you heading while a polite status says what happened. Pressed state is a filled chip and a word to assistive technology, never only a color.