From f931428ae69956e15985b0cdd62712f06c08bc67 Mon Sep 17 00:00:00 2001
From: Philipp Melab <philipp.melab@gmail.com>
Date: Fri, 15 Sep 2023 07:59:52 +0000
Subject: [PATCH] fix: respect reduced motion preference and set it in
 integration tests

---
 .../components/Molecules/PageTransition.tsx   | 18 ++++++++++++++---
 packages/ui/src/components/Routes/Frame.tsx   | 20 +++++++++----------
 tests/e2e/specs/links.spec.ts                 |  6 ++++--
 tests/e2e/specs/setup.ts                      |  1 +
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/Molecules/PageTransition.tsx b/packages/ui/src/components/Molecules/PageTransition.tsx
index d571d04ec..72ca7569b 100644
--- a/packages/ui/src/components/Molecules/PageTransition.tsx
+++ b/packages/ui/src/components/Molecules/PageTransition.tsx
@@ -1,8 +1,19 @@
-import { motion } from 'framer-motion';
-import React, { PropsWithChildren } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import React, { PropsWithChildren, useEffect } from 'react';
+
+import { Messages, readMessages } from './Messages';
 
 export function PageTransition({ children }: PropsWithChildren) {
-  return (
+  const [messages, setMessages] = React.useState<Array<string>>([]);
+  useEffect(() => {
+    setMessages(readMessages());
+  }, []);
+  return useReducedMotion() ? (
+    <main id="main-content">
+      <Messages messages={messages} />
+      {children}
+    </main>
+  ) : (
     <motion.main
       id="main-content"
       initial={{ opacity: 0 }}
@@ -15,6 +26,7 @@ export function PageTransition({ children }: PropsWithChildren) {
         duration: 0.3,
       }}
     >
+      <Messages messages={messages} />
       {children}
     </motion.main>
   );
diff --git a/packages/ui/src/components/Routes/Frame.tsx b/packages/ui/src/components/Routes/Frame.tsx
index 8d7ad5a85..9c9d7b738 100644
--- a/packages/ui/src/components/Routes/Frame.tsx
+++ b/packages/ui/src/components/Routes/Frame.tsx
@@ -1,7 +1,6 @@
-import { AnimatePresence } from 'framer-motion';
-import React, { ComponentProps, PropsWithChildren, useEffect } from 'react';
+import { AnimatePresence, useReducedMotion } from 'framer-motion';
+import React, { ComponentProps, PropsWithChildren } from 'react';
 
-import { Messages, readMessages } from '../Molecules/Messages';
 import { Footer } from '../Organisms/Footer';
 import Header from '../Organisms/Header';
 
@@ -11,18 +10,17 @@ export function Frame(
     footer: ComponentProps<typeof Footer>;
   }>,
 ) {
-  const [messages, setMessages] = React.useState<Array<string>>([]);
-  useEffect(() => {
-    setMessages(readMessages());
-  }, []);
   return (
     <div>
       <Header {...props.header} />
       <main>
-        <AnimatePresence mode="wait" initial={false}>
-          <Messages messages={messages} />
-          {props.children}
-        </AnimatePresence>
+        {useReducedMotion() ? (
+          <>{props.children}</>
+        ) : (
+          <AnimatePresence mode="wait" initial={false}>
+            {props.children}
+          </AnimatePresence>
+        )}
       </main>
       <Footer {...props.footer} />
     </div>
diff --git a/tests/e2e/specs/links.spec.ts b/tests/e2e/specs/links.spec.ts
index 949052f5b..82e7e94d4 100644
--- a/tests/e2e/specs/links.spec.ts
+++ b/tests/e2e/specs/links.spec.ts
@@ -9,10 +9,12 @@ test.describe('links', () => {
     await page.getByRole('link', { name: 'link to page' }).click();
     await page.waitForURL(websiteUrl('/en/privacy'));
 
-    await page.goBack();
+    await page.goto(websiteUrl('/en/page-links'));
 
     const downloadPromise = page.waitForEvent('download');
-    await page.getByRole('link', { name: 'link to file' }).click();
+    await page
+      .getByRole('link', { name: 'link to file', includeHidden: true })
+      .click();
     const download = await downloadPromise;
     expect(download.url()).toBe(
       websiteUrl('/sites/default/files/2023-04/document_docx.docx'),
diff --git a/tests/e2e/specs/setup.ts b/tests/e2e/specs/setup.ts
index 180840892..1545e2a47 100644
--- a/tests/e2e/specs/setup.ts
+++ b/tests/e2e/specs/setup.ts
@@ -3,6 +3,7 @@ import { expect, test as setup } from '@playwright/test';
 import { cmsUrl } from '../helpers/url';
 
 setup('setup', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' });
   await page.goto(cmsUrl('/user/login'));
   await page.getByRole('textbox', { name: 'Username' }).fill('admin');
   await page.getByRole('textbox', { name: 'Password' }).fill('admin');