DeepSource
Dashboard Resources Pricing Discover Directory Log in

Run your first analysis.

Find thousands of code security and quality issues in your codebase, before they end up in production.

Start now

franius8 / todo-site

Prefer to accompany onClick with some elements JS-0746
Anti-pattern
Minor
a year ago — a year old
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
src/ToDoElement.tsx
 72                <div className="labelstripe" style={{backgroundColor: priorityColor}} />
 73                <div className="middlediv">
 74                    <div className="checkboxdiv">
 75                        <div className="checkbox" onClick={moveToDone} role="button">✓</div> 76                    </div>
 77                    <div className="todocontent">
 78                        <div className="todoheading">{heading}</div>
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
src/Projects.tsx
103                <Header active={"projects"}/>
104                <div id="projectdiv">
105                    <div id="actiondiv">
106                        No Projects yet. Time to <span id="addnew" onClick={() => dispatch(toggleProjectForm())}107                                                       role="button">add a new one</span>.108                    </div>
109                </div>
110            </>
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
src/Project.tsx
 71                    <div className="labelstripe" style={{backgroundColor: priorityColor}} />
 72                    <div className="middlediv">
 73                        <div className="checkboxdiv">
 74                            <div className="checkbox" onClick={moveToDone} role="button">✓</div> 75                        </div>
 76                        <div className="projectcontent">
 77                            <div className="projectname">{name}</div>
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
src/Project.tsx
 80                        </div>
 81                        <ElementButtonDiv delete={handleDeleteProject} toggleEdit={toggleEdit} />
 82                    </div>
 83                    <div className="expandbutton" onClick={toggleToDos} role="button"> 84                        <span className={`material-symbols-outlined ${projectToDoVisible ? "rotate" : ""}`}>expand_less</span>
 85                    </div>
 86                </div>
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
src/Project.tsx
124                        </div>
125                        <EditFormButtonDiv toggleEdit={toggleEdit} />
126                    </div>
127                    <div className="expandbutton" onClick={toggleToDos} role="button">128                        <span className="material-symbols-outlined">{projectToDoVisible ? "expand_more" : "expand_less"}</span>
129                    </div>
130                </div>