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>
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 </>
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>
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>
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>
Elements with an interactive role and interaction handlers (mouse or key press) must be focusable as it will be helpful for keyboard and screen reader users.
<!-- Bad: span with onClick attribute has no tabindex -->
<span onclick="submitForm();" role="button">Submit</span>
<!-- Bad: anchor element without href is not focusable -->
<a onclick="showNextPage();" role="button">Next page</a>
<!-- Good: div with onClick attribute is hidden from screen reader -->
<div aria-hidden onClick={() => void 0} />
<!-- Good: span with onClick attribute is in the tab order -->
<span onClick="doSomething();" tabIndex="0" role="button">Click me!</span>
<!-- Good: span with onClick attribute may be focused programmatically -->
<span onClick="doSomething();" tabIndex="-1" role="menuitem">Click me too!</span>
<!-- Good: anchor element with href is inherently focusable -->
<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>
<!-- Good: buttons are inherently focusable -->
<button onClick="doSomething();">Click the button :)</button>