Workspace Top Bar Banner Block for React

From WORKSPACES at the top of the file: an id, the initials for the avatar, the name and the visitor's role in it. Replace the list with your account's workspaces and call your own function in choose to switch the session. The line, the avatar and the badge are all drawn from the current item, so nothing else needs changing.

Tab reaches "Switch"; Enter, Space or the arrow keys open the menu, the arrow keys move between the three workspaces, typing jumps to one by its first letters, and Enter chooses it. Escape closes the menu and returns focus to the button. The list is a radio group, so the current workspace is marked and announced as selected. The exact details come from the library you chose.

All three versions of the line are drawn in the same grid cell: the current one, and an invisible, inert copy of each, so the cell is always as big as the biggest. The divider cell stays at the end and the strip stays one line on a desktop whichever workspace is chosen.

A polite status line, present from load and empty until the first choice, says "Switched to Lantern Row. Your role is Admin." The avatar is decoration and hidden from assistive technology; the badge reads "Your role: Owner" as part of the sentence.

Below 640 pixels the "Switch" button shrinks to its icon (its name is still "Switch workspace") so the sentence keeps the width, and the sentence and badge wrap to two lines at most at 320 pixels. The divider's plus mark is dropped on phones; the divider stays.

Yes. The avatar and sentence start at the right, the divider and the "Switch" cell sit at the left, and the menu opens on the logical end side. The sentence is isolated in a bdi, so a name with an ampersand keeps its order.