Hash links to new pages don't focus the correct element

Describe the bug

If you click a link like <a href="#foo">, the browser will focus an element like <h2 id="foo">, which in effect (since <h2> elements aren’t typically focusable) actually means that pressing Tab will focus the next focusable element after the <h2>.

But if you click a link like <a href="/other#foo">, SvelteKit will navigate to /other and scroll to #foo, but it won’t focus the element.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nrjdx2

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 79.22 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 96.0.3
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: workspace:* => 1.0.0-next.18 
    @sveltejs/kit: workspace:* => 1.0.0-next.260 
    @sveltejs/site-kit: ^2.0.2 => 2.0.2 
    svelte: ^3.43.0 => 3.44.2

Severity

serious, but I can work around it

Additional Information

No response

[mrkishi]

Just spitballing, but would it be possible for us to manually set the hash after navigation? Something like:

• User clicks href="/route#target-hash", so we capture the link and route
• Instead of history.pushState(state, '', '/route#target-hash') we do history.pushState(state, '', '/route')
• Render route
• hash_navigating = true; location.replace('#target-hash'); (not actually hash_navigating but something similar)

[mefaba]

The reproduction link is outdated, todos section of it is throwing error. @Rich-Harris , is this bug still exists?