🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@accessible/button

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@accessible/button

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

2.0.2
latest
Source
npm
Version published
Weekly downloads
1.9K
-14.76%
Maintainers
1
Weekly downloads
 
Created
Source

<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

PropTypeDefaultRequired?Description
childrenReact.ReactElementundefinedYesThe 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

ArgumentTypeRequired?Description
targetReact.RefObject<T> | T | nullYesA React ref or HTML element
childrenReact.ReactElementYesThe 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

Keywords

react

FAQs

Package last updated on 10 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts