← Back to rules

jsx-a11y/no-static-element-interactions 正确性

它的作用

强制要求带有事件处理器的静态 HTML 元素必须具有适当的 ARIA 角色。

为什么这是个问题？

静态 HTML 元素在无障碍上下文中没有语义意义。 当这些元素接收点击或键盘事件处理器时，必须声明一个角色， 以向辅助技术表明其交互目的。

示例

此规则的 错误 代码示例：

<div onClick={() => {}} />
<span onKeyDown={handleKeyDown} />

此规则的 正确 代码示例：

<button onClick={() => {}} />
<div onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />

配置

此规则接受一个包含以下属性的配置对象：

allowExpressionValues

type: boolean

default: false

如果为 true，则允许角色属性值为 JSX 表达式（例如 role={ROLE}）。 如果为 false，则仅允许字符串字面量的角色值。

handlers

type: string[]

default: null

应触发此规则的事件处理器名称数组（例如 onClick、onKeyDown）。

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-static-element-interactions": "error"
  }
}

CLI

oxlint --deny jsx-a11y/no-static-element-interactions --jsx-a11y-plugin

参考资料

• 规则源码