<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 from '@accessible/button'
const ComponentA = () => (
<Button>
<div onClick={console.log} />
</Button>
)
const ComponentB = () => (
<Button>
<button onClick={console.log} />
</Button>
)
const MyButton = styled.button``
const ComponentC = () => (
<Button>
<MyButton onClick={console.log} />
</Button>
)
API
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. |
LICENSE
MIT