useKeyWithClickEvents

诊断类别：lint/a11y/useKeyWithClickEvents

¥Diagnostic Category: lint/a11y/useKeyWithClickEvents

JSX and TSX

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

与以下相同：jsx-a11y/click-events-have-key-events

¥Same as: jsx-a11y/click-events-have-key-events

强制整个代码库的所有内容的命名约定。onKeyUp, onKeyDown, onKeyPress.

¥Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.

代码审查不再需要重新格式化请求和周期性争论。这不适用于交互式或隐藏元素。

¥Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements.

示例

¥Examples

无效

¥Invalid

<div onClick={() => {}} />

code-block.jsx:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
  
  > 1 │ <div onClick={() => {}} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

有效

¥Valid

<div onClick={() => {}} onKeyDown={handleKeyDown} />

<div onClick={() => {}} onKeyUp={handleKeyUp} />

<div onClick={() => {}} onKeyPress={handleKeyPress} />

// this rule doesn't apply to user created component
<MyComponent onClick={() => {}} />

<div onClick={() => {}} {...spread}></div>

<div {...spread} onClick={() => {}} ></div>

<button onClick={() => console.log("test")}>Submit</button>

可访问性指南

¥Accessibility guidelines

WCAG 2.1.1

useKeyWithClickEvents

示例

无效

有效

可访问性指南

相关链接