jsx-a11y/control-has-associated-label 正确性
它的作用
强制要求一个控件（交互元素）具有文本标签。
为什么这不好？
没有可访问文本标签的交互元素（例如 <button>）会使辅助技术的用户难以或无法理解该控件的用途。
示例
以下是此规则的错误代码示例：
jsx
<button />
<input type="text" />
<a href="/path" />
<th />
<div role="button" />
<div role="checkbox" />以下是此规则的正确代码示例：
jsx
<button>Save</button>
<button aria-label="Save" />
<label>Name <input type="text" /></label>
<a href="/path">Learn more</a>
<th>Column Header</th>
<div role="button">Submit</div>
<div role="checkbox" aria-labelledby="label_id" />配置
此规则接受一个包含以下属性的配置对象：
controlComponents
type: string[]
default: []
要视为交互控件的自定义 JSX 组件。
depth
type: integer
default: 2
在元素内搜索可访问标签的最大深度。 默认为 2。
ignoreElements
type: string[]
default: []
要忽略的元素（除默认忽略列表之外）。 默认为 []。
ignoreRoles
type: string[]
default: []
要忽略的交互角色。 默认为 []。
labelAttributes
type: string[]
default: []
用于检查可访问标签文本的附加属性。
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/control-has-associated-label": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/control-has-associated-label": "error",
},
});bash
oxlint --deny jsx-a11y/control-has-associated-label --jsx-a11y-plugin版本
此规则于 v1.65.0 中添加。