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.
Check out the example on CodeSandbox
import{LinkasAccessibleLink}from'@accessible/link'constLinkButton=()=>(<AccessibleLink><buttononClick={()=>(window.location.href='/foo')}>Go to /foo</button></AccessibleLink>)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.
| Prop | Type | Default | Required? | Description |
|---|---|---|---|---|
| children | React.ReactElement | undefined | Yes | The component you want to add accessible roles and keydown events to. |
A React hook for adding a11y properties and link/role=link interop to elements.
constLink=()=>{constref=React.useRef(null)consta11yProps=useA11yButton(ref,(event)=>{// This is your `onClick` handlernavigate.to('/home')event.preventDefault()})return<button{...a11yProps}ref={ref}/>}| 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. |
{
readonly onClick: (event: React.MouseEvent<T,MouseEvent>)=>void;readonlyrole: "button";readonly tabIndex: 0;}MIT