onMouseOut must be accompanied by onBlur for accessibility
77 </a>
78 </Link>
79 <Link href={Routes.PartnerWithUs} passHref>
80 <a 81 className={`side-nav-btn mt-4 ${ 82 router.pathname == Routes.PartnerWithUs && 83 HoverLinkRef != 5 && 84 'active' 85 }`} 86 href="partnerwithus" 87 onMouseEnter={() => setHoverLinkRef(5)} 88 onMouseOut={() => setHoverLinkRef()} 89 > 90 {'Partner With Us'}
91 </a>
92 </Link>onMouseOut must be accompanied by onBlur for accessibility
63 </a>
64 </Link>
65 <Link href={Routes.GiveYourTime} passHref>
66 <a 67 className={`side-nav-btn mt-4 ${ 68 router.pathname == Routes.GiveYourTime && 69 HoverLinkRef != 4 && 70 'active' 71 }`} 72 href="giveyourtime" 73 onMouseEnter={() => setHoverLinkRef(4)} 74 onMouseOut={() => setHoverLinkRef()} 75 > 76 {'Give Your Time'}
77 </a>
78 </Link>onMouseOut must be accompanied by onBlur for accessibility
51 </a>
52 </Link>
53 <Link href={Routes.Fund} passHref>
54 <a 55 className={`side-nav-btn mt-4 ${ 56 router.pathname == Routes.Fund && HoverLinkRef != 3 && 'active' 57 }`} 58 href="fund" 59 onMouseEnter={() => setHoverLinkRef(3)} 60 onMouseOut={() => setHoverLinkRef()} 61 > 62 {'Fund'}
63 </a>
64 </Link>onMouseOut must be accompanied by onBlur for accessibility
37 </a>
38 </Link>
39 <Link href={Routes.InKind} passHref>
40 <a 41 className={`side-nav-btn mt-4 ${ 42 router.pathname == Routes.InKind && 43 HoverLinkRef != 2 && 44 'active' 45 }`} 46 href="inkind" 47 onMouseEnter={() => setHoverLinkRef(2)} 48 onMouseOut={() => setHoverLinkRef()} 49 > 50 {'In-Kind'}
51 </a>
52 </Link>onMouseOut must be accompanied by onBlur for accessibility
25 role="none"
26 >
27 <Link href="/" passHref>
28 <a 29 className={`side-nav-btn mt-4 ${ 30 router.pathname == '/' && HoverLinkRef != 1 && 'active' 31 }`} 32 href="home" 33 onMouseEnter={() => setHoverLinkRef(1)} 34 onMouseOut={() => setHoverLinkRef()} 35 > 36 {'Home'}
37 </a>
38 </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} />