Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Mar 18, 2019
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
37157d7
Add a mixin for the reduce motion media query.
kjellr Feb 21, 2019
4510036
Add reduce motion media query to the appear animation.
kjellr Feb 21, 2019
cd11274
Add reduce motion media query to the modal fade animation.
kjellr Feb 21, 2019
4503f04
Add reduce motion media query to the edit post fade-in animation.
kjellr Feb 21, 2019
49d805a
Revert "Add reduce motion media query to the edit post fade-in animat…
kjellr Feb 21, 2019
e923d19
Add a11y considerations to animation docs.
kjellr Feb 21, 2019
88cb615
Set the animation duration for reduced motion to 1ms.
kjellr Mar 5, 2019
bae1330
Apply reduced motion to our fade, slide, and fullscreen animations.
kjellr Mar 5, 2019
e7c1204
Apply reduced motion to the publish panel animation.
kjellr Mar 5, 2019
35d45f7
Clean up vestibular disorder phrasing in documentation.
kjellr Mar 15, 2019
896410e
Mention the @reduce-motion mixin in the docs.
kjellr Mar 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/stylesheets/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
animation: edit-post__fade-in-animation $speed ease-out $delay;
animation-fill-mode: forwards;
@include reduce-motion;
}
10 changes: 10 additions & 0 deletions assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,3 +333,13 @@
// icon standards.
margin-right: 2px;
}

/**
* Allows users to opt-out of animations via OS-level preferences.
*/

@mixin reduce-motion {
@media (prefers-reduced-motion: reduce) {
animation-duration: 1ms !important;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@kjellr kjellr Mar 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}
}
7 changes: 7 additions & 0 deletions docs/designers-developers/designers/animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ In creating consistent animations, we have to establish physical rules for how e

Reuse animations if one already exists for your task.

## Accessibility Considerations

- Animations should be subtle. Be cognizent of users with [motion triggering vestibular disorders](https://www.ncbi.nlm.nih.gov/pubmed/29017000).
kjellr marked this conversation as resolved.
Show resolved Hide resolved
- Don't animate elements that are currently reporting content to adaptive technology (e.g., an `aria-live` region that's receiving updates). This can cause confusion wherein the technology tries to parse a region that's actively changing.
- Avoid animations that aren't directly triggered by user behaviors.
- Whenever possible, ensure that animations respect the OS-level "Reduce Motion" settings. This can be done by utilizing the [`prefers-reduce-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query.
kjellr marked this conversation as resolved.
Show resolved Hide resolved

## Inventory of Reused Animations

The generic `Animate` component is used to animate different parts of the interface. See [the component documentation](/packages/components/src/animate/README.md) for more details about the available animations.
2 changes: 2 additions & 0 deletions packages/components/src/animate/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.components-animate__appear {
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
animation-fill-mode: forwards;
@include reduce-motion;
kjellr marked this conversation as resolved.
Show resolved Hide resolved

&.is-from-top,
&.is-from-top.is-from-left {
Expand Down Expand Up @@ -30,6 +31,7 @@
.components-animate__slide-in {
animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
animation-fill-mode: forwards;
@include reduce-motion;

&.is-from-left {
transform: translateX(+100%);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
// Animate the modal frame/contents appearing on the page.
animation: components-modal__appear-animation 0.1s ease-out;
animation-fill-mode: forwards;
@include reduce-motion;
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/fullscreen-mode/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ body.js.is-fullscreen-mode {
.edit-post-header {
transform: translateY(-100%);
animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
@include reduce-motion;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@
border-left: $border-width solid $light-gray-500;
transform: translateX(+100%);
animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
@include reduce-motion;

body.is-fullscreen-mode & {
top: 0;
Expand Down