@accessible/button

An accessible button component for React that provides interop between real <button> elements and fake ones, e.g. <div role='button'>

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@accessible/button
1132.0.22 years ago3 years agoMinified + gzip package size for @accessible/button in KB

Readme


<Button>

<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@accessible/button?style=for-the-badge&labelColor=24292e">
<img alt="Types" src="https://img.shields.io/npm/types/@accessible/button?style=for-the-badge&labelColor=24292e">
<img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/accessible-ui/button?style=for-the-badge&labelColor=24292e">
<img alt="Build status" src="https://img.shields.io/travis/accessible-ui/button?style=for-the-badge&labelColor=24292e">
<img alt="NPM Version" src="https://img.shields.io/npm/v/@accessible/button?style=for-the-badge&labelColor=24292e">
<img alt="MIT License" src="https://img.shields.io/npm/l/@accessible/button?style=for-the-badge&labelColor=24292e">


npm i @accessible/button


An accessible button component for React that provides interop between real <button> elements and fake ones, e.g. <div role='button'>. To do so, this component attaches the onClick handler from its child component to the keyboard events for space and enter. It also adds role='button' and tabIndex={0} properties, though this behavior can be overridden by providing those props to the child component e.g. <Button><div tabIndex={-1}></Button>.

Why does this exist?

In designing accessible libraries, we just don't know if our users are going to do the right thing i.e. using a <button> for buttons, rather than a <div>, <span>, or <a>. This component provides interoperability between <button> elements and those faux button elements.

Quick Start

Check out the example on CodeSandbox
```jsx harmony import {Button, useA11yButton} from '@accessible/button'
const Component = () => ( // Adds space and enter keydown handlers to the div, // also adds role='button' and tabIndex='0', both // of which can be overridden by providing those // props on your
<div onClick={console.log} />
//
)
const WithHook = () => { const ref = React.useRef(null) const a11yProps = useA11yButton(ref, (event) => {
// This is your `onClick` handler
console.log('Clicked', event)
}) return }
## API

### <Button>

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                                          |
| -------- | -------------------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes       | The component you want to turn into a button that handles focus and `space`, `enter` keydown events. |

### useA11yButton(target, onClick)

A React hook for adding a11y properties and button/role=button interop to elements.

```jsx harmony
const Button = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yButton(ref, (event) => {
    // This is your `onClick` handler
    console.log('Clicked', event)
  })
  return <div {...a11yProps} ref={ref} />
}

Arguments

| Argument | Type | Required? | Description | | -------- | ---------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- | | target | React.RefObject<T> | T | null | Yes | A React ref or HTML element | | | children | React.ReactElement | Yes | The component you want to turn into a button that handles focus and space, enter keydown events. |

Returns

{
    readonly role: "button";
    readonly tabIndex: 0;
}

LICENSE

MIT