keyboard-instructions

@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}
/>

Jump To:

1. Installation Steps
2. Props Documentation
   • Keyboard Instructions Props

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