README
<AccessibleLink>
npm i @accessible/link
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