---

<Button>

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'constComponent=()=>(// 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><divonClick={console.log}/></Button>// <div role='button' tabindex='0'/>)constWithHook=()=>{constref=React.useRef(null)consta11yProps=useA11yButton(ref,(event)=>{// This is your `onClick` handlerconsole.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.

constButton=()=>{constref=React.useRef(null)consta11yProps=useA11yButton(ref,(event)=>{// This is your `onClick` handlerconsole.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