Neurotoxin Powered Marketing
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@accessible/button

2.0.2 • Public • Published

<Button>

Bundlephobia Types Code coverage Build status NPM Version MIT License

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

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>
  <Button>
    <div onClick={console.log} />
  </Button>
  // <div role='button' tabindex='0'/>
)
 
const WithHook = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yButton(ref, (event) => {
    // This is your `onClick` handler
    console.log('Clicked', event)
  })
  return <button {...a11yProps} ref={ref} />
}

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.

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 tabIndex0;
}

LICENSE

MIT

Install

npm i @accessible/button

DownloadsWeekly Downloads

2,979

Version

2.0.2

License

MIT

Unpacked Size

77.4 kB

Total Files

22

Last publish

Collaborators

  • avatar