useKeyWithClickEvents
¥Summary
-
规则生效日期：
v1.0.0¥Rule available since:
v1.0.0 -
诊断类别：
lint/a11y/useKeyWithClickEvents¥Diagnostic Category:
lint/a11y/useKeyWithClickEvents -
此规则为推荐规则，默认启用。
¥This rule is recommended, which means is enabled by default.
-
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
来源：
¥Sources:
¥How to configure
{ "linter": { "rules": { "a11y": { "useKeyWithClickEvents": "error" } } }}¥Description
强制整个代码库的所有内容的命名约定。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={() => {}} /><button onClick={() => console.log("test")}>Submit</button>可访问性指南
Section titled “可访问性指南”¥Accessibility guidelines
¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号