Keyboard shortcut

Base #

Keyboard shortcut outlines a key combination with a border to represent a keyboard shortcut. + will be rendered as an icon rather than text. Supported symbol tags can be used in the shortcut prop, see the Props, Slots & Events section.

<dt-keyboard-shortcut shortcut="{cmd}+Ctrl+X"/>

Usage #

• Commands shown should always be device specific (different systems may require a different shortcut combination).
• Commonly used in list item, tooltips.
• Don't use actual "+" key as a shortcut.
• Avoid using browser or operating system shortcuts. For example, Control+P is print.

Variants #

Inverted #

In place of the inverted prop, use the v-dt-mode directive on the component element.

<div class="d-bgc-contrast d-p-200">
  <dt-keyboard-shortcut v-dt-mode:invert shortcut="{cmd}+Ctrl+X" />
</div>

Shortcut Size Variation #

<dt-keyboard-shortcut
  class="d-fs-200"
  shortcut="{cmd}+Y"
/>

All Available Shortcut Aliases #

<dt-keyboard-shortcut
  shortcut="{cmd}+{opt}+{win}+{arrow-right}+{arrow-left}+{arrow-up}+{arrow-down}+A"
/>

Inline with Text and Screen Reader Text #

<dt-text kind="body" :size="300">
  Press
  <dt-keyboard-shortcut
    screen-reader-text="Control plus F5"
    shortcut="Ctrl + F5"
  />
  to hard refresh the page.
</dt-text>

Accessibility #

Keyboard shortcuts are visible to sighted users and made available to assistive technology. This component automatically generates accessible text in a visually-hidden element that will be announced by screen readers.

The auto-generated accessible text converts:

• Icon aliases: (e.g., {cmd}) to full names (e.g., "Command")
• Key abbreviations: (e.g., "Ctrl", "Alt") to full names (e.g., "Control", "Alt")
• Plus separators: (+) to the word "plus"

For example, {cmd}+Ctrl+X will be announced as "Command plus Control plus X".

Customizing the Screen Reader Text #

You can override the auto-generated accessible text by providing the screenReaderText prop with custom text.

Announcing shortcuts independent of DtKeyboardShortcut #

If an element (e.g. a button) can be triggered by a keyboard shortcut, the aria-keyshortcuts attribute should be used to announce the keyboard shortcut to screen readers.

Example:

// This button can be activated by pressing control+shift+v, let's indicate that
// to the screenreader by using aria-keyshortcuts.
<button aria-keyshortcuts="control+shift+v">Press Me</button>

Abbreviations / symbols should be spelled out in full for voiceover / screen readers, e.g. "Control" instead of "Ctrl".

References #

• Keyboard Symbols
• aria-keyshortcuts

Vue API #

import { DtKeyboardShortcut } from '@dialpad/dialtone-vue';

Props