svelte-todomvc icon indicating copy to clipboard operation
svelte-todomvc copied to clipboard

A11y warning: Avoid using autofocus

Open j-hannes opened this issue 6 years ago • 1 comments

When running the application, a warning appears in the console:

rollup v1.7.3
bundles src/main.js → public/bundle.js...
(!) svelte plugin: A11y: Avoid using autofocus
src/TodoMVC.svelte
92:     on:keydown={createNew}
93:     placeholder="What needs to be done?"
94:     autofocus
        ^
95:   >
96: </header>
src/TodoMVC.svelte
117:               on:keydown={handleEdit}
118:               on:blur={submit}
119:               autofocus
                   ^
120:             >
121:           {/if}
created public/bundle.js in 369ms

[2019-10-13 10:47:46] waiting for changes...

j-hannes avatar Oct 13 '19 09:10 j-hannes

Seems there is some argument over it, https://github.com/sveltejs/svelte/issues/6629, because it is not browser-native (it is handled by Svelte explicitly calling focus). The solutions are server-side rendering and letting the browser handle it, or else carefully customizing behavior based on device characteristics like in https://github.com/huggingface/chat-ui/pull/183. But mostly, it should just be disabled by adding <!-- svelte-ignore a11y-autofocus -->

Mathnerd314 avatar Oct 18 '24 16:10 Mathnerd314