Get rid of "A11y: Avoid using autofocus" warning

[taw]

Describe the bug

Let's call this warning for what it is - a bug.

autofocus is 100% legitimate feature of HTML5, and just because it can be abused it shouldn't be triggering warnings.

Just some of many websites that use autofocus:

• google.com
• bing.com
• yahoo.com

Warning on something that is key feature a lot of major websites use makes no sense. The alternative of focusing the main input with js is not an improvement at all.

I'm not the first person affected. This has been raised many times in the past, and unreasonably closed without fixing.

Warning systems are useless if most of the warnings are of very low quality like this one; and we should absolutely be getting rid of bad warnings in default configuration. If someone wants to enable extra strict warnings, this should not be default at least.

Reproduction

Legitimately use <input autofocus>, and get this silly warning.

Logs

(!) Plugin svelte: A11y: Avoid using autofocus

### System Info

```shell
System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 60.79 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nodenv/shims/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 7.13.0 - ~/.nodenv/shims/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.1
  npmPackages:
    rollup: ^2.3.4 => 2.56.0
    svelte: ^3.0.0 => 3.42.1

### Severity

annoyance

[bluwy]

IMO one of the reasons why it's flagged as a warning is because Svelte handes autofocus a bit differently - it calls el.focus() on mount, instead of letting the browser doing the work. This is because on initial page load, there's no element with the autofocus tag, until Svelte actually renders the element (unless page is SSR-ed).

But a flaw with the above is that if you have elements that are conditionally rendered, and within it has the autofocus attribute. , it will jump focus to it when you, for example, click on another button that conditionally renders that element (Bad a11y). That's why the warning is there.

1. So what if we remove Svelte's special handling of autofocus? That'll make others ask: "Why autofocus doesn't work?" (Bad DX)

2. Or what if we just remove the warning? Users will use autofocus without considering paragraph 2, and result in poor experience for screen readers, tab navigation, etc. (Bad a11y and UX)

Between both, I'd rather be screamed by Svelte so that I know I'm doing something bad. Unless if you're trying to mimic the behaviour for initial page load (not conditional rendering), then you can use svelte-ignore and call it a day. Svelte can't tell what you're doing to provide a warning or not.

That's my 2c.

For completeness, duplicate of #1865

[taw]

Warnings make sense in two cases:

• something should just not be used ever, as it has no legitimate uses, or extremely rare
• there exists a better alternative

In this case both are false. autofocus has many legitimate uses - including literally Internet's most popular website; and the alternatives of hand-writing JS code doing the pre-focusing, or not pre-focusing are both actively worse.

Therefore this warning needs to go. (and all other warnings that don't fit into those two categories)

[bluwy]

something should just not be used ever, as it has no legitimate uses, or extremely rare

Sounds like the definition for "errors". Warnings can be used for a variety of reasons to warn users that something bad may happen, though it's ok if you ignore it. So I'd disagree with this statement.

there exists a better alternative

There is an alternative, <!-- svelte-ignore a11y-autofocus -->. You don't need to write you own focus logic to workaround it.

I still think that this warning is here to stay.

[MarcusOtter]

This warning is reasonable in my opinion. You should have a very specific use-case (like search engines, which were the only examples you mentioned) to make autofocus justifyable. And if you really are building something like a search engine (or similar use case) then it's easy enough to ignore the warning with <!-- svelte-ignore a11y-autofocus --> as mentioned by @bluwy. The comment indicates that you know what you are doing and you've thought about whether you should be using it or not. After all, it is just a warning, and it can be ignored if it doesn't apply to you.

Also just because some popular websites does something doesn't mean you should too. WebAIM Million 2021 revealed that 97.4% of the top 1 million home pages had detectable WCAG 2 errors (not warnings). They found that 40% of home pages had skipping heading levels; developers aren't exactly great at picking the right tool for the job, not even the developers of the most popular sites. If Svelte can warn for stuff like this that's a good thing, and if you have the option to ignore this because you have a legitimate reason to use it, that's a good thing too.

Also, it seems like this issue has already been discussed between Rich and Conduitry (see #882) and it was closed in favor of <!-- svelte-ignore a11y-autofocus -->.

[benbender]

Just for completeness: The reason why autofocus should be generally avoided, is that it's messing up the focus order for screenreaders and similar assistive technologies. Additionally, logical "focus order" is also a success criterion on the official WCAG 2.0 accessibility guidelines by the W3C.

[samclaus]

...developers aren't exactly great at picking the right tool for the job, not even the developers of the most popular sites.

Amen.

[bluwy]

Closing as duplicate of #1865

[Bilge]

This warning makes no sense inside a <dialog>.

[saminton]

Just for completeness: The reason why autofocus should be generally avoided, is that it's messing up the focus order for screenreaders and similar assistive technologies. Additionally, logical "focus order" is also a success criterion on the official WCAG 2.0 accessibility guidelines by the W3C.

I came here after getting this warning during the build process and was confused as to why. The mdn webdocs specifically says "The autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog."

After reading the comments I understand why there's a warning, but I'm not convinced it should say "Avoid using autofocus". You could argue that even when taking Svelte out of the equation the autofocus attribute can be misused and result in a similar bad UX, it's all about using the attribute correctly, not avoiding it altogether.

The official Svelte documentation just makes things confusing, it directly contradicts The mdn webdocs (a web standard) and doesn't bother explaining why.

Imo the warning and documentation should be at least be reworded to something more along the lines of "autofocus can mess up the focus order for screenreaders and similar assistive technologies, use with caution" stating th the warning can be disabled with the use of <!-- svelte-ignore a11y-autofocus --> allowing users to getting a better understanding of the problem rather than the current "Enforce that autofocus is not used on elements". It makes it sound any use of the autofocus attribute is bad which is simply not the case.

[bfontaine]

it directly contradicts The mdn webdocs (a web standard)

@saminton MDN is just a wiki that anyone can contribute to, it’s not a Web standard in any way.

[MarcusOtter]

@bfontaine This is true, but it says the same thing in the actual HTML standard:

As such, authors should use the autofocus attribute on the descendant element of the dialog that the user is expected to immediately interact with after the dialog opens. If there is no such element, then authors should use the autofocus attribute on the dialog element itself.

_{(which anyone can contribute to as well)}