diff --git a/packages/eui/changelogs/upcoming/9095.md b/packages/eui/changelogs/upcoming/9095.md new file mode 100644 index 00000000000..1dd385001b4 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9095.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Make `EuiBasicTable` respect user's reduced motion setting by not animating when in loading state. diff --git a/packages/eui/src/components/basic_table/basic_table.styles.ts b/packages/eui/src/components/basic_table/basic_table.styles.ts index 2aaea2280e0..3d1a8c074f4 100644 --- a/packages/eui/src/components/basic_table/basic_table.styles.ts +++ b/packages/eui/src/components/basic_table/basic_table.styles.ts @@ -8,7 +8,12 @@ import { css, keyframes } from '@emotion/react'; -import { logicalCSS, euiCantAnimate } from '../../global_styling'; +import { + logicalCSS, + euiCantAnimate, + highContrastModeStyles, + preventForcedColors, +} from '../../global_styling'; import { UseEuiTheme } from '../../services'; const tableLoadingLine = keyframes` @@ -33,23 +38,40 @@ const tableLoadingLine = keyframes` } `; -export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css` - position: relative; - overflow: hidden; - - &::before { - position: absolute; - content: ''; - ${logicalCSS('width', '100%')} - ${logicalCSS('height', euiTheme.border.width.thick)} - background-color: ${euiTheme.colors.primary}; - animation: ${tableLoadingLine} 1s linear infinite; - - ${euiCantAnimate} { - animation-duration: 2s; +export const euiBasicTableBodyLoading = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return css` + position: relative; + overflow: hidden; + + &::before { + position: absolute; + content: ''; + ${logicalCSS('width', '100%')} + ${logicalCSS('height', euiTheme.border.width.thick)} + background-color: ${euiTheme.colors.primary}; + animation: ${tableLoadingLine} 1s linear infinite; + + ${euiCantAnimate} { + animation: none; + background: repeating-linear-gradient( + -45deg, + ${euiTheme.colors.backgroundBasePlain}, + ${euiTheme.colors.backgroundBasePlain} ${euiTheme.size.xs}, + ${euiTheme.colors.primary} ${euiTheme.size.xs}, + ${euiTheme.colors.primary} ${euiTheme.size.s} + ); + + ${highContrastModeStyles(euiThemeContext, { + forced: ` + ${preventForcedColors(euiThemeContext)} + `, + })} + } } - } -`; + `; +}; // Fix to make the loading indicator position correctly in Safari // For whatever annoying reason, Safari doesn't respect `position: relative;`