source: frontend/node_modules/eslint-plugin-jsx-a11y/docs/rules/mouse-events-have-key-events.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 2 weeks ago

Fix frontend appearance

  • Property mode set to 100644
File size: 2.0 KB
Line 
1# jsx-a11y/mouse-events-have-key-events
2
3💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
4
5<!-- end auto-generated rule header -->
6
7Enforce 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 screen reader users.
8
9## Rule options
10
11By default, this rule checks that `onmouseover` is paired with `onfocus` and that `onmouseout` is paired with `onblur`. This rule takes an optional argument to specify other handlers to check for "hover in" and/or "hover out" events:
12
13```json
14{
15 "rules": {
16 "jsx-a11y/mouse-events-have-key-events": [
17 "error",
18 {
19 "hoverInHandlers": [
20 "onMouseOver",
21 "onMouseEnter",
22 "onPointerOver",
23 "onPointerEnter"
24 ],
25 "hoverOutHandlers": [
26 "onMouseOut",
27 "onMouseLeave",
28 "onPointerOut",
29 "onPointerLeave"
30 ]
31 }
32 ]
33 }
34}
35```
36
37Note that while `onmouseover` and `onmouseout` are checked by default if no arguments are passed in, those are *not* included by default if you *do* provide an argument, so remember to explicitly include them if you want to check them.
38
39### Succeed
40```jsx
41<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } />
42<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } />
43<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } {...otherProps} />
44<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } {...otherProps} />
45```
46
47### Fail
48In example 3 and 4 below, even if otherProps contains onBlur and/or onFocus, this rule will still fail. Props should be passed down explicitly for rule to pass.
49
50```jsx
51<div onMouseOver={ () => void 0 } />
52<div onMouseOut={ () => void 0 } />
53<div onMouseOver={ () => void 0 } {...otherProps} />
54<div onMouseOut={ () => void 0 } {...otherProps} />
55```
56
57## Accessibility guidelines
58- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
Note: See TracBrowser for help on using the repository browser.