[a11y] Add preferred motion/animation media queries

cee-chen · cee-chen · commit 95aa6f01f9ef · 2024-04-03T11:19:10.000-07:00
diff --git a/src/components/table/table_row.styles.ts b/src/components/table/table_row.styles.ts
@@ -9,7 +9,11 @@
 import { css, keyframes } from '@emotion/react';
 
 import { UseEuiTheme, tint, shade, transparentize } from '../../services';
-import { euiBackgroundColor, logicalCSS } from '../../global_styling';
+import {
+  euiCanAnimate,
+  euiBackgroundColor,
+  logicalCSS,
+} from '../../global_styling';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
 import { euiTableVariables } from './table.styles';
@@ -146,9 +150,11 @@ const _expandedRowAnimation = ({ euiTheme }: UseEuiTheme) => {
 
   // Animation must be on the contents div inside, not the row itself
   return css`
-    .euiTableCellContent {
-      animation: ${euiTheme.animation.fast} ${euiTheme.animation.resistance} 1
-        normal none ${expandRow};
+    ${euiCanAnimate} {
+      .euiTableCellContent {
+        animation: ${euiTheme.animation.fast} ${euiTheme.animation.resistance} 1
+          normal none ${expandRow};
+      }
     }
   `;
 };
diff --git a/src/components/table/table_row_cell.styles.ts b/src/components/table/table_row_cell.styles.ts
@@ -9,7 +9,12 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
-import { euiFontSize, euiTextTruncate, logicalCSS } from '../../global_styling';
+import {
+  euiCanAnimate,
+  euiFontSize,
+  euiTextTruncate,
+  logicalCSS,
+} from '../../global_styling';
 
 import { euiTableVariables } from './table.styles';
 
@@ -58,8 +63,11 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
       actions: css`
         .euiBasicTableAction-showOnHover {
           opacity: 0;
-          transition: opacity ${euiTheme.animation.normal}
-            ${euiTheme.animation.resistance};
+
+          ${euiCanAnimate} {
+            transition: opacity ${euiTheme.animation.normal}
+              ${euiTheme.animation.resistance};
+          }
         }
 
         &:focus-within,
