Prevent the route announcer from being visible (#8977)

* Prevent the route announcer from being visible * Update the number of expected styles in the tests
withastro · Nov 22, 2023 · 89854b6 · 89854b6
1 parent 20a36ad
commit 89854b6
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 18 deletions.
diff --git a/.changeset/five-ads-look.md b/.changeset/five-ads-look.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent route announcer from being visible
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -5,9 +5,22 @@ export interface Props {
 	fallback?: Fallback;
 }
 
-const { fallback = 'animate' } = Astro.props as Props;
+const { fallback = 'animate' } = Astro.props;
 ---
-
+<style is:global>
+/* Route announcer */
+.astro-route-announcer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	overflow: hidden;
+	white-space: nowrap;
+	width: 1px;
+	height: 1px;
+}
+</style>
 <meta name="astro-view-transitions-enabled" content="true" />
 <meta name="astro-view-transitions-fallback" content={fallback} />
 <script>

diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
@@ -54,16 +54,3 @@
 		animation: none !important;
 	}
 }
-
-/* Route announcer */
-.astro-route-announcer {
-	position: absolute;
-	left: 0;
-	top: 0;
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	overflow: hidden;
-	white-space: nowrap;
-	width: 1px;
-	height: 1px;
-}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro
@@ -0,0 +1,14 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+
+---
+<html>
+	<head>
+		<title>Testing</title>
+		<ViewTransitions />
+	</head>
+	<body>
+		<p id="one">One</p>
+		<a href="/no-directive-two">Go to 2</a>
+	</body>
+</html>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro
@@ -0,0 +1,13 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+
+---
+<html>
+	<head>
+		<title>Testing</title>
+		<ViewTransitions />
+	</head>
+	<body>
+		<p id="two">Two</p>
+	</body>
+</html>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -684,7 +684,7 @@ test.describe('View Transitions', () => {
 	});
 
 	test('client:only styles are retained on transition (1/2)', async ({ page, astro }) => {
-		const totalExpectedStyles = 8;
+		const totalExpectedStyles = 9;
 
 		await page.goto(astro.resolveUrl('/client-only-one'));
 		let msg = page.locator('.counter-message');
@@ -703,8 +703,8 @@ test.describe('View Transitions', () => {
 	});
 
 	test('client:only styles are retained on transition (2/2)', async ({ page, astro }) => {
-		const totalExpectedStyles_page_three = 10;
-		const totalExpectedStyles_page_four = 8;
+		const totalExpectedStyles_page_three = 11;
+		const totalExpectedStyles_page_four = 9;
 
 		await page.goto(astro.resolveUrl('/client-only-three'));
 		let msg = page.locator('#name');
@@ -887,4 +887,18 @@ test.describe('View Transitions', () => {
 		await locator.type(' World');
 		await expect(locator).toHaveValue('Hello World');
 	});
+
+	test('Route announcer is invisible on page transition', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/no-directive-one'));
+
+		let locator = page.locator('#one');
+		await expect(locator, 'should have content').toHaveText('One');
+
+		await page.click('a');
+		locator = page.locator('#two');
+		await expect(locator, 'should have content').toHaveText('Two');
+
+		let announcer = page.locator('.astro-route-announcer');
+		await expect(announcer, 'should have content').toHaveCSS('width', '1px');
+	});
 });