src/content/docs/linter/rules/no-noninteractive-element-interactions.mdx
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){
"linter": {
"rules": {
"a11y": {
"noNoninteractiveElementInteractions": "error"
}
}
}
}
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), ``, <li>, <ul> and <ol>.
A Non-interactive element does not support event handlers(mouse and key handlers).
<div onClick={() => {}}>button</div>
<button onClick={() => { }}>button</button>
// 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>
// 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>
// Hidden from screen reader.
<div onClick={() => {}} aria-hidden />
// Custom component is not checked.
<SomeComponent onClick={() => {}}>button</SomeComponent>
// Spread attributes is not supported.
<div {...{"onClick":() => {}}}>button</div>