@accessible/link 中文文档教程

发布于 4年前 浏览 16 项目主页 更新于 3年前


<AccessibleLink>

捆绑恐惧症 Types 代码覆盖率 构建状态 NPM 版本 麻省理工学院许可证

npm i @accessible/link

将 aria 属性和 keydown 事件添加到非 A 元素的组件,以使它们像本机链接一样工作。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 import {Link as AccessibleLink} from '@accessible/link'

const LinkBut​​ton = () => ( <可访问链接> )

## API

### &lt;Link&gt;

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和谐 const 链接 = () => { const ref = React.useRef(null) const a11yProps = useA11yButton(ref, (event) => { // 这是您的 onClick 处理程序 导航到('/家') 事件.preventDefault() }) 返回


<AccessibleLink>

Bundlephobia Types Code coverage Build status NPM Version MIT License

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

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

const LinkButton = () => ( )

## API

### &lt;Link&gt;

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

更多

友情链接

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文