Warning: A11y: A form label must be associated with a control

[korexus]

In a recent update, Svelte has added an HTML validation check for the a11y rule that a label should be associated with a form element. This was done as part of https://github.com/sveltejs/svelte/issues/820

This warning is triggered by the unrelated element used in Svelte Native to invoke a NativeScript Label, which represents any text. It is evident in the hello world REPL example https://svelte-native.technology/repl?version=3.24.1&example=hello-world, complaining about the labels defined on lines 5 and 7.

According to a comment in the linked issue, the warning behaviour can be filtered by adding a warning handler such as

onwarn(warning, onwarn) {
  if (!/A11y:/.test(warning.message)) {
    onwarn(warning);
  }
},

Adding this to svelte-native-webpack.config.js solves the issue for me. It's probably fair to disable all a11y checks, but it is possible to be more specific. ~~I'll submit a pull request shortly~~.

[edit] I've got local modifications to svelte-native/demo and svelte-native-template but suspect this is not everywhere that needs to be changed. Happy to submit some PRs if it helps, but given it's just a case of sprinkling the above code (or something similar) around it may be simpler for me not to be the one doing it.

[erflynn21]

Would you mind copy and pasting a more complete snippet from your svelte-native-webpack.config.js to show how this handler should be added in? I tried for awhile to get it to work and couldn't seem to figure it out. I'm newer to Webpack so it's a little confusing. Thanks!

[korexus]

Hi @erflynn21

The full rules definition I have in svelte-native-webpack.config.js is:

    config.module.rules.push({
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'svelte-loader-hot',
                options: {
                    preprocess: svelteNativePreprocessor(),
                    hotReload: true,
                    hotOptions: {
                        native: true
                    },
                    onwarn: (warning, onwarn) => {
                        if (!/A11y:/.test(warning.message)) {
                            onwarn(warning);
                        }
                    },
                }
            }
        ]
    });

this is part of the module.exports block, which in my copy starts on line 4.

I forgot all about this after I made the warnings go away in my own project. Maybe I should make that PR after all...

[korexus]

https://github.com/halfnelson/svelte-native-template/pull/17

[halfnelson]

Looks good. Unfortunately there are a few svelte-native templates around. I think ideally I would get a patch into sveltejs itself and tell it not to generate A11y warnings for namespaces that aren't html/svg etc