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>.
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.
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} />
}| 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. |
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} />
}| 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. |
{
readonly role: "button";
readonly tabIndex: 0;
}MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent