---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noNoninteractiveElementInteractions
description: Learn more about noNoninteractiveElementInteractions
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="JSX and TSX" icon="seti:javascript">
## Summary
- Rule available since: `v2.0.0`
- Diagnostic Category: [`lint/a11y/noNoninteractiveElementInteractions`](/reference/diagnostics#diagnostic-category)
- This rule isn't recommended, so you need to enable it.
- This rule doesn't have a fix.
- The default severity of this rule is [**information**](/reference/diagnostics#information).
- Sources: 
  - Same as [`jsx-a11y/no-noninteractive-element-interactions`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-interactions.md)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"a11y": {
				"noNoninteractiveElementInteractions": "error"
			}
		}
	}
}

```
## 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

```jsx
<div onClick={() => {}}>button</div>
```

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-noninteractive-element-interactions">lint/a11y/noNoninteractiveElementInteractions</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Non-interactive element should not have event handler.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;div onClick=&#123;() =&gt; &#123;&#125;&#125;&gt;button&lt;/div&gt;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Consider replace semantically interactive element like </span><span style="color: lightgreen;"><strong>&lt;button/&gt;</strong></span><span style="color: lightgreen;"> or </span><span style="color: lightgreen;"><strong>&lt;a href/&gt;</strong></span><span style="color: lightgreen;">.</span><br />  <br /></code></pre>

### Valid

```jsx
<button onClick={() => { }}>button</button>
```

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

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

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

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

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

## Accessibility guidelines

- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)

### Resources

- [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/a11y/no_noninteractive_element_interactions.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/a11y/noNoninteractiveElementInteractions)

</TabItem>
</Tabs>