Skip to content
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

svelte(a11y-label-has-associated-control) shows incorrectly when using if-statements #6442

Open
MarcusOtter opened this issue Jun 24, 2021 · 3 comments
Labels
bug compiler Changes relating to the compiler

Comments

@MarcusOtter
Copy link

MarcusOtter commented Jun 24, 2021

Describe the bug
The warning A11y: A form label must be associated with a control. shows up even if the label has an associated input inside it, when if-statements are used. Example:

<!-- A11y: A form label must be associated with a control. -->
<label>
    {#if true}
        <input type="text">
    {/if}
</label>

<!-- No warning -->
<label>
    <input type="text">
</label>

To Reproduce
https://svelte.dev/repl/ab0b74aea51c44f382d2378257406a66?version=3.38.3

Expected behavior
No warning as long as every branch is guaranteed to have a form control.

This also goes for more complicated statements like:

<label>
    {#if condition1}
        <input type="text">
    {:else if condition2}
        <textarea></textarea>
    {:else}
        <select></select>
    {/if}
</label>

Information about your Svelte project:
npmPackages:
rollup: ^2.3.4 => 2.46.0
svelte: ^3.0.0 => 3.38.1

Severity
Given the first workaround (below), not very severe. Minor inconvience. If I couldn't disable the warning it would've been near unbearable to code with it since the warning is on every single line of the label element (which wraps everything).

That being said, when ignoring the warning it does open up to actually making mistakes by having some branch of the if-statement not including a form control.

Workarounds

  1. Ignore it with a comment

    <!-- svelte-ignore a11y-label-has-associated-control -->
    <label>
        {#if true}
            <input type="text">
        {/if}
    </label>
  2. If you only have one control (or all of them share the same id)

    <label for="myControl">
        {#if true}
            <input type="text" id="myControl">
        {/if}
    </label>
@MarcusOtter
Copy link
Author

This has been mentioned in #5528 but did not have its own issue.

@pngwn pngwn added bug compiler Changes relating to the compiler labels Jun 27, 2021
@MarcusOtter
Copy link
Author

Also possibly related to #6469

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug compiler Changes relating to the compiler
Projects
None yet
Development

No branches or pull requests

3 participants
@pngwn @MarcusOtter and others