noStaticElementInteractions
Diagnostic Category: lint/nursery/noStaticElementInteractions
Since: v1.9.0
Sources:
Enforce that static, visible elements (such as <div>) that have click handlers use the valid role attribute.
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> without href attribute, <meta>, <script>, <picture>, <section>, and <colgroup> — 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.
Source: jsx-a11y/no-static-element-interactions
Examples
Section titled ExamplesInvalid
Section titled Invalid<div onClick={() => {}}></div>;code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Static Elements should not be interactive.
> 1 │ <div onClick={() => {}}></div>;
│ ^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
<span onClick={() => {}}></span>;code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Static Elements should not be interactive.
> 1 │ <span onClick={() => {}}></span>;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
When <a> does not have “href” attribute, that is non-interactive.
<a onClick={() => {}}></a>code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Static Elements should not be interactive.
> 1 │ <a onClick={() => {}}></a>
│ ^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
Valid
Section titled Valid<> <div role="button" onClick={() => {}}></div> <span role="scrollbar" onClick={() => {}}></span> <a href="http://example.com" onClick={() => {}}></a></>