npm i @accessible/button

React 的可访问按钮组件, 提供真实之间的接口 <button> 元素和假元素,例如:. <div role='button'>。 。 。 . 为此,本部分附有: onClick 从子组件到键盘的处理器 用于 space 财务报告和审定财务报表 enter。还添加 role='button' 财务报告和审定财务报表 tabIndex={0} 属性,尽管 通过向儿童部分提供这些道具,可以推翻这种行为. <Button><div tabIndex={-1}></Button>。 。 。 .

这为什么存在?

在设计无障碍图书馆时,我们只是不知道我们的用户是否会做正确的事情 即使用 <button> 按钮,而不是一个 <div>, (中文(简体) ), <span>,或 <a>。本部分 提供互操作性 <button> 元素和那些软扣元素.

快速启动

查看 CodeSandbox 上的例子

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 <div>
  <Button>
    <div onClick={console.log} />
  </Button>
  // <div role='button' tabindex='0'/>
)

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

API 密码

按钮

道具

使用 A11y 按钮( 目标, 在 Click)

用于在元素中添加a11y属性和按钮/role=按钮间接的回放钩.

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

参数

回返

{
    readonly role: "button";
    readonly tabIndex: 0;
}

自由主义

麻省理工学院