Description
Describe the problem
a11y-label-has-associated-control
rule checks if a label has a for attribute.
However, the current situation is that even if for=""
, the validation check passes.
(since it only checks if the label has a for attribute)
svelte/src/compiler/compile/nodes/Element.ts
Line 450 in ebaa891
Worse, even if there is a mismatch between for
and id
, it is still considered OK.
<label for="hoge">label</label>
<input type="text" id="fuga" />
https://svelte.dev/repl/43799b2d7f004a039c634db91a94efda?version=3
Describe the proposed solution
I think the for attribute of a label should not only be added, but it should also be matched with the corresponding control's id attribute.
I would like the validation to be such that if the id attribute of the corresponding control and the for attribute of the label match, then there is no problem, like this
<!-- bad -->
<label for="hoge">label</label>
<input type="text" id="fuga" />
<!-- good -->
<label for="hoge">label</label>
<input type="text" id="hoge" />
Alternatives considered
N/A
Importance
would make my life easier