Feedback Request Notification Block for React

The block remembers the choice for the tab with sessionStorage, read once after the page loads: after Send answer it stores the rating, after Maybe later, Close or Escape it stores that you put it off, and from then on the card stays away until Ask again clears the key. A line under the frame says what is remembered. If the browser blocks storage the card still works and the choice lives in the page until a reload. Nothing pops up on a timer: the card is the preview's open state, and in your app you show it when your own rule says so.

promptOf(stars) returns the label: "Anything to add?" before a rating, "What went wrong?" for one to three stars and "What worked well?" from four. The field is always there, so choosing a rating never moves the buttons; it only enables the field and changes its label. Send answer stays quiet until a rating is chosen, and pressing it then says to choose one and moves focus to the stars.

Tab reaches the stars, and the arrow keys move along them and set the rating; each star is named with its number and word. The word beside the stars says the rating in text, and the status line reads the new rating and the question that follows.

The rating and the comment are never sent: Send answer stores the rating in the tab and shows the thank-you. In your app, post the rating and comment to your API in the submit handler, show an error in the status line if it fails and only then remember the answer; store the memory where it matches your rule (a tab, a device, or the account).

All three close the card, remember that you put it off and move focus to Ask again, the one control that brings it back. After an answer, Close and Escape only close the thank-you, keeping the rating. Ask again is quiet while the card is showing and says so if pressed.

The card spans the width of the frame minus a margin and sits at its foot, over the drawn page; its parts keep their sizes in every state, so the thank-you replaces the form in the same space.