noStaticElementInteractions
诊断类别：lint/nursery/noStaticElementInteractions
¥Diagnostic Category: lint/nursery/noStaticElementInteractions
自从：v1.9.0
¥Since: v1.9.0
来源：
¥Sources:
强制具有点击处理程序的静态可见元素（例如 <div>）使用有效的角色属性。
¥Enforce that static, visible elements (such as <div>) that have click handlers use the valid role attribute.
静态 HTML 元素没有语义含义。这在 <div> 和 <span> 的情况下很明显。对于看似语义但在可访问性层中没有语义映射的元素，情况就不那么清楚了。例如，没有 href 属性的 <a>、<meta>、<script>、<picture>、<section> 和 <colgroup>（仅举几例）没有语义层映射。它们和 <div> 一样毫无意义。
¥Static HTML elements do not have semantic meaning. This is clear in the case of <div> and <span>. 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>.
WAI-ARIA 角色属性 赋予元素语义映射。然后可以通过辅助技术向用户表达语义值。为了向静态元素添加交互性（例如鼠标或键事件监听器），还必须为该元素赋予角色值。
¥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.
来源：jsx-a11y/no-static-element-interactions
¥Source: jsx-a11y/no-static-element-interactions
¥Examples
¥Invalid
<div onClick={() => {}}></div>;code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ 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.
<span onClick={() => {}}></span>;code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Static Elements should not be interactive.
> 1 │ <span onClick={() => {}}></span>;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
当 <a> 没有 “href” 属性时，即非交互式。
¥When <a> does not have “href” attribute, that is non-interactive.
<a onClick={() => {}}></a>code-block.jsx:1:1 lint/nursery/noStaticElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ 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.
¥Valid
<> <div role="button" onClick={() => {}}></div> <span role="scrollbar" onClick={() => {}}></span> <a href="http://example.com" onClick={() => {}}></a></>¥Related links