Focus State Kbd for React

Only when the shortcut sits inside something focusable, such as a button or a menu item, and then the ring belongs on that control, not on the cap. Drawing it on the cap, as here, is for illustrations that explain focus.

WCAG asks for a visible focus indicator on every focusable control, with enough contrast against its surroundings (3 to 1). A 2-pixel ring in the ring color with an offset, as here, meets that on the default themes.

Focus says which control will receive the keyboard; active says which key is held. The Focus State example draws a ring around the cap, the Active State example fills it with color, and a real interface can show both at once.

Only for keyboard focus: use focus-visible: classes on the control so a mouse click doesn't leave a ring behind. The components do this already.

Kbd caps aren't in the Tab order at all, and shouldn't be: they're labels. The controls that contain them follow the DOM order, so lay them out in reading order.

They announce the focused control, such as a button, along with its text, which includes the key caps inside it. For a dedicated shortcut hint, aria-keyshortcuts on the control tells assistive technology the shortcut too.