当前位置： 文江博客 Node Package Readme @accessible/button 中文文档教程

@accessible/button 中文文档教程

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

<Button>

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

npm i @accessible/button

React 的可访问按钮组件，提供真实 。

Why does this exist?

在设计无障碍图书馆时，我们只是不知道我们的用户是否会做正确的事 即对按钮使用

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 导入 {Button, useA11yButton}

从 '@accessible/button' const Component = () => ( // 向 div 添加 space 和 enter keydown 处理程序， // 还添加了 role='button' 和 tabIndex='0'，两者都是 // 其中可以通过提供那些来覆盖 // 你的道具

//
)

常量 WithHook = () => { const ref = React.useRef(null) const a11yProps = useA11yButton(ref, (event) => { // 这是您的 onClick 处理程序 console.log('点击', 事件) }) 返回

原文

<Button>

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @accessible/button

An accessible button component for React that provides interop between real <button> elements and fake ones, e.g. <div role='button'>. To do so, this component attaches the onClick handler from its child component to the keyboard events for space and enter. It also adds role='button' and tabIndex={0} properties, though this behavior can be overridden by providing those props to the child component e.g. <Button><div tabIndex={-1}></Button>.

Why does this exist?

In designing accessible libraries, we just don't know if our users are going to do the right thing i.e. using a <button> for buttons, rather than a <div>, <span>, or <a>. This component provides interoperability between <button> elements and those faux button elements.

Quick Start

Check out the example on CodeSandbox

```jsx harmony import {Button, useA11yButton} from '@accessible/button'

const Component = () => ( // Adds space and enter keydown handlers to the div, // also adds role='button' and tabIndex='0', both // of which can be overridden by providing those // props on your

//
)

const WithHook = () => { const ref = React.useRef(null) const a11yProps = useA11yButton(ref, (event) => { // This is your onClick handler console.log('Clicked', event) }) return

更多

你可能也喜欢

更多

友情链接

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