version 1

Author: jaredLunde

.eslintrc

@@ -53,4 +53,4 @@
       }
     }
   ]
-}
+}

.prettierrc

@@ -4,4 +4,4 @@
   "semi": false,
   "singleQuote": true,
   "bracketSpacing": false
-}
+}

README.md

@@ -1,7 +1,7 @@
 <hr>
 <div align="center">
   <h1 align="center">
-    @accessible/button
+    &lt;Button&gt;
   </h1>
 </div>
 
@@ -29,21 +29,59 @@
 <pre align="center">npm i @accessible/button</pre>
 <hr>
 
-An accessible button component for React that provides interop between real `<button>` elements and fake ones, e.g. `<div role='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](https://codesandbox.io/s/accessiblebutton-example-spjh2)
+
 ```jsx harmony
-import _ from '@accessible/button'
+import Button from '@accessible/button'
+
+const ComponentA = () => (
+  // 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 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>
+)
 ```
 
 ## API
 
 ### Props
 
-| Prop | Type | Default | Required? | Description |
-| ---- | ---- | ------- | --------- | ----------- |
-|      |      |         |           |             |
+| 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. |
 
 ## LICENSE
 

package.json

@@ -84,7 +84,10 @@
     "ts-jest": "latest",
     "typescript": "latest"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@accessible/use-keycode": "^2.0.0",
+    "@react-hook/merged-ref": "^1.0.8"
+  },
   "peerDependencies": {
     "prop-types": ">=15.6",
     "react": ">=16.8",

src/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button> should add accessible roles: role=button, tabIndex=0 1`] = `
+<DocumentFragment>
+  <div
+    role="button"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Button> should allow roles to be overridden: role=menu, tabIndex=-1 1`] = `
+<DocumentFragment>
+  <div
+    role="menu"
+    tabindex="-1"
+  />
+</DocumentFragment>
+`;

src/index.test.tsx

@@ -1,9 +1,110 @@
 /* jest */
-// import React from 'react'
-// import {renderHook} from '@testing-library/react-hooks'
-// import {render} from '@testing-library/react'
-const hello = world => `hello ${world}`
+import React from 'react'
+import {render, fireEvent} from '@testing-library/react'
+import Button from './index'
 
-test('passes', () => {
-  expect(hello('world')).toMatchSnapshot()
+describe('<Button>', () => {
+  it(`should fire click event once for buttons on click`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <button onClick={cb} data-testid="btn" />
+      </Button>
+    )
+
+    fireEvent.click(getByTestId('btn'))
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should fire click event once for buttons on space`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <button onClick={cb} data-testid="btn" />
+      </Button>
+    )
+
+    fireEvent.keyDown(getByTestId('btn'), {which: 32})
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should fire click event once for buttons on enter`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <button onClick={cb} data-testid="btn" />
+      </Button>
+    )
+
+    fireEvent.keyDown(getByTestId('btn'), {which: 13})
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should fire click event once for divs on click`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <div onClick={cb} data-testid="btn" />
+      </Button>
+    )
+
+    fireEvent.click(getByTestId('btn'))
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should fire click event once for divs on space`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <div onClick={cb} data-testid="btn" />
+      </Button>
+    )
+
+    fireEvent.keyDown(getByTestId('btn'), {which: 32})
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should fire click event once for divs on enter`, () => {
+    const cb = jest.fn()
+    const {getByTestId} = render(
+      <Button>
+        <div onClick={cb} data-testid="btn" />
+      </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'))
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it(`should add accessible roles`, () => {
+    expect(
+      render(
+        <Button>
+          <div />
+        </Button>
+      ).asFragment()
+    ).toMatchSnapshot('role=button, tabIndex=0')
+  })
+
+  it(`should allow roles to be overridden`, () => {
+    expect(
+      render(
+        <Button>
+          <div role="menu" tabIndex={-1} />
+        </Button>
+      ).asFragment()
+    ).toMatchSnapshot('role=menu, tabIndex=-1')
+  })
 })

src/index.tsx

@@ -1,3 +1,53 @@
-// import React from 'react'
-const Component = (): string => 'Hello world'
-export default Component
+import React, {cloneElement, useRef, useCallback} from 'react'
+import {useKeycodes} from '@accessible/use-keycode'
+import useMergedRef from '@react-hook/merged-ref'
+
+export interface ButtonProps {
+  children: JSX.Element | React.ReactElement
+}
+
+const Button: React.FC<ButtonProps> = ({children}) => {
+  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 pressed = useRef<boolean>(false)
+  const handleInterop = useCallback(
+    (e: KeyboardEvent) => {
+      props.onClick?.(e)
+      pressed.current = true
+    },
+    [props.onClick]
+  )
+
+  return cloneElement(children, {
+    role: props.hasOwnProperty('role') ? props.role : 'button',
+    tabIndex: props.hasOwnProperty('tabIndex') ? props.tabIndex : 0,
+    onMouseDown: e => {
+      // Resets the pressed variable when a user starts clicking w/ the mouse
+      pressed.current = false
+      props.onMouseDown?.(e)
+    },
+    onClick: e => {
+      // Only fire onClick if the keyboard was not used to initiate the
+      // click
+      !pressed.current && props.onClick?.(e)
+    },
+    ref: useMergedRef(
+      // @ts-ignore
+      children.ref,
+      useKeycodes({
+        // enter
+        13: handleInterop,
+        // space bar
+        32: handleInterop,
+      })
+    ),
+  })
+}
+
+export default Button
+
+/* istanbul ignore next */
+if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+  Button.displayName = 'AccessibleButton'
+}

tsconfig.json

@@ -8,11 +8,7 @@
   ],
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable"
-    ],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "jsx": "react",
     "moduleResolution": "node",
     "strictNullChecks": true,
@@ -24,4 +20,4 @@
     "noFallthroughCasesInSwitch": true,
     "noEmitOnError": true
   }
-}
+}

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@accessible/use-keycode@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@accessible/use-keycode/-/use-keycode-2.0.0.tgz#9fbaf02a9b345ffd86a62f231c30789c3860e237"
+  integrity sha512-pvcrkiMlRaCmh1luRlfSxdDKjElQiPNvaBmY1cibRopgBYXN94cqJXAequOn3cFWxsbhLVxfbdq+x/ocp5+q3w==
+  dependencies:
+    "@react-hook/passive-layout-effect" "^1.0.2"
+
 "@babel/cli@latest":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.7.7.tgz#56849acbf81d1a970dd3d1b3097c8ebf5da3f534"
@@ -1075,6 +1082,16 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@react-hook/merged-ref@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@react-hook/merged-ref/-/merged-ref-1.0.8.tgz#146deba739df2724f76f4e8a29adbae0e1724994"
+  integrity sha512-ae3HwS/zCDZqoeLliqBPfHc5DeX3bhAR2rsZ2JpDm68c6Lvx05Hs5SOQIQSaRQIsGzFTinoI2TO7LyOcD8s23g==
+
+"@react-hook/passive-layout-effect@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.0.2.tgz#a0138ece2a86d53d9ba947818715076a9aed6ba7"
+  integrity sha512-el1V2Calc5/HzUbz/Gkit9yeI/ypoap46Eo9u4EOg6+pnSQkUwU0faM22+Owp7+0cbz30fT9zFLrXy4JDuBSBQ==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"