Hover State Kbd for React

When hovering does something: a cheat sheet that shows what the key does, or a key cap inside a control. A hover effect on a cap that does nothing suggests a click that never comes.

pointer-events-auto turns pointer events back on, since Kbd turns them off, hover:bg-accent hover:text-accent-foreground changes the colors, transition-colors fades between them and cursor-pointer shows the hand. Without pointer-events-auto, the hover classes never apply.

Here each cap changes on its own, which suits an explorable keyboard. If the shortcut as a whole is the target, put the hover on the control that contains the KbdGroup instead.

It mostly doesn't: a tap may trigger the hover style briefly or not at all. Don't put anything people need behind hover; show it by default or on tap.

If the hover is meant to explain the key, yes: wrap a focusable trigger in a Tooltip that says what the shortcut does. A Kbd on its own can't receive focus, so the tooltip needs a real control to attach to.

No. Keyboard and screen reader users never hover, and Kbd can't be focused. Anything a hover reveals must also be available on focus or in visible text, and a click action belongs on a Button.