The button loses focus from the button when moving to the next subpages

The button loses focus from the button when moving to the next subpages: Example (with a description of the problem): https://github.com/lukaszpolowczyk/focus-button

Problem

1. Refresh page
2. Press Tab key on the keyboard
3. The button are focused
4. Press Right Arrow on the keyboard
5. The button loses focus

Question: How do I keep focus without using element.focus() or anything like that?

GIF with this:

The code looks like this:

<!-- src/routers/[slug].svelte -->
<svelte:head><title>Lost focus - Sveltekit Routers</title></svelte:head>
<script>
  import { page } from '$app/stores';
  
</script>
<br>
page {$page.params.slug}

<!-- src/routers/$layout.svelte -->
<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  
  import Keydown from "svelte-keydown";
</script>
<Keydown on:ArrowRight={() => goto(`${Number($page.params.slug)+1}`) } />

<button on:click={()=>goto(`${Number($page.params.slug)+1}`)}>goto({Number($page.params.slug)+1})</button>
or press RightArrow
<slot />

[dummdidumm]

GitHub issues are reserved for bug reports or feature requests. Please ask usage questions on StackOverflow or the Discord server.

By default a page change will not keep the element focused, that’s an accessibility best practice default. You’ll need to handle that yourself.

[lukaszpolowczyk]

@dummdidumm @ahtcx I want it too. Maybe similar to sveltekit:noscroll and goto(href, { replaceState, noscroll }) , e.g. sveltekit:keepfocus and goto(href, { replaceState, keepfocus })?

It looks like something easy to do. L245 of router.js would have to give in a similar condition as L254 of router.js.