Support for prefers-reduced-motion

[notsidney]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The transition components Collapse, Fade, Grow, Slide, and Zoom (and other MUI components with animations) should have reduced motion in their animations, by either disabling the animations altogether or using a simple fade animation, when the prefers-reduced-motion: reduce media query is true.

Current Behavior 😯

None of the components change behaviour and show the same animation when the media query is true.

Examples 🌈

Here’s the MDN doc for this media query. It’s supported on Chrome, Firefox, and Safari on Windows, Mac, and iOS.

This WebKit blog has several examples of how to support this media query.

Context 🔦

I’m currently adding support for this media query in my web app by disabling page transitions and other custom transitions by using the media query in JSS. But I’m also using MUI’s built-in transition components and there is currently no easy way to disable those animations.

I could use the useMediaQuery hook to modify what my component returns to remove the transition components, but this is quite cumbersome. Supporting this media query directly would make it a lot easier to build more accessible web apps.

[oliviertassinari]

Would the following be an acceptable solution?

import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { ThemeProvider } from '@material-ui/core/styles';

function App() {
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        ...(prefersReducedMotion
          ? {
              // So we have `transition: none;` everywhere
              transitions: { create: () => 'none' },
            }
          : {}),
      }),
    [prefersReducedMotion],
  );

  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  );
}

[joshwooding]

@oliviertassinari I'm guessing that doesn't affect the transition components? Fade, Grow, etc.

[oliviertassinari]

@joshwooding It does disable these components too.

[oliviertassinari]

An alternative with global CSS:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

I'm wondering 🤔 I have seen it in https://hankchizljaw.com/wrote/a-modern-css-reset/ (BTW, there are potential good resets we can deploy in CssBasline for v5).