noStaticElementInteractions

Diagnostic Category: lint/nursery/noStaticElementInteractions

JavaScript (and super languages)

Since: v1.9.0

Sources:

Same as: jsx-a11y/no-static-element-interactions

Description

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

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

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

How to configure

{
  "linter": {
    "rules": {
      "nursery": {
        "noStaticElementInteractions": "error"
      }
    }
  }
}