Reaction Picker Dialog Block for React

So you can see it without a click. On load the tray is a copy drawn in place under the message: a native non-modal dialog element with no scrim, so nothing is trapped or focused, and the page around the preview keeps working. The Add reaction button opens the real tray as a non-modal Popover that hangs from the button (Escape closes it and focus goes back to the button), and the copy stays closed until a reload. Both show the same Tray component and share the block's state. In your app keep the Popover, anchor it to the message's own React button, and drop the copy: the "in-place" state and the dialog element beside the message.

The reactions are one grid with one tab stop: Tab enters it and leaves it, and the arrows move across it, Left and Right along a row (reversed in a right-to-left layout), Up and Down between rows when More is open. Home and End go to the ends of the row, and with Control to the first and last reaction. The six in the quick row are always reachable; the other twelve are reachable only while More is open, and when it is closed they are unseen and skipped. Every reaction is a button named for what it is, with its pressed state, so a screen reader hears "Heart, pressed" on yours.

It toggles the reaction on the message, says "Added Heart" in a polite message and closes the tray, returning focus to the header button. The pill under the message is the others' count (typed) plus one for you, and yours is solid. Choosing it again, in a reopened tray where it shows as pressed, removes your one and says "Removed Heart". Reactions that nobody used have no pill, so the row only holds what exists, and its height is fixed so the thread never moves.

Eighteen tooltips would each need a delay, a hover and a place, and none of them work on touch. One line under the grid shows the name of the reaction under the pointer or the focus, and on yours it adds "press to take it back". The line is for sighted people; the buttons carry their own names for everyone else.

No. The reaction lives in this tab only, and the message in the drawn thread shows it. In your app send the toggle from pick, take the counts from the response (the server owns them) and keep the same pills. The icons are lucide icons in the current text colour; to use emoji or a custom set, replace the typed REACTIONS list and keep the buttons' names.

Yes. The tray is named Reactions, focus starts on its first reaction, and Escape closes it and returns focus to the header button. The trigger is passed to PopoverTrigger through render, and the popover is controlled with open and onOpenChange. More is a button with aria-expanded and aria-controls, and one polite status message reports what changed. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the header button.