Skip to content

Commit 4409502

Browse files
docs: update data-sveltekit-keepfocus docs (#9421)
--------- Co-authored-by: Simon H <[email protected]>
1 parent e3a336b commit 4409502

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

documentation/docs/30-advanced/30-link-options.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ In SvelteKit, `<a>` elements (rather than framework-specific `<Link>` components
66

77
You can customise the behaviour of links with `data-sveltekit-*` attributes. These can be applied to the `<a>` itself, or to a parent element.
88

9+
These options also apply to `<form>` elements with [`method="GET"`](/docs/form-actions#get-vs-post).
10+
911
## data-sveltekit-preload-data
1012

1113
Before the browser registers that the user has clicked on a link, we can detect that they've hovered the mouse over it (on desktop) or that a `touchstart` or `mousedown` event was triggered. In both cases, we can make an educated guess that a `click` event is coming.
@@ -78,17 +80,15 @@ Sometimes you don't want navigation to create a new entry in the browser's sessi
7880

7981
## data-sveltekit-keepfocus
8082

81-
When creating a search input using a `<form>` which reflects its input value in the URL, you might not want it to lose focus after navigation. Adding a `data-sveltekit-keepfocus` attribute to it...
83+
Sometimes you don't want [focus to be reset](/docs/accessibility#focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input. Adding a `data-sveltekit-keepfocus` attribute to it...
8284

8385
```html
8486
<form data-sveltekit-keepfocus>
8587
<input type="text" name="query">
8688
</form>
8789
```
8890

89-
...will cause the currently focused element to retain focus after navigation. Note that this only really makes sense for `<form>` elements. If you would add this to a link, the focused element would be the `<a>` tag, which is probably not what you want. You should also only use this on elements that still exist after navigation.
90-
91-
By default, focus will be reset to the body.
91+
...will cause the currently focused element to retain focus after navigation. In general, avoid using this attribute on links, since the focused element would be the `<a>` tag (and not a previously focused element) and screen reader and other assistive technology users often expect focus to be moved after a navigation. You should also only use this attribute on elements that still exist after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users.
9292

9393
## data-sveltekit-noscroll
9494

0 commit comments

Comments
 (0)