https://github.com/accessible-ui/button

🅰 An accessible button component for React that provides interop between real <button> elements and fake ones, e.g. <div role='button'>
https://github.com/accessible-ui/button

a11y a11y-button accessibility accessible accessible-button accessible-react aria aria-button react

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/accessible-ui/button
• Owner: accessible-ui
• License: mit
• Created: 2019-12-28T19:01:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:23:07.000Z (over 2 years ago)
• Last Synced: 2025-03-17T19:47:31.208Z (3 months ago)
• Topics: a11y, a11y-button, accessibility, accessible, accessible-button, accessible-react, aria, aria-button, react
• Language: TypeScript
• Homepage: https://codesandbox.io/s/accessiblebutton-example-spjh2
• Size: 2.73 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  


    <Button>

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



npm i @accessible/button



An accessible button component for React that provides interop between real `` elements and fake ones, e.g. `
`.

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. `
`.


## 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 `` for buttons, rather than a `
`, ``, or ``. This component

provides interoperability between `` elements and those faux button elements.


## Quick Start

[Check out the example on CodeSandbox](https://codesandbox.io/s/accessiblebutton-example-spjh2)

```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 


  

    


  

  // 


)


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 


}

```


#### 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

```ts

{

    readonly role: "button";

    readonly tabIndex: 0;

}

```

## LICENSE

MIT