feat: add useA11yButton hook

This provides a hook for people who don't want to use the component wrapper pattern and removes the
default export

BREAKING CHANGE: The Button component is no longer a default export. It's a named export e.g.
`import {Button} from '@accessible/button'`

Author: jaredLunde

README.md

@@ -45,9 +45,9 @@ provides interoperability between `<button>` elements and those faux button elem
 [Check out the example on CodeSandbox](https://codesandbox.io/s/accessiblebutton-example-spjh2)
 
 ```jsx harmony
-import Button from '@accessible/button'
+import {Button, useA11yButton} from '@accessible/button'
 
-const ComponentA = () => (
+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
@@ -58,31 +58,58 @@ const ComponentA = () => (
   // <div role='button' tabindex='0'/>
 )
 
-const ComponentB = () => (
-  // Won't break real buttons
-  <Button>
-    <button onClick={console.log} />
-  </Button>
-)
-
-const MyButton = styled.button``
-
-const ComponentC = () => (
-  // Won't break real buttons, period.
-  <Button>
-    <MyButton onClick={console.log} />
-  </Button>
-)
+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
 
-### Props
+### &lt;Button&gt;
+
+#### 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 <div {...a11yProps} ref={ref} />
+}
+```
+
+#### Arguments
+
+| Argument | Type                                                       | Required? | Description                                                                                          |
+| -------- | ---------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
+| target   | <code>React.RefObject&lt;T&gt; &#124; T &#124; null</code> | 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 onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
+    readonly role: "button";
+    readonly tabIndex: 0;
+}
+```
+
 ## LICENSE
 
 MIT

src/index.test.tsx

@@ -1,102 +1,91 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* jest */
-import React from 'react'
-import {render, fireEvent} from '@testing-library/react'
-import Button from './index'
+import * as React from 'react'
+import {render, fireEvent, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {Button} from './index'
 
 describe('<Button>', () => {
   it(`should fire click event once for buttons on click`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <button onClick={cb} data-testid="btn" />
+        <button onClick={cb} />
       </Button>
     )
     // mousedown
-    fireEvent.click(getByTestId('btn'))
+    fireEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(0)
-    fireEvent.mouseDown(getByTestId('btn'))
-    fireEvent.click(getByTestId('btn'))
+    fireEvent.mouseDown(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(1)
     // touchstart
-    fireEvent.click(getByTestId('btn'))
+    fireEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(1) // should reset between clicks
-    fireEvent.touchStart(getByTestId('btn'))
-    fireEvent.click(getByTestId('btn'))
+    fireEvent.touchStart(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(2)
   })
 
   it(`should fire click event once for buttons on space`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <button onClick={cb} data-testid="btn" />
+        <button onClick={cb} />
       </Button>
     )
 
-    fireEvent.keyDown(getByTestId('btn'), {which: 32})
+    fireEvent.keyDown(screen.getByRole('button'), {key: ' '})
     expect(cb).toBeCalledTimes(1)
   })
 
   it(`should fire click event once for buttons on enter`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <button onClick={cb} data-testid="btn" />
+        <button onClick={cb} />
       </Button>
     )
 
-    fireEvent.keyDown(getByTestId('btn'), {which: 13})
+    fireEvent.keyDown(screen.getByRole('button'), {key: 'Enter'})
     expect(cb).toBeCalledTimes(1)
   })
 
   it(`should fire click event once for divs on click`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <div onClick={cb} data-testid="btn" />
+        <div onClick={cb} />
       </Button>
     )
 
-    fireEvent.click(getByTestId('btn'))
+    fireEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(0)
-    fireEvent.mouseDown(getByTestId('btn'))
-    fireEvent.click(getByTestId('btn'))
+    userEvent.click(screen.getByRole('button'))
     expect(cb).toBeCalledTimes(1)
   })
 
   it(`should fire click event once for divs on space`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <div onClick={cb} data-testid="btn" />
+        <div onClick={cb} />
       </Button>
     )
 
-    fireEvent.keyDown(getByTestId('btn'), {which: 32})
+    fireEvent.keyDown(screen.getByRole('button'), {key: ' '})
     expect(cb).toBeCalledTimes(1)
   })
 
   it(`should fire click event once for divs on enter`, () => {
     const cb = jest.fn()
-    const {getByTestId} = render(
+    render(
       <Button>
-        <div onClick={cb} data-testid="btn" />
+        <div onClick={cb} />
       </Button>
     )
 
-    fireEvent.keyDown(getByTestId('btn'), {which: 13})
-    expect(cb).toBeCalledTimes(1)
-  })
-
-  it(`should fire user-defined onMouseDown`, () => {
-    const cb = jest.fn()
-    const {getByTestId} = render(
-      <Button>
-        <div onMouseDown={cb} data-testid="btn" />
-      </Button>
-    )
-
-    fireEvent.mouseDown(getByTestId('btn'))
+    fireEvent.keyDown(screen.getByRole('button'), {key: 'Enter'})
     expect(cb).toBeCalledTimes(1)
   })
 
@@ -114,7 +103,7 @@ describe('<Button>', () => {
     expect(
       render(
         <Button>
-          <div role="menu" tabIndex={-1} />
+          <div role='menu' tabIndex={-1} />
         </Button>
       ).asFragment()
     ).toMatchSnapshot('role=menu, tabIndex=-1')

src/index.tsx

@@ -1,53 +1,50 @@
 import * as React from 'react'
-import {useKeycodes} from '@accessible/use-keycode'
+import useKey from '@accessible/use-key'
+import useEvent from '@react-hook/event'
 import useMergedRef from '@react-hook/merged-ref'
 
-export interface ButtonProps {
-  children: JSX.Element | React.ReactElement
+export function useA11yButton<
+  T extends HTMLElement,
+  E extends React.MouseEvent<T, MouseEvent>
+>(target: React.RefObject<T> | T | null, onClick: (event: E) => any) {
+  const clickedMouse = React.useRef(false)
+  const setClickedMouse = () => (clickedMouse.current = true)
+  useEvent(target, 'touchstart', setClickedMouse)
+  useEvent(target, 'mousedown', setClickedMouse)
+  // @ts-expect-error
+  useKey(target, {
+    Enter: onClick,
+    ' ': onClick,
+  })
+
+  return {
+    onClick: (event: E) => {
+      // Only fire onClick if the keyboard was not used to initiate the click
+      clickedMouse.current && onClick(event)
+      clickedMouse.current = false
+    },
+    role: 'button',
+    tabIndex: 0,
+  } as const
 }
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {}
 
-const Button: React.FC<ButtonProps> = ({children}) => {
+export const Button = ({children}: ButtonProps) => {
+  const ref = React.useRef(null)
   const {props} = children
-  // Tracking the pressed value ensures that the onClick event won't fire
-  // twice when the child component is an actual <button> element.
-  const clicked = React.useRef<boolean>(false)
-  const onClick = props.onClick || noop
+  const {onClick, role, tabIndex} = useA11yButton(ref, props.onClick)
 
   return React.cloneElement(children, {
-    role: props.hasOwnProperty('role') ? props.role : 'button',
-    tabIndex: props.hasOwnProperty('tabIndex') ? props.tabIndex : 0,
-    onTouchStart: (e: React.TouchEvent<HTMLElement>) => {
-      // Resets the pressed variable when a user starts clicking w/ touch devices
-      clicked.current = true
-      props.onTouchStart?.(e)
-    },
-    onMouseDown: (e: React.MouseEvent<HTMLElement>) => {
-      // Resets the pressed variable when a user starts clicking w/ the mouse
-      clicked.current = true
-      props.onMouseDown?.(e)
-    },
-    onClick: (e: React.MouseEvent<HTMLElement>) => {
-      // Only fire onClick if the keyboard was not used to initiate the
-      // click
-      clicked.current && onClick(e)
-      clicked.current = false
-    },
-    ref: useMergedRef(
-      // @ts-ignore
-      children.ref,
-      useKeycodes({
-        // enter
-        13: onClick,
-        // space bar
-        32: onClick,
-      })
-    ),
+    onClick,
+    role: props.hasOwnProperty('role') ? props.role : role,
+    tabIndex: props.hasOwnProperty('tabIndex') ? props.tabIndex : tabIndex,
+    // @ts-expect-error
+    ref: useMergedRef(ref, children.ref),
   })
 }
 
-export default Button
+export interface ButtonProps {
+  children: JSX.Element | React.ReactElement
+}
 
 /* istanbul ignore next */
 if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {

types/index.d.ts

@@ -1,6 +1,30 @@
 import * as React from 'react'
+export declare function useA11yButton<T extends Window>(
+  target: Window | null,
+  onClick: (event: WindowEventMap['click']) => any
+): void
+export declare function useA11yButton<T extends Document>(
+  target: Document | null,
+  onClick: (event: DocumentEventMap['click']) => any
+): void
+export declare function useA11yButton<T extends HTMLElement>(
+  target: React.RefObject<T> | T | null,
+  onClick: (event: HTMLElementEventMap['click']) => any
+): void
+export declare const Button: {
+  ({children}: ButtonProps): React.ReactElement<
+    any,
+    | string
+    | ((
+        props: any
+      ) => React.ReactElement<
+        any,
+        string | any | (new (props: any) => React.Component<any, any, any>)
+      > | null)
+    | (new (props: any) => React.Component<any, any, any>)
+  >
+  displayName: string
+}
 export interface ButtonProps {
   children: JSX.Element | React.ReactElement
 }
-declare const Button: React.FC<ButtonProps>
-export default Button