useKeyWithClickEvents
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/useKeyWithClickEvents - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useKeyWithClickEvents": "error" } } }}Description
Section titled “Description”Enforce elements with a click event handler to also have at least one keyboard event handler.
Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users. This does not apply for interactive or hidden elements.
Examples
Section titled “Examples”Invalid
Section titled “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.
<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>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Summary
Section titled “Summary”- Diagnostic Category:
lint/a11y/useKeyWithClickEvents - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Inspired from
jsx-a11y/click-events-have-key-events
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useKeyWithClickEvents": "error" } } }}Description
Section titled “Description”Enforce elements with a click event handler to also have at least one keyboard event handler.
Coding for the keyboard is important for users with physical disabilities who cannot use a mouse,
AT compatibility, and screen reader users. This rule checks that interactive elements with an
onclick attribute also include at least one of onkeydown, onkeyup, or onkeypress.
This does not apply to elements that are inherently keyboard-accessible (such as <button>,
<input>, <select>, <textarea>, or <a> with an href attribute) or elements that are
hidden from assistive technologies.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div onclick="handleClick()"></div>code-block.html:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Elements with onclick must also include at least one keyboard handler: onkeydown, onkeyup, or onkeypress.
> 1 │ <div onclick=“handleClick()”></div>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
<div onclick="handleClick()" onkeydown="handleKeyDown()"></div><div onclick="handleClick()" onkeyup="handleKeyUp()"></div><div onclick="handleClick()" onkeypress="handleKeyPress()"></div><button onclick="handleClick()">Submit</button><input onclick="handleClick()" />Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.