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

Require an appropriate role when a non-interactive element has event handlers.

Elements such as <div> and <span> have no built-in interactive meaning. Adding a mouse, keyboard, or focus handler does not tell assistive technologies that the element behaves like a control. Prefer a native interactive element such as <button>. When that is not possible, add an appropriate ARIA role so the control’s purpose can be announced.

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.

An <a> element without an href attribute 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} />