noNoninteractiveElementInteractions

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noNoninteractiveElementInteractions
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as jsx-a11y/no-noninteractive-element-interactions

Description

Disallow use event handlers on non-interactive elements.

Non-interactive HTML elements indicate content and containers in the user interface. Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.

A Non-interactive element does not support event handlers(mouse and key handlers).

Examples

Invalid

1
<div onClick={() => {}}>button</div>

code-block.jsx:1:1 lint/nursery/noNoninteractiveElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Non-interactive element should not have event handler.
  
  > 1 │ <div onClick={() => {}}>button</div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider replace semantically interactive element like <button/> or <a href/>.

Valid

1
<button onClick={() => { }}>button</button>

1
// Adding a role to element does not add behavior.
2
// If not used semantic HTML elements like `button`, developers need to implement the expected behavior for role(like focusability and key press support)
3
// See https://www.w3.org/WAI/ARIA/apg/
4
<div role="button" onClick={() => { }}>button</div>

1
// The role="presentation" attribute removes the semantic meaning of an element, indicating that it should be ignored by assistive technologies.
2
// Therefore, it's acceptable to add event handlers to elements with role="presentation" for visual effects or other purposes,
3
// but users relying on assistive technologies may not be able to interact with these elements.
4
<div role="presentation" onClick={() => { }}>button</div>

1
// Hidden from screen reader.
2
<div onClick={() => {}} aria-hidden />

1
// Custom component is not checked.
2
<SomeComponent onClick={() => {}}>button</SomeComponent>

1
// Spread attributes is not supported.
2
<div {...{"onClick":() => {}}}>button</div>

Accessibility guidelines

WCAG 4.1.2

Resources

How to configure

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