Kbd
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/kbd.jsonIt is a <kbd> element, so a screen reader announces it as keyboard input
rather than reading a stray capital letter.
The platform substitution is the useful part. A shortcut written Ctrl+K
is simply wrong on a Mac, where it is ⌘K — and every product either
hard-codes one of them or writes the branch again.
<Kbd keys="Mod+K" /><Kbd keys="G D" /><Kbd keys={useCommandKeys('search')[0]} />It reads the notation a command is bound with —
the line’s own — so the hint and the binding are
one string and cannot disagree. Give it the keys a
command answers to now, from useCommandKeys, and a rebinding moves the hint
with the key.
Mod is command on Apple platforms and control everywhere else. Ctrl, Alt
and Shift substitute the same way; Enter, Escape and the arrows are
written as symbols on every platform.
A sequence is drawn as its steps with › between them, so G-then-D does
not read as G-with-D. A mark rather than a word: a word would be English the
product cannot translate.
A shortcut it cannot read throws rather than drawing a guess: a hint that shows the wrong key is worse than none.
Props
Read from the types in ui/kbd.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
keys | string | A shortcut in the line's notation - Mod+K, G D, ?. Given this, the component draws each key under this platform's own name. Without it, the children are the key. |
And every prop of React's HTMLAttributes<HTMLElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 5 rules applied and passed, and none failed. The accessibility report has every item.
Left to a person, where axe could not decide: color-contrast.
History
Each release that changed ui/kbd.tsx - the file a product copies - newest first.