noStaticElementInteractions (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/noStaticElementInteractions
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/no-static-element-interactions

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noStaticElementInteractions": "error"
6
      }
7
    }
8
  }
9
}

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.

Examples

Invalid

1
<div onclick="myFunction()"></div>

code-block.html:1:1 lint/a11y/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected event handler on static element.
  
  > 1 │ <div onclick="myFunction()"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Static elements should not be interactive. To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

1
<span onclick="myFunction()"></span>

code-block.html:1:1 lint/a11y/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected event handler on static element.
  
  > 1 │ <span onclick="myFunction()"></span>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Static elements should not be interactive. 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.

1
<a onclick="myFunction()"></a>

code-block.html:1:1 lint/a11y/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected event handler on static element.
  
  > 1 │ <a onclick="myFunction()"></a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Static elements should not be interactive. To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

Valid

1
<div role="button" onclick="myFunction()"></div>
2
<span role="scrollbar" onclick="myFunction()"></span>
3
<a href="http://example.com" onclick="myFunction()"></a>

Custom components are not checked.

1
<TestComponent onclick={doFoo} />