Move VT route announcer styles to a class (#8965)

withastro · Oct 31, 2023 · 430c470 · 430c470
1 parent ef8964c
commit 430c470
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/.changeset/sweet-nails-dream.md 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
@@ -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
@@ -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(
 		() => {