Add support for reduced-motion on opacity animations

.changeset/honest-crews-guess.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add support for prefers-reduced-motion animations on TooltipV2 & Overlay

e2e/components/SelectPanel.test.ts

@@ -34,6 +34,7 @@ const scenarios = matrix({
     {
       id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch',
       name: 'Height Initial with Underflowing Items After Fetch',
+      visual: false,
     },
     {
       id: 'components-selectpanel-dev--with-css',
@@ -61,17 +62,22 @@ test.describe('SelectPanel', () => {
       featureFlags: {primer_react_select_panel_with_modern_action_list: scenario.modernActionList},
     }
 
-    test(`${name} @vrt ${theme} ${flag}`, async ({page}) => {
-      await visit(page, {id: scenario.story.id, globals})
-
-      // Open select panel
-      const isPanelOpen = await page.isVisible('[role="listbox"]')
-      if (!isPanelOpen) {
-        await page.keyboard.press('Tab')
-        await page.keyboard.press('Enter')
-      }
-      expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}${flag}.png`)
-    })
+    if (scenario.story.visual !== false) {
+      test(`${name} @vrt ${theme} ${flag}`, async ({page}) => {
+        await visit(page, {id: scenario.story.id, globals})
+        await page.emulateMedia({reducedMotion: 'reduce'})
+
+        // Open select panel
+        const isPanelOpen = await page.isVisible('[role="listbox"]')
+        if (!isPanelOpen) {
+          await page.keyboard.press('Tab')
+          await page.keyboard.press('Enter')
+        }
+        expect(await page.screenshot({animations: 'disabled', caret: 'hide'})).toMatchSnapshot(
+          `SelectPanel.${name}.${theme}${flag}.png`,
+        )
+      })
+    }
 
     test(`${name} axe @aat ${theme} ${flag}`, async ({page}) => {
       await visit(page, {id: scenario.story.id, globals})
@@ -99,14 +105,20 @@ test.describe('SelectPanel', () => {
     }
 
     // windows high contrast mode: light
-    await page.emulateMedia({forcedColors: 'active', colorScheme: 'light'})
-    expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+    await page.emulateMedia({forcedColors: 'active', colorScheme: 'light', reducedMotion: 'reduce'})
+    await page.getByRole('listbox').waitFor({state: 'visible'})
+    await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+
+    expect(await page.screenshot({animations: 'disabled', caret: 'hide'})).toMatchSnapshot(
       `SelectPanel-Default-forced-colors-light-modern-action-list--true.png`,
     )
 
     // windows high contrast mode: dark
-    await page.emulateMedia({forcedColors: 'active', colorScheme: 'dark'})
-    expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+    await page.emulateMedia({forcedColors: 'active', colorScheme: 'dark', reducedMotion: 'reduce'})
+    await page.getByRole('listbox').waitFor({state: 'visible'})
+    await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(0, 0, 0)')
+
+    expect(await page.screenshot({animations: 'disabled', caret: 'hide'})).toMatchSnapshot(
       `SelectPanel-Default-forced-colors-dark-modern-action-list--true.png`,
     )
   })

e2e/components/TooltipV2.test.ts

@@ -14,7 +14,6 @@ const stories = [
   {
     title: 'Calculated Direction',
     id: 'components-tooltipv2-features--calculated-direction',
-    disableAnimations: true,
   },
   {
     title: 'Icon Button With Description',
@@ -45,9 +44,8 @@ test.describe('TooltipV2', () => {
 
             // Default state
             await page.keyboard.press('Tab')
-            await expect(page).toHaveScreenshot(`TooltipV2.${story.title}.${theme}.png`, {
-              animations: 'disabled',
-            })
+            await page.emulateMedia({reducedMotion: 'reduce'})
+            await expect(page).toHaveScreenshot(`TooltipV2.${story.title}.${theme}.png`)
           })
         })
       }

packages/react/src/Overlay/Overlay.module.css

@@ -18,7 +18,6 @@
   background-color: var(--overlay-bgColor);
   border-radius: var(--borderRadius-large);
   box-shadow: var(--shadow-floating-small);
-  animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
 
   &:focus {
     outline: none;
@@ -178,3 +177,9 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .Overlay {
+    animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+}

packages/react/src/TooltipV2/Tooltip.module.css

@@ -33,7 +33,6 @@
     background: var(--tooltip-bgColor);
     border: 0;
     border-radius: var(--borderRadius-medium);
-    opacity: 0;
     -webkit-font-smoothing: subpixel-antialiased;
     inset: auto;
   }
@@ -99,24 +98,27 @@
     content: '';
   }
 
-  /* Animation styles */
-  &:popover-open,
-  &:popover-open::before {
-    animation-name: tooltip-appear;
-    animation-duration: 0.1s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
-    animation-delay: 0s;
-  }
+  /* Only show animations if users don't have a preference for reduced motion */
+  @media screen and (prefers-reduced-motion: no-preference) {
+    /* Animation styles */
+    &:popover-open,
+    &:popover-open::before {
+      animation-name: tooltip-appear;
+      animation-duration: 0.1s;
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-in;
+      animation-delay: 0s;
+    }
 
-  /* Animation styles */
-  &:global(.\\:popover-open) /* stylelint-disable-line selector-class-pattern */,
-  &:global(.\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {
-    animation-name: tooltip-appear;
-    animation-duration: 0.1s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
-    animation-delay: 0s;
+    /* Animation styles */
+    &:global(.\\:popover-open) /* stylelint-disable-line selector-class-pattern */,
+    &:global(.\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {
+      animation-name: tooltip-appear;
+      animation-duration: 0.1s;
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-in;
+      animation-delay: 0s;
+    }
   }
 }