reset focus properly on navigation (#307)

Author: Rich-Harris

.changeset/tidy-books-reply.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Reset focus properly

packages/kit/src/runtime/internal/router/index.js

@@ -124,6 +124,9 @@ export class Router {
 
 		const selected = this.select(new URL(location.href));
 		if (selected) return this.renderer.start(selected);
+
+		// make it possible to reset focus
+		document.body.setAttribute('tabindex', '-1');
 	}
 
 	select(url) {
@@ -177,9 +180,7 @@ export class Router {
 
 		await this.renderer.render(selected);
 
-		if (document.activeElement instanceof HTMLElement) {
-			document.activeElement.blur();
-		}
+		document.body.focus();
 
 		const deep_linked = hash && document.getElementById(hash.slice(1));
 		if (scroll) {

test/apps/basics/src/routes/focus/$layout.svelte

@@ -0,0 +1,3 @@
+<nav><a href="/focus/a">a</a> <a href="/focus/b">b</a></nav>
+
+<slot />

test/apps/basics/src/routes/focus/__tests__.js

@@ -0,0 +1,21 @@
+import * as assert from 'uvu/assert';
+
+export default function (test) {
+	test.only('resets focus', async ({ visit, click, keyboard, evaluate, contains }) => {
+		await visit('/focus/a');
+
+		await click('[href="/focus/b"]');
+		assert.ok(await contains('b'));
+		assert.equal(await evaluate(() => document.activeElement.nodeName), 'BODY');
+		await keyboard.press('Tab');
+		assert.equal(await evaluate(() => document.activeElement.nodeName), 'A');
+		assert.equal(await evaluate(() => document.activeElement.textContent), 'a');
+
+		await click('[href="/focus/a"]');
+		assert.ok(await contains('a'));
+		assert.equal(await evaluate(() => document.activeElement.nodeName), 'BODY');
+		await keyboard.press('Tab');
+		assert.equal(await evaluate(() => document.activeElement.nodeName), 'A');
+		assert.equal(await evaluate(() => document.activeElement.textContent), 'a');
+	});
+}

test/apps/basics/src/routes/focus/a.svelte

@@ -0,0 +1 @@
+<p>a</p>

test/apps/basics/src/routes/focus/b.svelte

@@ -0,0 +1 @@
+<p>b</p>

test/runner.js

@@ -15,7 +15,8 @@ async function setup({ port }) {
 		await page
 			.waitForFunction(
 				({ expectedValue, selector }) =>
-					document.querySelector(selector) && document.querySelector(selector).textContent === expectedValue,
+					document.querySelector(selector) &&
+					document.querySelector(selector).textContent === expectedValue,
 				{ expectedValue, selector },
 				{ timeout: defaultTimeout }
 			)
@@ -28,7 +29,7 @@ async function setup({ port }) {
 
 	const capture_requests = async (operations) => {
 		const requests = [];
-		const on_request = request => requests.push(request.url());
+		const on_request = (request) => requests.push(request.url());
 		page.on('request', on_request);
 
 		try {
@@ -56,9 +57,9 @@ async function setup({ port }) {
 
 	return {
 		base,
-		visit: path => page.goto(base + path),
-		contains: async str => (await page.innerHTML('body')).includes(str),
-		html: async selector => await page.innerHTML(selector, { timeout: defaultTimeout }),
+		visit: (path) => page.goto(base + path),
+		contains: async (str) => (await page.innerHTML('body')).includes(str),
+		html: async (selector) => await page.innerHTML(selector, { timeout: defaultTimeout }),
 		fetch: (url, opts) => fetch(`${base}${url}`, opts),
 		text,
 		evaluate: (fn) => page.evaluate(fn),
@@ -73,9 +74,10 @@ async function setup({ port }) {
 		wait_for_function: (fn, arg, options) =>
 			page.waitForFunction(fn, arg, { timeout: defaultTimeout, ...options }),
 		capture_requests,
-		set_extra_http_headers: headers => page.setExtraHTTPHeaders(headers),
+		set_extra_http_headers: (headers) => page.setExtraHTTPHeaders(headers),
 		pathname: () => page.url().replace(base, ''),
-		$: selector => page.$(selector)
+		keyboard: page.keyboard,
+		$: (selector) => page.$(selector)
 	};
 }
 
@@ -88,15 +90,15 @@ export function runner(callback, options = {}) {
 
 		const duplicate = (test_fn) => {
 			return (name, callback) => {
-				test_fn(`${name} [no js]`, async context => {
+				test_fn(`${name} [no js]`, async (context) => {
 					await callback({
 						...context,
 						js: false
 					});
 				});
 
 				if (!options.amp) {
-					test_fn(`${name} [js]`, async context => {
+					test_fn(`${name} [js]`, async (context) => {
 						await callback({
 							...context,
 							js: true,
@@ -108,8 +110,8 @@ export function runner(callback, options = {}) {
 						});
 					});
 				}
-			}
-		}
+			};
+		};
 
 		const test = duplicate(suite);
 		test.skip = duplicate(suite.skip);