noStaticElementInteractions

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.0` - Diagnostic Category: [`lint/a11y/noStaticElementInteractions`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/no-static-element-interactions`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md)

How to configure

json

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

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 . 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

jsx

<div onClick={() => {}}></div>;

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-static-element-interactions">lint/a11y/noStaticElementInteractions</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

jsx

<span onClick={() => {}}></span>;

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-static-element-interactions">lint/a11y/noStaticElementInteractions</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Static Elements should not be interactive. > 1 │ {}}>; │ ^^^^^^^^^^^^^^^^^^^^^^^^^ 2 │ ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value. </code></pre>

When <a> does not have "href" attribute, that is non-interactive.

jsx

<a onClick={() => {}}></a>

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-static-element-interactions">lint/a11y/noStaticElementInteractions</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

Valid

jsx

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

Custom components are not checked.

jsx

<TestComponent onClick={doFoo} />

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Valid

Related links