← Back to rules

jsx-a11y/label-has-associated-control 正确性

它做了什么

强制要求 <label> 标签包含文本标签，并与相应的表单控件相关联。

为什么这是错误的？

一个未正确关联到表单控件（如 <input>）或不包含可访问文本的表单标签，会阻碍使用辅助技术（如屏幕阅读器）的用户。用户可能无法获得足够的信息来理解该表单控件的目的。

示例

以下为 不正确 的代码示例：

function Foo(props) {
    return <label {...props} />
}

<input type="text" />
<label>Surname</label>

以下为 正确 的代码示例：

function Foo(props) {
  const { htmlFor, ...otherProps } = props;

  return <label htmlFor={htmlFor} {...otherProps} />;
}

<label>
  <input type="text" />
  Surname
</label>;

配置

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

assert

type: "htmlFor" | "nesting" | "both" | "either"

default: "either"

标签与控件之间所需关联的类型。

controlComponents

type: string[]

default: []

被视作表单控件的自定义 JSX 组件。

depth

type: integer

default: 2

搜索嵌套控件的最大深度。

labelAttributes

type: string[]

default: ["alt", "aria-label", "aria-labelledby"]

用于检查可访问标签文本的属性。

labelComponents

type: string[]

default: ["label"]

被视作标签的自定义 JSX 组件。

如何使用

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

配置文件 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/label-has-associated-control": "error"
  }
}

CLI

oxlint --deny jsx-a11y/label-has-associated-control --jsx-a11y-plugin

参考资料

• 规则源码