Feedback Form Dialog Block for React

So you can see it without a click. On load the card is a copy drawn in place at the foot of the page: a native dialog element that isn't modal and has no scrim, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Feedback button opens the real card as a Popover that is not modal, with Escape and focus return, and the copy stays closed until a reload. Both show the same NoteFields component and share the block's state, so a note started in the copy is there in the real one. In your app keep the card fixed at the page's foot, non-modal, and drop the copy: the "in-place" state and the dialog element inside the frame.

Because feedback is about the page behind it, and a person should be able to scroll, copy a code sample or look at the thing they are describing while they write. A non-modal card doesn't trap focus, doesn't dim the page and doesn't lock scrolling; Escape still closes it and focus goes back to the button. It is a Popover, which is non-modal, with the trigger passed through render.

The Textarea stops at 400, and the count beside its label, such as 212 / 400, is visible but hidden from screen readers, because a number that changes on every key would be read out on every key. A polite message speaks only at stages: 20 characters to go, 10 to go, and "Limit reached". The count is the length of the text as typed, not words. In your app enforce the same limit on your server.

"You may email me about this" turns on the email field under it. The field is always there, disabled while the box is empty, so ticking never moves the Send button. With the box ticked, sending checks the address and puts focus in the field if it is wrong; with it empty, no address is asked for and none is kept. The page it is about, "Page: Billing", is a typed chip: in your app fill it from the route.

Yes. The card is named by its title and described by its sentence, and a press of the button puts focus in the message. Arrow keys move between the three kinds; Tab goes through the message, the tick, the email and the buttons; Escape closes the card and returns focus to Feedback. An empty message names the problem under the field and puts focus back in it. One polite status message reports the result. The copy shown on load moves no focus; Escape inside it and Cancel close it and put focus on Feedback.

All of it. Nothing is sent or stored: Send feedback closes the card, the drawn pill reads "Thanks", and a polite message says "Kept in this demo only". In your app post the kind, the message, the page and the address from send, show your server's answer before you close the card, and keep what the person typed if the request fails. Never ask for more than the message.