From 430c470ace5cfae5f53b530df54c0dc7e2046aaa Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Tue, 31 Oct 2023 15:46:44 -0400
Subject: [PATCH] Move VT route announcer styles to a class (#8965)

---
 .changeset/sweet-nails-dream.md               |  7 +++++++
 packages/astro/components/viewtransitions.css | 13 +++++++++++++
 packages/astro/src/transitions/router.ts      |  5 +----
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/sweet-nails-dream.md

diff --git a/.changeset/sweet-nails-dream.md b/.changeset/sweet-nails-dream.md
new file mode 100644
index 000000000000..c4f83837c329
--- /dev/null
+++ b/.changeset/sweet-nails-dream.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Move VT route announcer styles to a class
+
+Doing so allows stricter CSP policies.
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
index 953f462e9c23..25efea6607f1 100644
--- a/packages/astro/components/viewtransitions.css
+++ b/packages/astro/components/viewtransitions.css
@@ -54,3 +54,16 @@
 		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/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index b740326dd381..e0e93c845171 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -30,10 +30,7 @@ const announce = () => {
 	let div = document.createElement('div');
 	div.setAttribute('aria-live', 'assertive');
 	div.setAttribute('aria-atomic', 'true');
-	div.setAttribute(
-		'style',
-		'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'
-	);
+	div.className = 'astro-route-announcer';
 	document.body.append(div);
 	setTimeout(
 		() => {