fix: wait for portals to be visible in a11y tests (#1006)

* fix: wait for portals to be visible in a11y tests

* fix: undo local change

.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import isChromatic from 'chromatic';
+import { MotionConfig } from 'framer-motion';
 import React from 'react';
 
 import '../packages/tokens/dist/index.css';
@@ -64,22 +65,26 @@ export const decorators = [
       case 'side-by-side': {
         document.documentElement.setAttribute('data-theme', 'default');
         return (
-          <div style={{ display: 'flex', flexDirection: 'row', minHeight: '100vh' }}>
-            <div style={{ width: '50vw', padding: '1rem' }}>
-              <StoryFn />
-            </div>
-            <div data-theme="dark" style={{ width: '50vw', padding: '1rem' }}>
-              <StoryFn />
+          <MotionConfig reducedMotion="user">
+            <div style={{ display: 'flex', flexDirection: 'row', minHeight: '100vh' }}>
+              <div style={{ width: '50vw', padding: '1rem' }}>
+                <StoryFn />
+              </div>
+              <div data-theme="dark" style={{ width: '50vw', padding: '1rem' }}>
+                <StoryFn />
+              </div>
             </div>
-          </div>
+          </MotionConfig>
         );
       }
       default: {
         document.documentElement.setAttribute('data-theme', theme);
         return (
-          <div style={{ padding: '1rem' }}>
-            <StoryFn />
-          </div>
+          <MotionConfig reducedMotion="user">
+            <div style={{ padding: '1rem' }}>
+              <StoryFn />
+            </div>
+          </MotionConfig>
         );
       }
     }

package.json

@@ -89,6 +89,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.0.0",
     "fast-glob": "^3.3.0",
+    "framer-motion": "10.16.1",
     "husky": "^8.0.1",
     "jsdom": "^22.1.0",
     "lint-staged": "^14.0.0",

playwright.config.ts

@@ -14,4 +14,8 @@ export default defineConfig({
       use: devices['Desktop Chrome'],
     },
   ],
+  use: {
+    screenshot: 'only-on-failure',
+    testIdAttribute: 'data-test-id',
+  },
 });

playwright/a11y.spec.ts

@@ -9,6 +9,8 @@ test.describe('Storybook a11y', async () => {
 
   for (const story of stories) {
     test(`${story}`, async ({ page }) => {
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+
       await page.goto(
         `${process.env.STORYBOOK_URL}iframe.html?args=&globals=theme:side-by-side&id=${story}&viewMode=story`
       );
@@ -35,6 +37,22 @@ test.describe('Storybook a11y', async () => {
       const root = page.locator('#storybook-root');
       await root.waitFor();
 
+      await page.waitForLoadState('domcontentloaded');
+
+      const portal = page.locator('[data-test-id="portal"]');
+
+      if ((await portal.count()) > 0) {
+        const content = page
+          .locator('[data-test-id="portal"] [style*="opacity"]:not([role="presentation"])')
+          .first();
+
+        await content.waitFor();
+
+        await expect
+          .poll(() => content.evaluate((node) => getComputedStyle(node).opacity))
+          .toBe('1');
+      }
+
       const accessibilityScanResults = await new AxeBuilder({ page })
         .options({
           runOnly: {