A component that adds aria attributes and keydown events to non-A elements in order to make them act like native links.

Quick Start

Check out the example on CodeSandbox

import {Link as AccessibleLink} from '@accessible/link'

const LinkButton = () => (
  <AccessibleLink>
    <button onClick={() => (window.location.href = '/foo')}>Go to /foo</button>
  </AccessibleLink>
)

API

<Link>

Adds role="link" and tabIndex={0} props to its child component unless those props are already defined in the child component's props. Also adds a keydown event for the Enter key which causes the component's onClick property to fire.

Props

| Prop | Type | Default | Required? | Description | | -------- | -------------------- | ----------- | --------- | --------------------------------------------------------------------- | | children | React.ReactElement | undefined | Yes | The component you want to add accessible roles and keydown events to. |

useA11yLink(target, onClick)

A React hook for adding a11y properties and link/role=link interop to elements.

const Link = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yButton(ref, (event) => {
    // This is your `onClick` handler
    navigate.to('/home')
    event.preventDefault()
  })
  return <button {...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 onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
    readonly role: "button";
    readonly tabIndex: 0;
}

LICENSE

MIT