-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
a11y-label-has-associated-control
error for control inside of component
#6469
Comments
There's not really a reasonable way to handle this well, because each component is compiled independently. I guess we could not emit a warning whenever there's any component inside the label. That would eliminate these false positives but add false negatives. I'm not sure which is better. You can also always add a comment to suppress the warning. This isn't an error and isn't stopping the component from being compiled. |
@Conduitry thanks for the explanation! The Even though this is only a warning, I think it's important to have some way of satisfying this rule, as "noisy" warnings start to get ignored at some point, which makes them less useful. For now, I'm suppressing the warning as you suggest, but it would be nice to have some other options. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
I'm pretty new to Svelte, but from what I understand the warnings are emitted from the Svelte compiler. <svelte:options isInput={true}/> This of course requires that (sub)components are compiled before their parents. Alternatively, a simple but very powerful option is to implement some kind of annotation to silence a warning locally: <svelte:options ignore-a11y-label-has-associated-control/>
<label>
A label
<TextInput />
</label> This would then allow the compiler to ignore an error on a component level. The benefit of this approach is that it'll always be available as a workaround for false positives, even if we reduce the number of false positives in the future. |
For completeness sake, this exists: <!-- svelte-ignore a11y-label-has-associated-control -->
<label>
A label
<TextInput />
</label> |
Is that the only possible way to compile? |
Describe the bug
The
a11y-label-has-associated-control
linting error is raised whenever a nested control is contained in a child component. For example, if you have a custom component,TextInput
, which renders an<input />
, then this produces the "no associated control" error.This issue is similar to #5528, where this error is generated if the input is inside a conditional statement.
Reproduction
This REPL demonstrates the issue: https://svelte.dev/repl/8396b0b08a2d460da2d7e781cc0ee4b7?version=3.38.3
Logs
No response
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: