https://github.com/accessible-ui/link
🅰 A component that adds aria attributes and keydown events to non-A elements in order to make them act like native links
https://github.com/accessible-ui/link
a11y a11y-link accessibility accessible accessible-link accessible-react aria-link react-accessibility
Last synced: 2 months ago
JSON representation
🅰 A component that adds aria attributes and keydown events to non-A elements in order to make them act like native links
- Host: GitHub
- URL: https://github.com/accessible-ui/link
- Owner: accessible-ui
- License: mit
- Created: 2019-12-29T04:35:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:23:09.000Z (over 2 years ago)
- Last Synced: 2025-03-17T19:47:32.756Z (3 months ago)
- Topics: a11y, a11y-link, accessibility, accessible, accessible-link, accessible-react, aria-link, react-accessibility
- Language: TypeScript
- Homepage: https://codesandbox.io/s/accessiblelink-examples-rohqw
- Size: 2.93 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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](https://codesandbox.io/s/accessiblelink-examples-rohqw)
```jsx harmony
import {Link as AccessibleLink} from '@accessible/link'
const LinkButton = () => (
(window.location.href = '/foo')}>Go to /foo
)
```
## 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.
```jsx harmony
const Link = () => {
const ref = React.useRef(null)
const a11yProps = useA11yButton(ref, (event) => {
// This is your `onClick` handler
navigate.to('/home')
event.preventDefault()
})
return
}
```
#### 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
```ts
{
readonly onClick: (event: React.MouseEvent) => void;
readonly role: "button";
readonly tabIndex: 0;
}
```
## LICENSE
MIT