🐢
airbnbのESLintルール利用時にjsx-a11y/label-has-associated-controlのエラーが消えない問題
問題
こんなコードを書いたとき・・
<div>
<label htmlFor='name'>名前</label>
<input id='name' name='name'/>
</div>
htmlForを付けているのにESLintのエラーが消えない😥
A form label must be associated with a control jsx-a11y/label-has-associated-control
結論
.eslintrc.cjs
のrules
に下記を追記して、airbnbのルールを上書きする⭐
.eslintrc.cjs
'jsx-a11y/label-has-associated-control': ['error', {
labelComponents: [],
labelAttributes: [],
controlComponents: [],
assert: 'either',
depth: 25
}],
解説
airbnbのルールでは、下記が定義されている。
'jsx-a11y/label-has-associated-control': ['error', {
labelComponents: [],
labelAttributes: [],
controlComponents: [],
assert: 'both', // ⭐コレのせい
depth: 25
}],
assert
オプションがboth
になっている場合、
htmlForだけではなく、ネストもさせないとエラーになってしまう。
assert asserts that the label has htmlFor, a nested label, both or either. Available options: 'htmlFor', 'nesting', 'both', 'either'.
なので、これをboth
以外にしてやればいい。
オプション | 意味 |
---|---|
htmlFor |
htmlForのみOK |
nesting |
ネスト形式のみOK |
both |
htmlForとネスト形式の両方が必要 |
either |
どちらかでOK |
.eslintrc.cjs
'jsx-a11y/label-has-associated-control': ['error', {
labelComponents: [],
labelAttributes: [],
controlComponents: [],
assert: 'either', // ⭐変更
depth: 25
}],
Discussion