noNoninteractiveElementInteractions

JSX and TSX

摘要

¥Summary

规则生效日期：v2.0.0

¥Rule available since: v2.0.0
诊断类别：lint/a11y/noNoninteractiveElementInteractions

¥Diagnostic Category: lint/a11y/noNoninteractiveElementInteractions
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
来源：

¥Sources:
- 与 jsx-a11y/no-noninteractive-element-interactions 相同
  
  ¥Same as jsx-a11y/no-noninteractive-element-interactions

如何配置

¥How to configure

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

描述

¥Description

禁止在非交互式元素上使用事件处理程序。

¥Disallow use event handlers on non-interactive elements.

非交互式 HTML 元素表示用户界面中的内容和容器。非交互式元素包括 <main>、<area>、<h1>（<h2> 等）、<img>、<li>、<ul> 和 <ol>。

¥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/a11y/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

noNoninteractiveElementInteractions

摘要

如何配置

描述

示例

无效

有效

可访问性指南

资源

相关链接