sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
77.46k stars 4.04k forks source link

svelte(a11y-label-has-associated-control) shows incorrectly when using render snippet #11711

Open ViincentLim opened 1 month ago

ViincentLim commented 1 month ago

Describe the bug

The warning A form label must be associated with a control(a11y_label_has_associated_control)(svelte/valid-compile shows up even when the label has a render children inside.

<label>
    <span>{label}</span>
    {@render children?.()}
</label>

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAEz2O3WrDMAyFX0WIQVsI672b_uwNBrusd5ElSmdwZCOrhWH87sPOujvp45yPk3F2nhKaa0YeFkKDbzFih_oT65Me5JWwwxTuMlbSp1FcVPAD344WNVk8WbbqlhhEofYgwwe7GEmhwCxhgc3q2RwstywryTyMBO8SYoJcoVU_fJE3kFQc37qVjd_OT0J8Nk9n5WX1eFLI0GodPJNQzJ_2CC-xHtvdwXK_X4fXsdy3TtvdpzjwKTdQ-n37Ks8XIZ5I_r3n1-2uVM_axQ6XMLnZ0YRG5U7ls_wCoGD20E4BAAA=

<script lang="ts">
    import type { Snippet } from 'svelte';

    interface Props {
        label: string,
        children?: Snippet
    }

    let { label, children }: Props = $props();
</script>

<label>
    <span>{label}</span>
    {@render children?.()}
</label>

Logs

No response

System Info

"svelte": "5.0.0-next.136",
"svelte-eslint-parser": "^0.36.0",
"@sveltejs/kit": "^2.5.9",

Severity

annoyance

ViincentLim commented 1 month ago

Would be nice to define element tag as well

paoloricciuti commented 1 month ago

Yeah but you can't know what the render tag will render...it might render an input, a div or even nothing.

Conduitry commented 1 month ago

The only thing the compiler could do here is to silence all such warnings that might be false positives because of the {@render}. I'm not too happy with that idea. I'd probably just say you should put a <!-- svelte-ignore --> comment in if you're sure this isn't a problem.

paoloricciuti commented 1 month ago

Yeah the compiler should not make assumptions imho...you can have assumptions since you know your code. And you can even avoid the warning by using a for attribute (this again if you are sure about your code)