Package Exports

clickable-box

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (clickable-box) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ClickableBox

React component to add onClick to HTML elements without sacrificing accessibility.

What is this?

It's very hard to remove all styles from HTML button elements. It's also hard to create clickable divs that are accessible. This can cause developers to ship inaccessible UI.

The ClickableBox React component accepts an onClick prop and an element to render. It returns the element with the onClick as well as the attributes and event listeners needed to make it as accessible as a button.

Install

You can install ClickableBox with NPM or Yarn.

npm install clickable-box --save-exact

yarn add clickable-box --exact

We encourage pinning the version number until ClickableBox reaches 1.0.0. We may ship breaking changes in 0.x.x versions.

Usage

Here's a look at how to use ClickableBox to make a clickable SVG.

// import ClickableBox from 'clickable-box';

<ClickableBox className="icon-container" aria-label="Close modal">
  <CloseIcon />
</ClickableBox>

Props

There are a few props that are built into ClickableBox:

prop	type	description
`onClick`	`function` \| required	The action to perform when the element is pressed
`is`	`string`, `React.Element` \| defaults to: `span`	The element to render
`ref`	`React.Ref`	Provides access to the React element

You can pass any custom prop as well since this component spreads all of the props on the rendered element.

What happens behind the scenes?

The component does a few things to make the HTML element behave like a button:

Add tabIndex={0} to make the element navigable by keyboard.
Add cursor: pointer to indicate on hover that the element is interactive.
Add onKeyDown event listener that runs onClick when Space or Enter are pressed.
Add role="button" so that screen readers announce the element as a button.