restore tabindex after navigation (#4140)

mrkishi · benmccann · web-flow · commit e3410cc78071 · 2022-02-28T10:13:29.000-05:00
* restore `tabindex` after navigation

* fix focus issue in the docs

* add comments

* Update packages/kit/src/runtime/client/renderer.js

Co-authored-by: Ben McCann &lt;322311+benmccann@users.noreply.github.com&gt;

Co-authored-by: Ben McCann &lt;322311+benmccann@users.noreply.github.com&gt;
diff --git a/.changeset/honest-islands-flash.md b/.changeset/honest-islands-flash.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] `tabindex="-1"` is no longer added to `<body>`; `<html>` only briefly receives it during navigation
diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js
@@ -369,8 +369,24 @@ export class Renderer {
 			const { scroll, keepfocus } = opts;
 
 			if (!keepfocus) {
+				// Reset page selection and focus
+				// We try to mimick browsers' behaviour as closely as possible by targeting the
+				// viewport, but unfortunately it's not a perfect match — e.g. shift-tabbing won't
+				// immediately cycle from the end of the page
+				// See https://html.spec.whatwg.org/multipage/interaction.html#get-the-focusable-area
+				const root = document.documentElement;
+				const tabindex = root.getAttribute('tabindex');
+
 				getSelection()?.removeAllRanges();
-				document.body.focus();
+				root.tabIndex = -1;
+				root.focus();
+
+				// restore `tabindex` as to prevent the document from stealing input from elements
+				if (tabindex !== null) {
+					root.setAttribute('tabindex', tabindex);
+				} else {
+					root.removeAttribute('tabindex');
+				}
 			}
 
 			// need to render the DOM before we can scroll to the rendered elements
diff --git a/packages/kit/src/runtime/client/router.js b/packages/kit/src/runtime/client/router.js
@@ -73,9 +73,6 @@ export class Router {
 		this.enabled = true;
 		this.initialized = false;
 
-		// make it possible to reset focus
-		document.body.setAttribute('tabindex', '-1');
-
 		// keeping track of the history index in order to prevent popstate navigation events if needed
 		this.current_history_index = history.state?.['sveltekit:index'] ?? 0;
 
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
@@ -25,6 +25,8 @@ test.describe.parallel('a11y', () => {
 		await page.keyboard.press('Tab');
 		expect(await page.evaluate(() => (document.activeElement || {}).nodeName)).toBe('A');
 		expect(await page.evaluate(() => (document.activeElement || {}).textContent)).toBe('a');
+
+		expect(await page.evaluate(() => document.documentElement.getAttribute('tabindex'))).toBe(null);
 	});
 
 	test('announces client-side navigation', async ({ page, clicknav, javaScriptEnabled }) => {
diff --git a/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte b/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte
@@ -57,7 +57,9 @@
 			const scroll = -parseInt(document.body.style.top || '0');
 			document.body.style.position = '';
 			document.body.style.top = '';
+			document.body.tabIndex = -1;
 			document.body.focus();
+			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
 		}
 	}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/kit': patch
 +---
++
 +[breaking] `tabindex="-1"` is no longer added to `<body>`; `<html>` only briefly receives it during navigation
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,9 @@`
`57`	`57`	`const scroll = -parseInt(document.body.style.top \|\| '0');`
`58`	`58`	`document.body.style.position = '';`
`59`	`59`	`document.body.style.top = '';`
	`60`	`+ document.body.tabIndex = -1;`
`60`	`61`	`document.body.focus();`
	`62`	`+ document.body.removeAttribute('tabindex');`
`61`	`63`	`window.scrollTo(0, scroll);`
`62`	`64`	`}`
`63`	`65`	`}`