Begin adding support for the prefers-reduced-motion setting, Add a11y notes to the animation docs.

[kjellr]

As noted by @ryelle in #8029 (comment), the prefers-reduced-motion media query is a way for websites to respect an OS-level reduce motion setting.

In this PR, I've added a quick @mixin that we can apply as needed to opt-in to this setting. I've also begun adding it to a couple of our animations to start:

• The menu appear animation added in Try menu appear animation & start work on handbook #13617.
• The modal window fade/move animation added in Don't focus close button on modal open/Try a modal appear animation #9900.

Unfortunately, this can't be added to all animations (yet). For example, the menu slide-in animation moves the menu from its off-screen position into its intended position on screen. As written right now, if we remove the animation, the menu will never be moved on screen.

It also can't be used in cases where the visibility/opacity of an item is only set by the animation. For instance, I tried applying it to edit-post__fade-in-animation, which is used in a number of places to fade in content. This worked in some cases, but a few elements (like the block mover icons) didn't appear at all when Reduce Motion was enabled.

Both of those examples are totally solvable, but I wanted to keep this PR simple for now. 🙂

This PR also adds @joedolson and @ryelle's accessibility recommendations from #8029 to the animation design documentation for greater visibility.

---

Testing:

1. On a Mac, Open System Preferences > Accessibility.
2. Select "Display" from the left-hand column.
3. Check the box labeled "Reduce motion"
4. Open Gutenberg using Safari or Firefox (These are the only browsers that support this media query at the moment).
5. Make sure that the menus appear with no animation.
6. Make sure that modal windows appear with no animation.

[afercia]

Discussed during today's accessibility bug-scrub, definitely appreciating some exploration with prefers-reduced-motion. Thanks!

[kjellr]

Unfortunately, this can't be added to all animations (yet). For example, the menu slide-in animation moves the menu from its off-screen position into its intended position on screen. As written right now, if we remove the animation, the menu will never be moved on screen.

Update: I was able expand this PR to cover this instance, along with many other animations, thanks to a trick @youknowriad shared above. Instead of setting animation: none, I changed the reduce motion setting to animation-duration: 1ms !important;. Initially, it was suggested to use 0ms, but Safari didn't seem to land on the final state when I tried that. 1ms gets the job done, and results in no discernible animation in my tests.

This PR now effects the following animations:

• The menu appear animation added in Try menu appear animation & start work on handbook #13617.
• The modal window fade/move animation added in Don't focus close button on modal open/Try a modal appear animation #9900.
• The sliding sidebar animation added in Try: Add animation to sidebar. #13635
• The fullscreen animation added in Try a full screen mode appear animation #9910
• Our reusable fade animation
• The publish panel slide animation

I'd love another review, as well as thoughts on the documentation update included in this PR as well. Thanks!

[ryelle]

Checked the animations out in Mac/Safari & it's working great 🙂 Left some notes on the docs, that looks good too– anything more might be too basic and not necessary, like don't use a rapid flashing animation, and don't loop animations (which is covered by the speed guidelines).

[m-e-h]

I know I'm late to this merged tickets party but thought I'd mention the lack of transition-duration: 1ms !important; in this mixin.

Not sure if a transition is even used anywhere but it would make the mixin a little more versatile.

[kjellr]

Good call — we could try that too. I wonder if it'd make sense to create two different mixins — one for transition, and one for animation. Just so that we aren't including unused !important rules when we don't need them. I may be overthinking it though. 😄

In any case, seems worth exploring! Feel free to open up a PR.