Kbd

Kbd renders a single keyboard key, and KbdGroup presents several of them as one combination. Both are bare directives with no template — write them on the tag you want (<kbd> for a key, anything for the group). Use them to show a shortcut; wiring the actual key listener stays the application's job.

Minimal example

import { Component } from "@angular/core";
import { KbdComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [KbdComponent],
  template: `Press <kbd>Esc</kbd> to close.`,
})
export class SampleComponent {}

How it works

KbdGroup carries the accessible name of the whole combination, and the keys inside it are hidden from assistive technology — without that, a screen reader announces "Control", "plus", "Shift" as three separate items, separators included.

import { Component } from "@angular/core";
import { KbdComponent, KbdGroupComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [KbdComponent, KbdGroupComponent],
  template: `
    <KbdGroup aria-label="Control+Shift+F">
      <kbd aria-hidden="true">Ctrl</kbd>
      <span aria-hidden="true">+</span>
      <kbd aria-hidden="true">Shift</kbd>
      <span aria-hidden="true">+</span>
      <kbd aria-hidden="true">F</kbd>
    </KbdGroup>
  `,
})
export class SampleComponent {}

The name passed to KbdGroup should be the ARIA form of the combination (Control+Shift+F) — which is also what belongs in aria-keyshortcuts on the control the shortcut drives — while the visible keys can use the shorter labels a user reads on their own keyboard (Ctrl, ⌥). The visual and the announced form must agree.

Options

KbdGroup takes no input — it only lays its keys out in a row.

Pitfalls

What's next