feat: add data-sveltekit-replacestate and -keepfocus options to links

[axwalker]

An additional data-sveltekit-replacestate option on top of the existing options.

Closes #9014
Closes #7895

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[axwalker]

I didn't make the corresponding form changes because I haven't used SvelteKit forms yet - so I don't think I'm best placed to make/verify any changes in that area!

[axwalker]

Linting is failing because of a TS error in the following:

<a id="one" href="/data-sveltekit/replacestate/target" data-sveltekit-replacestate>one</a>

I couldn't find where I would make the appropriate updates to fix this. I tried looking for corresponding data-sveltekit-noscroll TS definitions but didn't find anything. All I could find are some generated types in test-tmp/.../elements/index.d.ts:

// SvelteKit
'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;

[axwalker]

Just had another little look at this and realised the corresponding types are within sveltejs/language-tools.

I can make a PR there too but I'm not sure what the process is for ensuring the changes to both would be released in sync?

---

Update: PR within language-tools here: sveltejs/language-tools#1865

[axwalker]

@dummdidumm what's the process for merging in changes across the 3 repos this affects? Will updates to sveltejs/language-tools and sveltejs/svelte get published first and then we can move forward with this PR?

Is there anything else I can do to help on this PR here?

[dummdidumm]

Yes we will likely merge Svelte/language-tools first.

That said - since you now nicely laid out all the needed PRs across the repos, would you be open to also adding data-sveltekit-keepfocus (would close #7895)? Then we'd have parity with the goto options. (you don't need to add a test for this in my opinion, it's already covered through testing goto)

[axwalker]

Sure, I'll try and have a look in the next few days.

[axwalker]

I've added -keepfocus, and also made changes for the form handlers. As I said before, I'm not too well versed in Sveltekit forms yet so might be worth checking that part of the PR a bit more closely!

[dummdidumm]

Note to self to try out: I'm wondering if this really keeps focus on the element prior to clicking the a tag, or if the a tag itself is then the focus. Probably the latter, which is why this mainly makes sense for <form> elements, which we probably should note here

[geoffrich]

I'll give this a closer look later, but I think we should have some sort of note saying this is primarily intended for forms. I think it's usually an antipattern for links, unless you know what you're doing.

[geoffrich]

Confirmed the currently-focused element is the link itself. I think the language is fine as-is, not sure there's a better way to phrase it that doesn't exclude the form case. I added a suggested paragraph below discussing the a11y considerations.

[dummdidumm]

Thank you for your PRs across all three needed repositories to get this in!