Warn when view transitions run on a prefer-reduced-motion device (#10222

) * Warn when view transitions run on a prefere-reduced-motion device * ViewTransitions.astro aktualisieren Co-authored-by: Emanuele Stoppa <[email protected]> --------- Co-authored-by: Emanuele Stoppa <[email protected]>
withastro · Feb 26, 2024 · ade9759 · ade9759
1 parent 6012163
commit ade9759
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/wicked-eyes-prove.md b/.changeset/wicked-eyes-prove.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Adds a warning in DEV mode when using view transitions on a device with prefer-reduced-motion enabled.
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -51,6 +51,9 @@ const { fallback = 'animate' } = Astro.props;
 	}
 
 	if (supportsViewTransitions || getFallback() !== 'none') {
+		if (import.meta.env.DEV && window.matchMedia('(prefers-reduced-motion)').matches) {
+			console.warn(`[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.`);
+		}
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
 			if (ev.composed) {