[a11y] Add preferred motion/animation media queries

elastic · Apr 3, 2024 · ffe02fd · ffe02fd
1 parent 9780d05
commit ffe02fd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
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,