jsx-a11y/label-has-associated-control 正しさ
何を検査するか
label タグがテキストラベルと関連するコントロールを持つことを強制します。
なぜ悪いのか
フォームのラベルが適切にフォームコントロール（例：<input>）と関連付けられていない、またはアクセシブルなテキストを含んでいない場合、スクリーンリーダーなどの補助技術を利用しているユーザーにとってアクセシビリティが損なわれます。その結果、ユーザーがフォームコントロールの目的を十分に理解できなくなる可能性があります。
例
このルールに対して不正なコードの例：
jsx
function Foo(props) {
return <label {...props} />
}
<input type="text" />
<label>Surname</label>このルールに対して正しいコードの例：
jsx
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 で有効化するには、次のように使用できます：
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/label-has-associated-control": "error"
}
}bash
oxlint --deny jsx-a11y/label-has-associated-control --jsx-a11y-plugin