Feedback Survey Onboarding Block for React

So you can see it without a click. On load the popover is a copy drawn in place under the tab: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The tab opens the real Popover, non-modal, with Escape and focus returning to the tab, and the copy stays closed until a reload. Both show the same SurveyBody and the same state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and its Escape effect.

The text box is always in the popover, switched off until Other is picked, so the popover has the same height whichever answer is chosen. With Other picked, Send asks for a few words if the box is nearly empty and puts focus in it; the typed text is also quoted in the sentence.

The sentence under the box says what Askfield will do with the picked answer. A hidden polite status says the same when a pick changes it, and says “Thanks. Nothing was sent in this demo.” after Send, “Pick one to send.” when nothing is picked, and when the popover closes. The tab's name follows: Quick question, then Answered.

Everything: Send keeps the answer in the block's state and says nothing was sent. In your app post source (and the text when it is other) to your server where send says so, close the popover when it succeeds and keep the tab as Answered. The typed “what we do with it” sentences are copy for the preview; replace them with what your product really does.

Press the tab with Enter or Space; focus moves to the answers, where the arrow keys move and pick. Tab goes on to the box (when Other is picked), Not now and Send. Escape closes the popover and returns focus to the tab, as do Not now and a successful Send.

The popover is the width of the screen less a margin and hangs under the tab, with the answers first so the first one is on screen without scrolling. The drawn page behind it shrinks to its bar and two rows.