Quick Actions Pill Banner Block for React

The dock is one tab stop: Tab lands on the button you last used (the first one at the start), and the arrow keys move between the four buttons, wrapping at the ends, with Home and End jumping to the first and last. In a right-to-left layout the arrows follow the reading direction. Each button is a real button, so Enter and Space press it, and each has aria-keyshortcuts.

Only while focus is in the dock. A page-wide shortcut such as / or S would fight with your search box, your forms and the browser, so this block scopes them to the toolbar on purpose. To make them global, move the key check from the toolbar's onKeyDown into a keydown listener on the document in an effect, and ignore events from inputs, selects, textareas and anything editable.

Each button runs press with its action's id: New page, Search and Share confirm in place, Share also copies the page's link with navigator.clipboard, and Notifications sets the unread count to 0. Replace the body of press with your own calls (open your search dialog, create the page, open the share sheet) and keep the finish call: it shows the check and speaks the result. The labels and the messages are in the ACTIONS list at the top of the file.

Tooltips open on hover and keyboard focus, which touch screens don't have, so the dock never depends on them: every button has an accessible name from its label ("Notifications, 3 unread"), and the result of a press is announced and shown as a check. If your audience is mostly on phones, keep the dock to the actions that need no explanation.

The dock renders in flow so the preview and a stack of blocks can see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto w-fit to the pill (the div that holds the shell) and remove the block's wrapper padding if the dock lives on its own. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].

Set UNREAD at the top of the file, or pass your count in as the initial value of the unread state. The badge is a small foreground-coloured circle, hidden at 0, and the button's name follows it ("Notifications, 3 unread", then "Notifications").