@accessible/button
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    <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

    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.

    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

    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 tabIndex0;
    }

    LICENSE

    MIT

    Install

    npm i @accessible/button

    DownloadsWeekly Downloads

    2,143

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    77.4 kB

    Total Files

    22

    Last publish

    Collaborators

    • jaredlunde