fix: skip navigation if only url hash change

.changeset/funny-trees-breathe.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Fix hash change focus behaviour

packages/kit/src/runtime/client/router.js

@@ -157,16 +157,17 @@ export class Router {
 
 			if (!this.owns(url)) return;
 
-			const noscroll = a.hasAttribute('sveltekit:noscroll');
+			// Check if new url only differs by hash
+			if (url.href.split('#')[0] === location.href.split('#')[0]) {
+				// Call `pushState` to add url to history so going back works.
+				// Also make a delay, otherwise the browser default behaviour would not kick in
+				setTimeout(() => history.pushState({}, '', url.href));
+				return;
+			}
 
-			const i1 = url_string.indexOf('#');
-			const i2 = location.href.indexOf('#');
-			const u1 = i1 >= 0 ? url_string.substring(0, i1) : url_string;
-			const u2 = i2 >= 0 ? location.href.substring(0, i2) : location.href;
 			history.pushState({}, '', url.href);
-			if (u1 === u2) {
-				window.dispatchEvent(new HashChangeEvent('hashchange'));
-			}
+
+			const noscroll = a.hasAttribute('sveltekit:noscroll');
 			this._navigate(url, noscroll ? scroll_state() : null, false, [], url.hash);
 			event.preventDefault();
 		});

packages/kit/test/apps/basics/src/routes/routing/hashes/target.svelte

@@ -0,0 +1,15 @@
+<ol>
+	<li><a href="#p1">first paragraph</a></li>
+	<li><a href="#p2">second paragraph</a></li>
+</ol>
+
+<p id="p1">paragraph 1</p>
+<p id="p2">paragraph 2</p>
+
+<li><a href="#nowhere">next focus element</a></li>
+
+<style>
+	p:target {
+		color: red;
+	}
+</style>

packages/kit/test/apps/basics/test/test.js

@@ -1452,18 +1452,57 @@ test.describe.parallel('Routing', () => {
 
 	test('back button returns to previous route when previous route has been navigated to via hash anchor', async ({
 		page,
-		clicknav,
-		back
+		clicknav
 	}) => {
 		await page.goto('/routing/hashes/a');
 
-		await clicknav('[href="#hash-target"]');
+		await page.click('[href="#hash-target"]');
 		await clicknav('[href="/routing/hashes/b"]');
 
-		await back();
+		await page.goBack();
 		expect(await page.textContent('h1')).toBe('a');
 	});
 
+	test('focus works if page load has hash', async ({ page }) => {
+		await page.goto('/routing/hashes/target#p2');
+
+		await page.keyboard.press('Tab');
+		expect(await page.evaluate(() => (document.activeElement || {}).textContent)).toBe(
+			'next focus element'
+		);
+	});
+
+	test('focus works when navigating to a hash on the same page', async ({ page }) => {
+		await page.goto('/routing/hashes/target');
+
+		await page.click('[href="#p2"]');
+		await page.keyboard.press('Tab');
+
+		expect(await page.evaluate(() => (document.activeElement || {}).textContent)).toBe(
+			'next focus element'
+		);
+	});
+
+	test(':target pseudo-selector works when navigating to a hash on the same page', async ({
+		page
+	}) => {
+		await page.goto('/routing/hashes/target#p1');
+
+		expect(
+			await page.evaluate(() => {
+				const el = document.getElementById('p1');
+				return el && getComputedStyle(el).color;
+			})
+		).toBe('rgb(255, 0, 0)');
+		await page.click('[href="#p2"]');
+		expect(
+			await page.evaluate(() => {
+				const el = document.getElementById('p2');
+				return el && getComputedStyle(el).color;
+			})
+		).toBe('rgb(255, 0, 0)');
+	});
+
 	test('fallthrough', async ({ page }) => {
 		await page.goto('/routing/fallthrough-simple/invalid');
 		expect(await page.textContent('h1')).toBe('Page');