# @visa/keyboard-instructions

> keyboard instructions menu for charts

Latest version **2.1.0** (published 2026-03-26) · SEE LICENCE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @visa/keyboard-instructions
pnpm add @visa/keyboard-instructions
yarn add @visa/keyboard-instructions
bun add @visa/keyboard-instructions
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-03-26 |
| First published | 2021-08-09 |
| Weekly downloads | 0 |
| License | SEE LICENCE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 33.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 187 |
| Author | Visa Data Experience Team |
| Maintainers | chris-demartini |

## Links

- npm: https://www.npmjs.com/package/@visa/keyboard-instructions
- Repository: https://github.com/visa/visa-chart-components
- Homepage: https://github.com/visa/visa-chart-components#readme
- Issues: https://github.com/visa/visa-chart-components/issues
- npm.io page: https://npm.io/package/@visa/keyboard-instructions

## Dependencies (1)

- [@visa/visa-charts-utils](https://npm.io/package/@visa/visa-charts-utils.md) ^5.5.0

## Recent versions

- 2.1.0 (latest) — 2026-03-26
- 2.0.1 — 2024-11-15
- 2.0.0 — 2024-10-25
- 1.3.3 — 2024-02-16
- 1.3.2 — 2024-02-09
- 1.3.1 — 2023-09-28
- 1.3.0 — 2023-06-16
- 1.2.4 — 2023-02-01
- 1.2.3 — 2023-01-14
- 1.2.2 — 2022-07-28
- 1.2.1 — 2022-06-27
- 1.2.0 — 2022-03-30
- 1.1.3 — 2022-02-04
- 1.1.2 — 2021-11-18
- 1.1.1 — 2021-10-27
- … 1 more at https://npm.io/package/@visa/keyboard-instructions/versions

## README

# @visa/keyboard-instructions

![An image depicting an example of the default keyboard-instructions component](./docs/keyboard-instructions-1.png 'Example image of a keyboard instructions component')
<br>

```js
<keyboard-instructions
  uniqueID={this.chartID}
  isCompact
  tableColumns={this.tableColumns}
  data={this.tableData}
  padding={this.padding}
  margin={this.margin}
  hidekeyboardInstructions={this.accessibility.hidekeyboardInstructionsButton}
/>
```

<br>

<details open="open">
  <summary>Jump To:</summary>
  <ol>
    <li>
      <a href="#installation-steps">Installation Steps</a>
    </li>
    <li>
      <a href="#props-documentation">Props Documentation</a>
      <ul>
        <li><a href="#base-props">Keyboard Instructions Props </a></li>
      </ul>
    </li>
  </ol>
</details>
<br>

## <a name="installation-steps">#</a> Installation Steps

---

- Using npm

  ```
  $ npm i @visa/keyboard-instructions
  ```

- Using yarn
  ```
  $ yarn add @visa/keyboard-instructions
  ```

<br>

## <a name="props-documentation">#</a> Props Documentation

---

<br>

### <a name="base-props" href="#base-props">#</a> Keyboard Instructions Props [<>](./src/components/keyboard-instructions/keyboard-instructions.tsx 'Source')

The data-component expects to be utilized within a Visa Chart Component, we do some data preparation in each chart to try and map chart data into a structure that is meaningful for an accompanying keyboard instructions component. Properties for this component are documented below, but you should also refer to a [Visa Chart Component](../bar-chart) to see detail on how this sub-component is leveraged.

| Name                       | Type                 | Default Value(s)                            | Description                                                                                                                                  |
| -------------------------- | -------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `margin`                   | object (custom type) | [IBoxModelType](../types/src/prop-types.ts) | Expects the margin property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible.  |
| `padding`                  | object (custom type) | [IBoxModelType](../types/src/prop-types.ts) | Expects the padding property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible. |
| `isCompact`                | boolean              | false                                       | Set to true by each visa chart component, renders a more compact version of the keyboard instructions component.                             |
| `hidekeyboardInstructions` | boolean              | false                                       | If true, hides the keyboard instructions component button (but it is still available to screen reader users).                                |
| `uniqueID`                 | string               | `undefined`                                 | ID used to identify chart (must be unique per keyboard instructions component), helpful for validation messages. A string must be passed.    |
| `tableColumns`             | string[]             | `undefined`                                 | Populates the column headers of the table, in order.                                                                                         |
| `data`                     | object[]             | `undefined`                                 | Populates the content/rows of the table, data needs to be aligned to `tableColumns` provided.                                                |
| `unitTest`                 | boolean              | false                                       | When set to true, adds testing attributes to the rendered keyboard-instructions components for ease of selection during unit testing.        |

<br>

#### IBoxModelType Definition

| Name     | Type   | Default Value(s) | Description                                             |
| -------- | ------ | ---------------- | ------------------------------------------------------- |
| `top`    | number | height \* 0.01   | Sets the top margin/padding for the chart container.    |
| `bottom` | number | height \* 0.01   | Sets the bottom margin/padding for the chart container. |
| `left`   | number | width \* 0.01    | Sets the top margin/padding for the chart container.    |
| `right`  | number | width \* 0.01    | Sets the top margin/padding for the chart container.    |

<br>
<br>

---
_Source: https://npm.io/package/@visa/keyboard-instructions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._