tabIndex declared on a non-interactive element JS-0762
Performance
Minor
8 months ago
—
2 years old
tabIndex should only be declared on interactive elements 76 </div>
77 </div>
78 <ul
79 tabIndex={0} 80 className="p-2 shadow mt-[-8px] dropdown-content bg-base-100 rounded-xl w-50"
81 >
82 <litabIndex should only be declared on interactive elements 68 <div className="m-1 cursor-pointer">
69 <div>
70 <div
71 tabIndex={0} 72 className="m-1 hover:bg-gray-300 p-0 md:p-2 rounded-box"
73 >
74 <img src="/gearIcon.svg" className="h-5" />tabIndex should only be declared on interactive elements61 </div>
62 </div>
63 <ul
64 tabIndex={0}65 className="p-2 shadow z-40 fixed right-1 md:right-auto md:relative dropdown-content bg-base-100 rounded-xl min-w-max text-left"
66 >
67 <litabIndex should only be declared on interactive elements49 <div className="fixed right-10 md:right-20 top-1 justify-center cursor-pointer dropdown">
50 <div className="m-1 hover:bg-gray-300 rounded-box p-2 items-center cursor-pointer ">
51 <div>
52 <div tabIndex={0} className="flex items-center">53 <img
54 src={user ? user.pfp : ''}
55 className="rounded-box object-cover w-12 aspect-square"
Description
Tab key navigation should be limited to elements on the page that can be interacted with. Thus it is not necessary to add a tabindex to items in an unordered list, for example, to make them navigable through assistive technology. These applications already afford page traversal mechanisms based on the HTML of the page. Generally, we should try to reduce the size of the page's tab ring rather than increasing it.
Bad Practice
<div tabIndex="0" />
<div role="article" tabIndex="0" />
<article tabIndex="0" />
<article tabIndex={0} />
Recommended
<div />
<MyButton tabIndex={0} />
<button />
<button tabIndex="0" />
<button tabIndex={0} />
<div />
<div tabIndex="-1" />
<div role="button" tabIndex="0" />
<div role="article" tabIndex="-1" />
<article tabIndex="-1" />