Command Hint Banner Block for React

After the first render the block reads the browser's user agent and looks for Mac, iPhone, iPad or iPod; if it finds none, the modifier cap changes from ⌘ to Ctrl. The server and the first paint always show ⌘, so there is no mismatch to repair. To see the Ctrl version, open the page in a browser on Windows or Linux, or use your developer tools' device emulation with a Windows user agent. The poster shows the Mac version because it's drawn from the server's output.

The drawn caps are hidden from assistive technology, and a visually hidden "Command K" or "Control K" takes their place in the sentence, so it reads "Press Command K to jump to any file, setting or command." The words follow the same platform check as the caps.

No. The block only tells visitors that the shortcut exists; your palette listens for the keys itself. If you want a click to open it too, change the link into a button that calls your palette's open function, or point the link at a page that lists every shortcut, which is what the demo does.

Edit HINT at the top of the file: the words before and after the caps (before, after), the letter (letter), the link's text and its destination. The two cap labels and their spoken names live in MODIFIERS. Keep the line near 60 characters with the link: it stays on one line on a desktop and two at most on a 320-pixel phone.

The sentence sits in a bdi and the caps are forced left-to-right, so ⌘ K never reads backwards; the link moves to the other side of the sentence with the rest of the layout. The block uses logical spacing only.