JS-0765 · Prefer that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute

Prefer that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute JS-0765

Anti-pattern

Minor

a year ago — a year 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.

src/DoneToDoElement.tsx

34            <div className="labelstripe" style={{backgroundColor: "gray"}} />
35            <div className="middlediv">
36                <div className="checkboxdiv">
37                    <div className="checkbox donecheckbox" onClick={revertDone}>↺</div>38                </div>
39                <div className="todocontent">
40                    <div className="todoheading">{heading}</div>

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.

src/DoneProject.tsx

 57                    <div className="labelstripe" style={{backgroundColor: "grey"}} />
 58                    <div className="middlediv">
 59                        <div className="checkboxdiv">
 60                            <div className="checkbox donecheckbox" onClick={revertProject}>↺</div> 61                        </div>
 62                        <div className="projectcontent">
 63                            <div className="projectname">{name}</div>

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={() => {}} />

franius8 / todo-site

Bad Practice

Recommended