Feedback Prompt Multi-Action Banner Block for React

They are two buttons with aria-pressed, inside a fieldset named by the heading, so a screen reader says "Useful, toggle button, pressed". Pressing the pressed one releases it. Because they are separate buttons, a vote can be taken back without a dedicated control, and both are plain Tab stops.

The area is a row in a CSS grid that eases from 0fr to 1fr, so the card grows by about 170 pixels over 300 ms; the content below the block moves with it, since the card is part of the page flow. Closed, the area is invisible and inert, so its textarea and buttons are out of the tab order and out of the accessibility tree. With reduced motion it opens at once.

It sends the vote without a comment: the area closes and the thank-you line says "Thanks, your vote is counted." Send feedback sends the vote with the note and says "Thanks, your note is with the team." (or the vote line when the box is empty). Neither is wired to a server: put your request in send and skip, using vote and comment.

The buttons are inert once sent, so focus moves to the thank-you line, which is a polite status that screen readers read out. The next Tab carries on after the card. Opening the area does not move focus: the person who voted is still on the vote button and can Tab into the comment.

A vote is a choice, not the page's main action, so the buttons are outline and turn foreground when pressed. Send feedback is the one forward action, and only it is a Shine Button.

The votes drop under the text, indented to line up with it, and the comment area's buttons stack at full width. With the area open the card is about 400 pixels tall at 320 pixels wide, and nothing scrolls sideways. In a right-to-left layout everything mirrors.