Scale Survey Multi-Action Banner Block for React

The cells are five buttons in a fieldset named "Rate from 1, not at all, to 5, extremely", and each button's name carries its meaning: "1 out of 5, not at all", "3 out of 5", "5 out of 5, extremely". The visible digit is part of the name, so voice control by "click 4" works. Because choosing sends the answer straight away, they are plain buttons rather than radios that need a separate submit.

The scale turns invisible and inert and a thank-you line takes its place in the same grid cell, so nothing moves. The line is a polite status that takes focus, so screen readers read "Thanks, 4 of 5. That helps the team decide what to fix first." and Tab carries on after the card. Send the number to your server in choose.

It is a ghost button with aria-expanded and aria-controls that opens a row in place (a CSS grid from 0fr to 1fr) with a labelled one-line field and an outline Send button, and moves focus into the field. Send closes the row and swaps the button for "Comment sent." Nothing is stored by the block: read the field in send.

Not in this block: a survey that takes one tap is meant to be answered once. To allow it, add a ghost button to the thank-you line that sets answer back to null; the scale then returns in the same cell.

The scale is the action, and five cells of equal weight keep any answer from looking preferred. The only other control, Send, is outline and appears only after an answer.

The scale keeps one row of five equal cells at the width of the card, each 44 pixels tall, with the two end labels under it, and the question wraps above. At 320 pixels nothing scrolls sideways. In a right-to-left layout the scale mirrors, so 1 sits at the start of the line; put dir="ltr" on the row of cells if you would rather the digits always run from small to large across the screen.