Focus outline on body after redirect

GitRowin commented 1 year ago

Describe the bug

Important note: This ONLY happens in Firefox with Tailwind CSS.

Whenever I navigate (by using the address bar!) to a page that redirects to another page (using SvelteKit's goto), a focus outline appears at the bottom of the page:

firefox_SWgEwLwguf

Reproduction

https://github.com/GitRowin/sveltekit-outline-bug

Simply navigate to http://localhost:5173/test and you should see the focus outline.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 2600X Six-Core Processor
    Memory: 8.96 GB / 15.93 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1194.0), Chromium (110.0.1587.41)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0
    @sveltejs/kit: ^1.5.0 => 1.5.5
    svelte: ^3.54.0 => 3.55.1
    vite: ^4.0.0 => 4.1.

Severity

annoyance

Additional Information

No response

Rich-Harris commented 1 year ago

This seems to be happening because SvelteKit sets tabIndex on body to -1 before focusing it after a navigation, which is necessary for accessible navigations:

https://github.com/sveltejs/kit/blob/312429662b321bab1d5b96eb5a69dec020e43bb4/packages/kit/src/runtime/client/client.js#L1892-L1903

That, in combination with this Tailwind code is enough to show the outline:

:-moz-focusring {
  outline: auto;
}

You can override the :-moz-focusring styles with your own but I'm not sure if that will cause other problems.

GitRowin commented 1 year ago

This seems to do the trick:

body:-moz-focusring {
    outline: none;
}

I hope this can be fixed by SvelteKit though. Next.js and Nuxt.js do not have this problem.

sveltejs / kit