announce page changes (#307)

.changeset/selfish-avocados-develop.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Announce page changes

packages/kit/src/core/create_app.js

@@ -133,7 +133,7 @@ function generate_app(manifest_data) {
 	return trim(`
 		<!-- This file is generated by @sveltejs/kit — do not edit it! -->
 		<script>
-			import { setContext, afterUpdate } from 'svelte';
+			import { setContext, afterUpdate, onMount } from 'svelte';
 			import ErrorComponent from ${JSON.stringify(manifest_data.error.url)};
 
 			// error handling
@@ -153,6 +153,22 @@ function generate_app(manifest_data) {
 
 			$: stores.page.set(page);
 			afterUpdate(stores.page.notify);
+
+			let mounted = false;
+			let navigated = false;
+			let title = null;
+
+			onMount(() => {
+				const unsubscribe = stores.page.subscribe(() => {
+					if (mounted) {
+						navigated = true;
+						title = document.title;
+					}
+				});
+
+				mounted = true;
+				return unsubscribe;
+			});
 		</script>
 
 		<Layout {...(props_0 || {})}>
@@ -162,5 +178,25 @@ function generate_app(manifest_data) {
 				${pyramid.replace(/\n/g, '\n\t\t\t\t')}
 			{/if}
 		</Layout>
+
+		{#if mounted}
+			<div id="svelte-announcer" aria-live="assertive" aria-atomic="true">
+				{#if navigated}
+					Navigated to {title}
+				{/if}
+			</div>
+		{/if}
+
+		<style>
+			#svelte-announcer {
+				clip: rect(0 0 0 0);
+				clip-path: inset(50%);
+				height: 1px;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap;
+				width: 1px;
+			}
+		</style>
 	`);
 }

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

@@ -18,4 +18,22 @@ export default function (test) {
 		assert.equal(await evaluate(() => document.activeElement.nodeName), 'A');
 		assert.equal(await evaluate(() => document.activeElement.textContent), 'a');
 	});
+
+	test('announces client-side navigation', async ({ visit, click, contains, html, js }) => {
+		await visit('/accessibility/a');
+
+		const has_live_region = await contains('aria-live');
+
+		if (js) {
+			assert.ok(has_live_region);
+
+			// live region should exist, but be empty
+			assert.equal(await html('[aria-live]'), '');
+
+			await click('[href="/accessibility/b"]');
+			assert.equal(await html('[aria-live]'), 'Navigated to b'); // TODO i18n
+		} else {
+			assert.ok(!has_live_region);
+		}
+	});
 }