跳转到内容

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

<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.

<>
<div role="button" onClick={() => {}}></div>
<span role="scrollbar" onClick={() => {}}></span>
<a href="http://example.com" onClick={() => {}}></a>
</>