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;
+ }
  }
 }