@neo4j-ndl/react/skills/ndl-react/components/kbd.md

React implementation of Neo4j Design System

# Kbd

Import: `import { Kbd } from '@neo4j-ndl/react'`

## Props

### Kbd

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `keys` | `ReactNode[]` |  |  | The main keys to display in the keyboard shortcut. |
| `modifierKeys` | `KbdKey[]` |  |  | The modifier keys to display in the keyboard shortcut. |
| `os` | `'linux' \| 'mac' \| 'windows'` |  |  | Override the operating system detection for key symbols |
| `ref` | `any` |  |  | A ref to apply to the root element. |

## Accessibility

## WAI-ARIA roles and attributes

- Renders as a [`<kbd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd) element by default, which is the semantic HTML element for keyboard input
- Visual key symbols (e.g. `⌘`, `⇧`) are marked with `aria-hidden="true"` so screen readers skip them
- A screen-reader-friendly text is generated automatically (e.g. "Shortcut: Command + Shift + K") and rendered in a visually hidden span

## Implementation guidelines

- The component handles screen reader announcements internally so no additional ARIA attributes are needed
- If `modifierKeys` and `keys` are both omitted, the component renders an empty announcement. Always provide at least one of them
- When using custom `keys` content (e.g. React elements instead of strings), the screen reader text may not resolve correctly. Use string values where possible

### Related WCAG criteria

- [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) (A): The visual key symbols are non-text content so the component provides a screen-reader-friendly text alternative automatically, but custom React element keys may result in an empty announcement

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Kbd } from '@neo4j-ndl/react';

const Component = () => {
  return <Kbd modifierKeys={['meta', 'shift']} keys={['A']} />;
};

export default Component;
```

### Sequence

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Kbd } from '@neo4j-ndl/react';

const Component = () => {
  return <Kbd keys={['P', '1']} />;
};

export default Component;
```