---
title: "Keyboard shortcut"
description: "Shows the keys that perform a command, as keys or as text, in the modifier symbols and names of the keyboard the person is using, and reads them aloud by name."
url: "https://tanrei.chnotchy.com/components/keyboard-shortcut/"
last_updated: 2026-10-23T21:17:12.000Z
---

# Keyboard shortcut

> Shows the keys that perform a command, as keys or as text, in the modifier symbols and names of the keyboard the person is using, and reads them aloud by name.

## Overview

A keyboard shortcut shows the keys that perform a command: drawn as keycaps, or as plain text beside a command’s name, at a small or medium size. Keys are written in neutral names — `mod`, `shift`, `k` — and drawn in the convention of the keyboard the person is using: Apple’s symbols (⇧⌘K) or the standard names (Ctrl+Shift+K). A product can set the convention for a region, or leave it to the platform. A shortcut of several chords in a row (Ctrl+K Ctrl+C) is one sequence.

Its keys are drawn for sight only: assistive technology reads the `label` a product gives — the shortcut in your own words — and, without one, the notation of `aria-keyshortcuts` (`Meta+Shift+K`). Tanrei has no names for keys in any language. It shows the keys and nothing more: it takes no focus and no input, and it does not make the keys work. Your product binds them.

Three components draw a shortcut with it, from a `shortcut` prop of their own: the [menu](https://tanrei.chnotchy.com/components/menu/) at the end of an item’s row, a plain [tooltip](https://tanrei.chnotchy.com/components/tooltip/) after its text, and the [search](https://tanrei.chnotchy.com/components/search/) as a hint in its bar or trigger. Use those props there, not an element of your own: the host draws the keys in its own text style and exposes them as the control’s keyboard shortcut.

### Usage

`keys` holds one chord per string, pressed in order. A chord is key names joined by `+`, and names ignore case.

- **Modifiers:** `mod` (Command on Apple platforms, Control elsewhere), `ctrl`, `alt`, `shift`.
- **Named keys:** `enter`, `escape`, `tab`, `backspace`, `delete`, `space`, `arrow-up`, `arrow-down`, `arrow-left`, `arrow-right`, `home`, `end`, `page-up`, `page-down`, `caps-lock`, `f1` to `f24`, and `plus` for the + key.
- **Any other single character** is that character’s key: `k`, `/`, `,`.

On the web the `keys` attribute holds the chords separated by spaces (`keys="mod+k mod+c"`), and the property is an array. SwiftUI, Compose, Flutter and React Native have not implemented the component yet. Until they do, their menus write a shortcut in the item’s trailing text, as the [menu](https://tanrei.chnotchy.com/components/menu/) page shows.

**Web**

```html
<!-- Small sits in a line of body text without making it taller. -->
<p>Search with <tanrei-keyboard-shortcut keys="mod+k" label="Command or Control and K" size="small"></tanrei-keyboard-shortcut>.</p>

<!-- Two chords pressed one after the other. -->
<tanrei-keyboard-shortcut keys="mod+k mod+c" label="Command or Control and K, then Command or Control and C"></tanrei-keyboard-shortcut>

<!-- Plain text, read in your product's language. -->
<tanrei-keyboard-shortcut keys="mod+shift+k" variant="plain" label="Befehl Umschalt K"></tanrei-keyboard-shortcut>

<!-- A region written for one keyboard, whatever the person's platform. -->
<section data-tanrei-keyboard-convention="standard">
  <tanrei-keyboard-shortcut keys="mod+s" label="Control S"></tanrei-keyboard-shortcut>
</section>

<script type="module">
  import '@tanrei/web/components/keyboard-shortcut';
  // The element only shows the keys. Bind them yourself, and say so on the control they belong to.
  const shown = document.querySelector('tanrei-keyboard-shortcut');
  searchButton.setAttribute('aria-keyshortcuts', shown.ariaKeyShortcuts); // "Meta+K" or "Control+K"
</script>
```

**React**

```tsx
import { KeyboardShortcut } from '@tanrei/react';

<p>Search with <KeyboardShortcut keys={['mod+k']} label="Command or Control and K" size="small" />.</p>

<KeyboardShortcut keys={['mod+k', 'mod+c']} label="Command or Control and K, then Command or Control and C" />

<KeyboardShortcut keys={['mod+shift+k']} variant="plain" label="Befehl Umschalt K" />

// A region written for one keyboard, whatever the person's platform.
<section data-tanrei-keyboard-convention="standard">
  <KeyboardShortcut keys={['mod+s']} label="Control S" />
</section>
```

## Specs

- Category: Communication
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/keyboard-shortcut/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/keyboard-shortcut.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-keyboard-shortcut>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/keyboard-shortcut`).
- React: `KeyboardShortcut` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-keyboard-shortcut` | lagging |
| SwiftUI | `TanreiKeyboardShortcut` | planned |
| Jetpack Compose | `TanreiKeyboardShortcut` | planned |
| Flutter | `TanreiKeyboardShortcut` | planned |
| React Native | `KeyboardShortcut` | planned |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `label` (prop) | `label` | `label` | `contentDescription` | `semanticLabel` | `accessibilityLabel` |
| `disabled` (prop) | `disabled` | `disabled` | `enabled` | `enabled` | `disabled` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `container`: One key's cap, in the keycap form: a small rounded square that widens with its legend, with a faint fill and, in the default system, no edge. A layer that wants keys with an edge, or with a deeper edge at the bottom, gives the edge its widths. The plain form draws no cap.
- `label`: A key's legend: a modifier's symbol or name (⌘, Ctrl), a named key's symbol or name (↩, Enter), or a character (K). It is text, drawn in the component's text style.
- `separator` (optional): The + between two keys of a chord where the keyboard's convention writes one (Ctrl+K). Apple platforms write none (⌘K).
- `chord`: The keys pressed together: the modifiers, in the convention's order, then one other key.
- `sequence` (optional): Chords pressed one after the other (Ctrl+K, then Ctrl+C), a wider gap apart. Most shortcuts are one chord.

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `keys` | `strings` | `` | `keys` | The shortcut: one chord per string, pressed in order. A chord is key names joined by + ("mod+shift+k"). Modifiers: mod (Command on Apple platforms, Control elsewhere), ctrl, alt, shift. Named keys: enter, escape, tab, backspace, delete, space, arrow-up, arrow-down, arrow-left, arrow-right, home, end, page-up, page-down, caps-lock, f1 to f24, plus. Any other single character is that character's key. Names ignore case. |
| `variant` | `enum`: `keycap`, `plain` | `"keycap"` | `variant` | How the keys are drawn: keycap puts each key in its own cap; plain writes the shortcut as a line of text, as a menu or a tooltip writes it. A design system may add values. |
| `size` | `enum`: `small`, `medium` | `"medium"` | `size` | Small (20 caps, 12 text) sits in a line of body text or a menu row without making it taller; medium (24 caps, 14 text) sits beside larger text or on its own. A design system may add values. |
| `convention` | `enum`: `auto`, `apple`, `standard` | `"auto"` | `convention` | Whose keyboard the keys are written for. apple: the symbols of macOS, iOS, iPadOS and visionOS (⌃ ⌥ ⇧ ⌘, no separator). standard: the names of Windows, Linux, ChromeOS and Android (Ctrl, Alt, Shift, joined by +). auto: the convention an ancestor sets, else the one of the platform the app runs on. |
| `label` | `string` | `""` | `label` | What assistive technology reads in place of the drawn keys: the shortcut in the product's language ("Shift Command K", "Befehl Umschalt K"). The product's: Tanrei has no names for keys. Empty exposes the shortcut in the form of the platform's keyboard shortcut property (KBS-12), which is a standard's notation and not a sentence, and is reported (KBS-11). |
| `disabled` | `boolean` | `false` | `disabled` | Fades the legends, for the shortcut of a command that is unavailable. The keys still show; the shortcut takes no input either way. |

### States

`enabled`, `disabled`

### Accessibility

- Role: `none`
- Labeling: The keyboard shortcut has no role of its own: it is text, read where it sits. Its symbols are hidden; what is read is label, the shortcut in the product's words ("Shift Command K"), or, without one, the notation of KBS-12 (Meta+Shift+K), so a screen reader never says "place of interest sign" for ⌘. Hosted in another component (a menu item), it is hidden entirely, and the host exposes the shortcut as its keyboard shortcut property.
- Minimum target size: yes

- Not interactive: it takes no focus and no input (KBS-14), so there is no target to size. minimumTarget holds trivially.
- Showing a shortcut does not make it work, and does not tell assistive technology that it works. A control that really answers the keys exposes that itself (aria-keyshortcuts on the web, the platform's keyboard shortcut on the others); a host such as the menu does it with the form KBS-12 gives.
- The keyboard shortcut has no names for keys in any language: a shortcut that should be read as words is given them in label. A table of key names a product sets once, and names taken from the platform, are not built.
- Contrast: the legend's color on the cap's fill is text on a surface and is held to 4.5:1 in the default system (7:1 in its high-contrast schemes); there it is sys.color.on-surface-variant on sys.color.surface-container-highest, 7.52:1 light and 6.09:1 dark at standard contrast. The cap's fill is decorative and is not held to a ratio against what is behind it: the legend alone carries the meaning, and a cap that cannot be told from its background is still a readable legend.

### Behaviour

Requirements in EARS form, each with its stable id.

- **KBS-1** THE keyboard shortcut SHALL read keys as a sequence of chords pressed one after the other, each chord being the key names of one string joined by + and compared without case: mod, ctrl, alt and shift as modifiers, the named keys enter, escape, tab, backspace, delete, space, arrow-up, arrow-down, arrow-left, arrow-right, home, end, page-up, page-down, caps-lock, f1 to f24 and plus, and any other single character as that character's key.
- **KBS-2** WHILE convention is auto THE keyboard shortcut SHALL use the convention its nearest ancestor sets, and without one SHALL use apple on macOS, iOS, iPadOS and visionOS and standard on every other platform; it SHALL NOT choose the convention by the design system, because the keys follow the keyboard a person presses, not the look of the product.
- **KBS-3** WHILE the convention is apple THE keyboard shortcut SHALL write mod as ⌘, ctrl as ⌃, alt as ⌥ and shift as ⇧, in the order ⌃ ⌥ ⇧ ⌘ whatever order keys gives, followed by the chord's other key, with no separator; and SHALL write enter as ↩, escape as ⎋, tab as ⇥, backspace as ⌫, delete as ⌦, space as Space, the arrows as ↑ ↓ ← →, home as ↖, end as ↘, page-up as ⇞, page-down as ⇟, caps-lock as ⇪, a function key as F1 to F24 and plus as +.
- **KBS-4** WHILE the convention is standard THE keyboard shortcut SHALL write mod and ctrl as Ctrl, alt as Alt and shift as Shift, in the order Ctrl, Alt, Shift whatever order keys gives, followed by the chord's other key, each joined to the next by +; and SHALL write enter as Enter, escape as Esc, tab as Tab, backspace as Backspace, delete as Delete, space as Space, the arrows as ↑ ↓ ← →, home as Home, end as End, page-up as PgUp, page-down as PgDn, caps-lock as Caps Lock, a function key as F1 to F24 and plus as +.
- **KBS-5** THE keyboard shortcut SHALL write a letter key as its capital letter in both conventions and any other character key as given, and SHALL NOT add shift for a capital letter: shift is drawn only where keys names it, so mod+k and mod+K both draw ⌘K and mod+shift+k draws ⇧⌘K.
- **KBS-6** WHILE variant is keycap THE keyboard shortcut SHALL draw each key of a chord in its own cap: at least its size's container height tall and at least as wide as it is tall, its legend centered with its size's container padding on each side, corners of its size's container shape eased by sys.shape.corner-smoothing, filled with comp.keyboard-shortcut.container.color, and edged in comp.keyboard-shortcut.outline.color, comp.keyboard-shortcut.outline.width on its top and sides and comp.keyboard-shortcut.outline.bottom-width at its bottom, both inside the cap's size, a width of 0 (both, in the default system) drawing no edge on those sides, so that the cap is its fill alone; the legend SHALL be in its size's label typescale and comp.keyboard-shortcut.keycap.label.color, and two caps of one chord SHALL be its size's chord gap apart, or, where the convention has a separator, the separator in the legend's style and color with the chord gap on each side of it.
- **KBS-7** WHILE variant is plain THE keyboard shortcut SHALL write each chord as one run of text in its size's label typescale and comp.keyboard-shortcut.plain.label.color, the Apple symbols with no separator (⌥⌘⎋) and the standard names joined by + with no spaces (Ctrl+Alt+Delete), and SHALL draw no cap, fill or edge.
- **KBS-8** WHILE keys holds more than one chord THE keyboard shortcut SHALL draw the chords in order, its size's sequence gap apart, in both forms, and SHALL draw nothing else between them.
- **KBS-9** WHILE disabled is true THE keyboard shortcut SHALL draw its legends and separators from the disabled component tokens of its variant, SHALL keep its caps' fill and edges at rest, and SHALL NOT expose a disabled state of its own: it is not a control, and the command it belongs to exposes whether it is available.
- **KBS-10** THE keyboard shortcut SHALL hide its caps, legends and separators from assistive technology and SHALL expose in their place one text, read where the shortcut sits: label where it is not empty, which is the shortcut in the product's own words ("Shift Command K"), and otherwise the text KBS-11 gives. It SHALL NOT expose the symbols themselves, which a screen reader reads by the names of their characters.
- **KBS-11** WHILE label is empty THE keyboard shortcut SHALL have no names for keys of its own and SHALL NOT spell its keys out in the words of any language: it SHALL expose as its text the shortcut in the form of the platform's keyboard shortcut property (KBS-12) — Meta+Shift+K; Control+K Control+C — which is a standard's notation for keys, the same in every language, and in debug builds SHALL report once that the shortcut has no words. The legends it draws (KBS-3 to KBS-5) are the engravings of the two keyboard conventions, what the keys themselves carry, and are not words of Tanrei's; a keyboard engraved otherwise is a convention of its own, and a proposal of its own.
- **KBS-12** THE keyboard shortcut SHALL give a component that hosts it the shortcut in the form of the platform's keyboard shortcut property, which the web writes as aria-keyshortcuts does: each chord's modifiers then its key joined by +, with mod as Meta under apple and Control under standard, ctrl as Control, alt as Alt and shift as Shift, and the chords separated by spaces (Meta+Shift+K; Control+K Control+C).
- **KBS-13** WHERE a component draws the keyboard shortcut in one of its own parts THE keyboard shortcut SHALL draw its legends and separators in that part's text style and color from the host's tokens instead of its own label typescale and label color, SHALL keep its own caps, sizes and gaps, and SHALL expose nothing to assistive technology, because the host exposes the shortcut as its own (a menu item's keyboard shortcut).
- **KBS-14** THE keyboard shortcut SHALL NOT listen for, register or perform the keys it shows, SHALL NOT take focus, and SHALL NOT take pointer, touch or keyboard input of its own: it shows the keys, and the product makes them work.
- **KBS-15** THE keyboard shortcut SHALL lay itself out inline with the text around it, align the baseline of its legends with that text's baseline, never break a line inside a chord, and break a sequence only between chords; WHILE the text size is enlarged THE keyboard shortcut SHALL grow its caps with their legends, keeping container height as a minimum.
- **KBS-16** WHERE the layout direction is right-to-left THE keyboard shortcut SHALL keep the keys of a chord and the chords of a sequence in left-to-right order, isolated from the surrounding direction, as keyboards and the platforms' own menus write them.
- **KBS-17** WHERE the font of its text style has no glyph for a symbol it writes (⌘, ⌥, ⎋) THE keyboard shortcut SHALL draw that symbol from the platform's system font at the same size and baseline, and SHALL NOT draw a missing-glyph box.
- **KBS-18** IF keys is empty THE keyboard shortcut SHALL draw nothing and expose nothing; IF a chord is empty, holds no key other than modifiers, holds more than one key other than modifiers, names a key twice once the convention has written it (ctrl+mod under standard), or names an unknown key of more than one character THE keyboard shortcut SHALL draw what it can (each key once, an unknown name as given, in order) and in debug builds SHALL report the chord.
- **KBS-19** THE keyboard shortcut SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the keyboard shortcut is shown THE keyboard shortcut SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.keyboard-shortcut.…` → `--tanrei-comp-keyboard-shortcut-…`).

#### `tanrei.comp.keyboard-shortcut`

| Token | Type | Value |
| --- | --- | --- |
| `comp.keyboard-shortcut.container.color` | `color` | `{tanrei.sys.color.surface-container-highest}` |
| `comp.keyboard-shortcut.container.height.small` | `dimension` | `20px` |
| `comp.keyboard-shortcut.container.height.medium` | `dimension` | `24px` |
| `comp.keyboard-shortcut.container.padding-inline.small` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.keyboard-shortcut.container.padding-inline.medium` | `dimension` | `{tanrei.sys.space.space75}` |
| `comp.keyboard-shortcut.container.shape.small` | `dimension` | `{tanrei.sys.shape.corner.extra-small}` |
| `comp.keyboard-shortcut.container.shape.medium` | `dimension` | `{tanrei.sys.shape.corner.small}` |
| `comp.keyboard-shortcut.outline.color` | `color` | `{tanrei.sys.color.outline-variant}` |
| `comp.keyboard-shortcut.outline.width` | `dimension` | `{tanrei.sys.space.space0}` |
| `comp.keyboard-shortcut.outline.bottom-width` | `dimension` | `{tanrei.sys.space.space0}` |
| `comp.keyboard-shortcut.label.typescale.small` | `typography` | `{tanrei.sys.typescale.label-small}` |
| `comp.keyboard-shortcut.label.typescale.medium` | `typography` | `{tanrei.sys.typescale.label}` |
| `comp.keyboard-shortcut.chord.gap.small` | `dimension` | `{tanrei.sys.space.space25}` |
| `comp.keyboard-shortcut.chord.gap.medium` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.keyboard-shortcut.sequence.gap.small` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.keyboard-shortcut.sequence.gap.medium` | `dimension` | `{tanrei.sys.space.space150}` |
| `comp.keyboard-shortcut.keycap.label.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.keyboard-shortcut.plain.label.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |

Per-state tokens, valued by the design system's pattern rules (not written by hand):

- `comp.keyboard-shortcut.<variant>.<state>.<property>` for the variants `keycap`, `plain`, the states `disabled` and the properties `label.color`.

## Guidelines

### When to use

Use a keyboard shortcut wherever your product tells a person which keys perform a command: in a sentence of help, in a list of shortcuts, in an empty state, beside a command’s name in a palette.

In a menu item, a plain tooltip or a search, give that component its `shortcut` prop instead. Don’t use the keycap for text a person types, such as a command or a file name: a cap means a key to press.

### Keycap or plain, small or medium

| Choice | What it draws | Use for |
| --- | --- | --- |
| `keycap` (default) | Each key in its own cap, with a + between the caps in the standard convention. | Help and documentation, where the keys are the subject. |
| `plain` | The shortcut as one run of text: ⌥⌘⎋, or Ctrl+Alt+Delete. No cap, fill or edge. | Beside a command’s name, where a row of caps would compete with it: the way a menu writes it. |
| `medium` (default) | Caps of 24 with text of 14. | On its own, or beside larger text. |
| `small` | Caps of 20 with text of 12. | In a line of body text or a dense row, without making the line taller. |

In the default system a cap is a faint fill with no edge, and its legend is the quiet text color. A design system can give the caps an edge, with a heavier bottom, and can add variants and sizes.

### Writing the keys

- **Write `mod` for the main modifier,** not `ctrl`: it is Command on an Apple keyboard and Control elsewhere. Write `ctrl` only for a shortcut that is Control on every keyboard.
- **Any order.** The component writes modifiers in the keyboard’s own order: ⌃ ⌥ ⇧ ⌘ for Apple, and Ctrl, Alt, Shift for the standard names.
- **A letter is drawn as its capital,** and adds no Shift: `mod+k` and `mod+K` both draw ⌘K. Shift is drawn only where you name it.
- **One key per chord,** besides its modifiers. A chord with no key, or with two, is drawn as it can be, and debug builds report it.
- **A sequence is several chords:** `mod+k` then `mod+c`. They are drawn a gap apart, with nothing between them.
- **Named keys follow the keyboard too.** `enter` is ↩ on an Apple keyboard and Enter on a standard one; `escape` is ⎋ or Esc; `backspace` is ⌫ or Backspace; `page-down` is ⇟ or PgDn. The arrows are ↑ ↓ ← → in both.

### The convention

`convention` says whose keyboard the keys are written for. Leave it at `auto`: the component then uses the convention an ancestor sets, and without one the platform’s — Apple’s on macOS, iOS, iPadOS and visionOS, the standard names everywhere else.

Set it for a region when your product knows better than the platform: a setting that lets a person choose, documentation that shows both keyboards side by side, a remote session to another system. On the web that is the `data-tanrei-keyboard-convention` attribute (`apple` or `standard`) on any ancestor; menus, tooltips and searches inside it follow it too. Set `convention` on one shortcut only for an exception.

The convention never comes from the design system. The keys follow the keyboard a person presses, not the look of the product.

### Do

- Show the shortcut that really works. Bind the keys in your product, and keep the two in step.
- Give every shortcut that is read aloud a `label`: the shortcut in your product’s words (“Shift Command K”). Without it, a screen reader reads the notation `Meta+Shift+K`.
- Under `convention="auto"` the drawn keys follow the person’s keyboard, and a `label` you wrote cannot. Write one that is true on both keyboards (“Command or Control, Shift, K”), as the samples on this page do, or set the label once you know the keyboard.
- Use `disabled` for the shortcut of a command that is unavailable now, beside that command. The keys still show, faded.
- Keep a shortcut on one line. A chord never breaks; a sequence may wrap between chords.

### Don’t

- Don’t write the symbols yourself (⌘K in text). They would be wrong on another keyboard, and a screen reader may read a symbol by its character name.
- Don’t make a shortcut the only way to a command. It is an accelerator for something a person can also reach by pointer and by focus.
- Don’t place your own keyboard shortcut element inside a menu item or a tooltip. Use the host’s `shortcut` prop.
- Don’t choose the convention by brand or by theme.

## Accessibility

### What the component handles

- The caps, legends and separators are hidden from assistive technology. One text is read in their place, where the shortcut sits: `label`, so that ⇧⌘K reads “Shift Command K” and never the symbols’ character names. Without a `label` it is the shortcut in the notation of `aria-keyshortcuts` — `Meta+Shift+K`, or `Control+K Control+C` for a sequence — which is a standard’s and the same in every language, and the component reports it once in development.
- The component has no names for keys: it does not spell out a modifier, an arrow or a punctuation key in any language. A screen reader may skip a bare character such as a comma, which is one more reason to write the `label`.
- It has no role, takes no focus and no input, and is not a target: it is text.
- Inside a host (a menu item, a plain tooltip, a search) it exposes nothing itself. The host exposes the shortcut as its control’s keyboard shortcut: `aria-keyshortcuts` on the web.
- `disabled` fades the legends and exposes no state. The command the shortcut belongs to says whether it is available.
- The keys stay in left-to-right order in a right-to-left layout, isolated from the text around them, as keyboards and the platforms’ own menus write them.
- It sits on the baseline of the text around it and grows with enlarged text; the cap’s height is a minimum.
- A symbol the product’s typeface lacks (⌘, ⎋) is drawn from a system font at the same size, never as a missing-glyph box.
- In the default system the legend on the cap meets the contrast for text. The cap’s fill is decorative: the legend alone carries the meaning.
- Debug builds report an empty chord, a chord of modifiers only, a chord with two keys, a key named twice once written (`ctrl+mod` in the standard convention), an unknown key name and an unknown convention.

Known platform gaps:

- SwiftUI, Compose, Flutter and React Native have not implemented the keyboard shortcut.
- Web: a disabled shortcut that stands alone, outside a command that is itself exposed as disabled, is likely to be reported by an automated contrast check: its legend is faded, and the element exposes no disabled state of its own.

### What you need to do

- Make the keys work: the component only shows them.
- On the control the keys belong to, expose them as its keyboard shortcut. On the web, set `aria-keyshortcuts` from the element’s read-only `ariaKeyShortcuts` property, which gives the form that attribute takes.
- Pass `label`, the shortcut in your product’s words, wherever the shortcut is read aloud. Tanrei ships no words and no names for keys.
- Keep every command reachable without its shortcut.