← Back to rules

jsx-a11y/no-autofocus 正确性

An auto-fix is available for this rule.

作用

强制不要在元素上使用 autoFocus 属性。

为什么这不好？

自动聚焦元素会给有视觉和无视觉障碍的用户都带来可用性问题。在没有用户输入的情况下焦点被转移时，可能会让人感到迷失方向，并且会干扰辅助技术。用户应该控制页面上焦点何时以及移动到哪里。

例外情况

<dialog> 元素、具有 role="dialog" 的元素，以及带有 popover 属性的元素（及其后代）都被豁免，因为在打开时将焦点 引导到这些元素中是预期行为。 参见 MDN: <dialog> 可访问性。

示例

以下是此规则的错误代码示例：

<div autoFocus />
<div autoFocus="true" />
<div autoFocus="false" />
<div autoFocus={undefined} />

以下是此规则的正确代码示例：

<div />
<dialog><input autoFocus /></dialog>
<div role="dialog"><input autoFocus /></div>
<div popover><input autoFocus /></div>

配置

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

ignoreNonDOM

type: boolean

default: false

决定是否检查开发者创建的组件。

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-autofocus": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["jsx-a11y"],
  rules: {
    "jsx-a11y/no-autofocus": "error",
  },
});

CLI

oxlint --deny jsx-a11y/no-autofocus --jsx-a11y-plugin

版本

此规则是在 v0.0.19 中添加的。

参考资料

• Rule Source
• Open rule in Oxc Playground