Connection Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over the drawn client, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the connection you chose, the results of the tests and what you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

It is not. Pressing Test, or Alt and T on the highlighted row, starts a 900 ms wait in which the row is aria-busy and reads Testing… beside a spinner (which stops under reduced motion), then shows the connection's typed result. Only one test runs at a time, and pressing it again while one runs says which. The status line and, inside the real dialog, the menu's own live region say "Simulated. Nothing connected." Nothing opens a socket. In your app test is where you would ping the host and time it.

As words in an outline badge: Connected for the connection in use, Idle for one that answers, Unreachable for one that does not. The state follows the choice, so after you switch, the old connection reads Idle and the new one Connected. A tick marks the current row and screen readers hear "Current connection". An unreachable connection cannot be switched to, and the status line says so instead of pretending.

Browsers keep Ctrl or Cmd with T for a new tab and never hand it to a page, so a shortcut shown with those keys could not work. Alt and T (Option and T on a Mac) is read from the key's physical position, so Option's special characters do not matter, and the foot shows it only on screens where it fits. It tests the highlighted row; if none is highlighted yet, the status line says to move to one first.

Yes. Type to search by name, engine, host or database, the arrow keys move, Enter switches to the highlighted connection, Alt and T tests it and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The Test button is for the pointer and is skipped by the tab order, so a row has one stop. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the host drops out of each row's second line, leaving the database, and the key hints go while the count stays. The Test button stays a touch target on every row. The real dialog keeps the Command dialog's own phone layout.