@visa/keyboard-instructions

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

# Installation Steps

• Using npm

  $ npm i @visa/keyboard-instructions

• Using yarn

  $ yarn add @visa/keyboard-instructions

# Props Documentation

# Keyboard Instructions Props <>

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 to see detail on how this sub-component is leveraged.

| Name | Type | Default Value(s) | Description | | -------------------------- | -------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | margin | object (custom type) | IBoxModelType | 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 | 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. |

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. |