useKeyWithMouseEvents

诊断类别：lint/a11y/useKeyWithMouseEvents

¥Diagnostic Category: lint/a11y/useKeyWithMouseEvents

JSX and TSX

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

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

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

强制 onMouseOver / onMouseOut 伴随 onFocus / onBlur。

¥Enforce onMouseOver / onMouseOut are accompanied by onFocus / onBlur.

代码审查不再需要重新格式化请求和周期性争论。

¥Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

示例

¥Examples

无效

¥Invalid

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

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

  ✖ onMouseOver must be accompanied by onFocus for accessibility.
  
  > 1 │ <div onMouseOver={() => {}} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.

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

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

  ✖ onMouseOut must be accompanied by onBlur for accessibility.
  
  > 1 │ <div onMouseOut={() => {}} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.

有效

¥Valid

<>
  <div onMouseOver={() => {}} onFocus={() => {}} />
  <div onMouseOut={() => {}} onBlur={() => {}} />
  <div onMouseOver={() => {}} {...otherProps} />
  <div onMouseOut={() => {}} {...otherProps} />
  <div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} />
  <div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} />
</>

可访问性指南

¥Accessibility guidelines

WCAG 2.1.1

useKeyWithMouseEvents

示例

无效

有效

可访问性指南

相关链接