Prefer that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute JS-0765
Anti-pattern
5 months ago
—
5 months old
Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
18 <Card.Title>{title}</Card.Title>
19 <Card.Text>{description}</Card.Text>
20 <div className="d-flex">
21 <i className="fa-solid fa-trash" onClick={()=>{deleteNote(_id)}}></i>22 <i className="fa-solid fa-pen-to-square"></i>
23 </div>
24 </Card.Body>
Description
Static HTML elements do not have semantic meaning. This is clear in the case of <div> and <span>. It is less so clear in the case of elements that seem semantic, but that do not have a semantic mapping in the accessibility layer. For example <a>, <big>, <blockquote>, <footer>, <picture>, <strike> and <time> -- to name a few -- have no semantic layer mapping. They are as void of meaning as <div>.
The WAI-ARIA role attribute confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
Bad Practice
<div onClick={() => {}} />
Recommended
<button onClick={() => {}} className="foo" />
<div className="foo" onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />