Daniel O’Connor

Easily unstyle buttons with ClickableBox

It bothers me that there's no easy way to remove styles from a button element or properly add onClick to a div. This encourages developers to take shortcuts and hurts users navigating the web with keyboard and screen readers.

Inspired by my own frustrations, a tweet by Micah Godbolt, and a follow-up blog post by Scott O'Hara, I've created a React component called ClickableBox.

ClickableBox makes it easy to add onClick to arbitrary HTML elements without sacrificing accessibility.

You can install it with NPM:

npm install clickable-box

And use it like this:

// import ClickableBox from 'clickable-box';

<ClickableBox
  onClick={this.closeModal}
  aria-label="Close modal"
  className="icon-button"
>
  <CloseIcon />
</ClickableBox>

This will render a span that is accessible for users navigating by screen readers, keyboard, and mouse/touch.

Take a look at ClickableBox on GitHub to learn more, send feedback, or ask questions.