# Flux 2.0 — Keyboard shortcut

A key or key combination, shown inline, in a control, or in a list of shortcuts.

Reference: https://flux.kaptio.com/components/kbd/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Tells people which keys do something. It is the kbd element in mono on layer-02 with a hairline. Write shortcuts with Apple symbols and add data-flux-keys: on other platforms flux-components.js rewrites ⌘ as Ctrl and ⌥ as Alt, so the hint matches the keyboard in front of the reader.

## Do not use it when
Not for a shortcut that does not exist; a hint promises behaviour. Not for code or identifiers; use mono text or code. Not as a button.

## Markup

### Inline

<p>Press <kbd class="flux-kbd" data-flux-keys>⌘K</kbd> to search, or <kbd class="flux-kbd">?</kbd> to see every shortcut.</p>

### In a button

<button class="flux-button flux-button--secondary" type="button" aria-keyshortcuts="Meta+S">Save draft <kbd class="flux-kbd" data-flux-keys aria-hidden="true">⌘S</kbd></button>

### Shortcut list

<dl class="flux-shortcuts">
  <div><dt>Search</dt><dd><kbd class="flux-kbd" data-flux-keys>⌘K</kbd></dd></div>
  <div><dt>Save changes</dt><dd><kbd class="flux-kbd" data-flux-keys>⌘S</kbd></dd></div>
  <div><dt>Next record</dt><dd><kbd class="flux-kbd">J</kbd></dd></div>
  <div><dt>Previous record</dt><dd><kbd class="flux-kbd">K</kbd></dd></div>
  <div><dt>Show shortcuts</dt><dd><kbd class="flux-kbd">?</kbd></dd></div>
</dl>

## API
- kbd (element): The native element for keyboard input.
- flux-kbd (class): On the kbd. Inside a menu item or command option it aligns to the end.
- data-flux-keys (attribute): Rewrites ⌘ as Ctrl, ⌥ as Alt, ⌃ as Ctrl and ⇧ as Shift on platforms other than Apple’s.
- flux-shortcuts (class): On a dl listing shortcuts, one div per action.
- aria-keyshortcuts (attribute): On the control the shortcut triggers, e.g. Meta+S.

## Accessibility
- Declare a control’s shortcut with aria-keyshortcuts and hide the visual hint inside it, so the accessible name stays “Save draft”.
- Never bind a single printable key without a way to turn it off or remap it (WCAG 2.1.4); J and K only apply when focus is not in a field.

## Keyboard
- None: A hint is not focusable. The shortcut itself is handled by the product.

## Tokens
- --flux-kbd-bg | -border | -text | -padding-x | -gap

## Do
- Show the shortcut where the action is, in its menu item or button.
- Keep one list of every shortcut, opened with ?.

## Do not
- Do not uppercase keys or letter-space them; a kbd is not a structural label.
- Do not override a browser or screen-reader shortcut.