Consider using
onFocus/onBlur with onMouseOver/onMouseOut event JS-0755
Performance
Minor
3 years ago
—
3 years old
onMouseOut must be accompanied by onBlur for accessibility
62 </a>
63 </Link>
64 <Link href={Routes.PartnerWithUs} passHref>
65 <a66 className="side-nav-btn mt-4"67 href="partnerwithus"68 onMouseEnter={() => setActiveLinkRef(5)}69 onMouseOut={() => setActiveLinkRef()}70 >71 {'Partner With Us'}
72 </a>
73 </Link>onMouseOut must be accompanied by onBlur for accessibility
52 </a>
53 </Link>
54 <Link href={Routes.GiveYourTime} passHref>
55 <a56 className="side-nav-btn mt-4"57 href="giveyourtime"58 onMouseEnter={() => setActiveLinkRef(4)}59 onMouseOut={() => setActiveLinkRef()}60 >61 {'Give Your Time'}
62 </a>
63 </Link>onMouseOut must be accompanied by onBlur for accessibility
42 </a>
43 </Link>
44 <Link href={Routes.Fund} passHref>
45 <a46 className="side-nav-btn mt-4"47 href="fund"48 onMouseEnter={() => setActiveLinkRef(3)}49 onMouseOut={() => setActiveLinkRef()}50 >51 {'Fund'}
52 </a>
53 </Link>onMouseOut must be accompanied by onBlur for accessibility
32 </a>
33 </Link>
34 <Link href={Routes.InKind} passHref>
35 <a36 className="side-nav-btn mt-4"37 href="inkind"38 onMouseEnter={() => setActiveLinkRef(2)}39 onMouseOut={() => setActiveLinkRef()}40 >41 {'In-Kind'}
42 </a>
43 </Link>onMouseOut must be accompanied by onBlur for accessibility
22 role="none"
23 >
24 <Link href="/" passHref>
25 <a26 className="side-nav-btn"27 href="home"28 onMouseEnter={() => setActiveLinkRef(1)}29 onMouseOut={() => setActiveLinkRef()}30 >31 {'Home'}
32 </a>
33 </Link>
Description
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.
Bad Practice
<div onMouseOver={ () => void 0 } />
<div onMouseOut={ () => void 0 } />
<div onMouseOver={ () => void 0 } {...otherProps} />
<div onMouseOut={ () => void 0 } {...otherProps} />
Recommended
<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } />
<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } />
<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } {...otherProps} />
<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } {...otherProps} />