feat: add a11y autocomplete-valid

[cruessler]

This PR adds validation to the autocomplete attribute for <input> elements, similar to the ESLint rule jsx-a11y/autocomplete-valid. It is related to #820.

The implementation generally follows the implementation in axe-core.

This PR currently only works for <input> elements. According to the spec, these rules also apply to <textarea> and <select> elements, but the corresponding ESLint rule only applies to <input> elements.

This PR is quite strict in validating the autocomplete value, because I tried to follow the spec as much as possible. axe-core which is what the ESLint rule uses under the hood, dropped support for checking for approriate types at some point. See dequelabs/axe-core#2912 and dequelabs/axe-core#2917. I saw that you recently relaxed checks on a different rule, and I was wondering whether my PR is too strict. I’m not deeply familiar with A11y, so any guidance is welcome!

I got most of the test cases from ESLint and axe-core. I was not sure whether it made sense to add more test cases. Let me know whether you want any changes in that regard!

[vercel]

@cruessler is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[dummdidumm]

Thanks for researching that the rule is deprecated in axe-core! Given that axe-core is quite strict in other places, I'd say eslint-jsx-a11y just hasn't caught up on that one yet. We therefore shouldn't implement this, so I'm closing this issue, sorry. Still congratulations on your first Svelte PR!

[cruessler]

axe-core used to have two rules related to autocomplete: autocomplete-valid and autocomplete-appropriate. Only the latter has been removed. The former still exists as far as I can tell.

[dummdidumm]

I'm sorry, I misunderstood then. I then suggest to remove the parts from the PR that are testing for autocomplete-appropriate and only keep the parts for autocomplete-valid.

Btw I saw that you added quite a few new tokens, it may be that they are already part of axobject-query or aria-query which are already dependencies of Svelte so you can use them.

[cruessler]

I added a few comments, hoping to provide a bit of context for the review.

[cruessler]

The types come from the inferred return type of get_static_value. I was unsure whether to add them, but wanted to be cautious in order not to miss edge cases.

[cruessler]

The language comes from the spec. Given that axe-core’s implementation does not implement this part of the spec, do you want me to remove it?

[dummdidumm]

What exactly do you mean by that? If it's about simplifying this to always allow on and off, then yes, let's relax this

[cruessler]

I was not able to find any of the following tokens in either axobject-query or aria-query.

[cruessler]

axe-core does not have this as an error, but does not apply the rule.

https://github.com/dequelabs/axe-core/blob/c7957d2e8be4bfd5c9aa678036fb945dd23a9c27/test/integration/rules/autocomplete-valid/autocomplete-valid.html

[dummdidumm]

I'd say let's relax this then to allow the empty and boolean value. We also need a test that checks if it succeeds if a synamic value is given, like autocomplete={foo}

[cruessler]

axe-core does not have this as a test case.

https://github.com/dequelabs/axe-core/blob/c7957d2e8be4bfd5c9aa678036fb945dd23a9c27/test/integration/rules/autocomplete-valid/autocomplete-valid.html

[dummdidumm]

Thank you!

[Conduitry]

This has been released in 3.59.0 - thank you!

[xxaier]

[Success] All components are bundled
▲ [WARNING] A11y: The value 'null' is not supported by the attribute 'autocomplete' on element <input type="text"> [plugin esbuild-svelte]

    ../pkg/user/ui/Auth.svelte:1:135:
      1 │ ..."{account}" autocomplete="{ up ? 'off' : 'username' }" re...
        ╵             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                                                                                                                          ^
2:
3: <script lang="coffee">function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error);
 return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

  The plugin "esbuild-svelte" was triggered by this import

    src/index.js:9:7:
      9 │ import './user/Auth.svelte';
        ╵        ~~~~~~~~~~~~~~~~~~~~

why this error when autocomplete as value ?