fix(v2): add support for prefers-reduced-motion in hideable sidebar

[lex111]

Motivation

See #3615 (comment)

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Enable the reduce motion option and try hide doc sidebar.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

[netlify]

Deploy preview for docusaurus-2 ready!

Built with commit a9cc96c

https://deploy-preview-3739--docusaurus-2.netlify.app

[slorber]

LGTM, can confirm it fixes a bug with reduced motions.

Simek, can you confirm this fixed your issue? Do you have reduced motions enabled?

[Simek]

@slorber It fixes an issue for me too. According to the docs prefers-reduced-motion property depends on the system settings:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_preferences

Interesting is that, according to MDN the user preferences should only affect Firefox.

[slorber]

tested locally and can confirm the macOS system pref does impact chrome behavior

[Simek]

@lex111 @slorber After this change (or other CSS related changes, maybe even Infima bump) the following code is being added to the styles:

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important
  }
}

witch breaks the animations on the React Native website:

[lex111]

Yep, probably we should have indicated about this in the release notes :/

This is one of the negative aspects of having such an opportunity.

Try use the !important rule to get around this behavior.

[Simek]

@lex111

https://www.w3.org/WAI/WCAG21/Techniques/css/C39.html:

This technique relates to Success Criterion 2.3.3: Animation from Interactions (Sufficient).

Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders. [...] A typical example is 'parallax scrolling', where backgrounds move at different rates. The movement due to scrolling the page is essential (and under the users control), but additional movement triggered by the scrolling can also trigger vestibular symptoms.

I think that static, in-place logo animation do not apply to the case for this property, the animation is not bound to the scrolling.

Also if you want to stick to the rule it only should apply only to the Docusaurus components, no the custom pages created by users.

[slorber]

Hi @lex111

I think we may need to revert this change and apply it more sparingly.

We may prefer to avoid affecting the animations that Docusaurus users put on their pages , and only scope this reduced anim logic to infima classes only

Josh Comeau recommends opting-in for animations when user has no preference instead of opting out when he wants to remove motion here: https://joshwcomeau.com/react/prefers-reduced-motion/

Also his mediaquery seems more reliable that the current one (despite not recommended)

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

maybe we should open a different issue because it's not really related to this PR, unfortunately as Infima is not open-sourced yet we can't discuss it there

[Simek]

@lex111 Also the implementation in Infima is incorrect because it do not cover the CSS Keyframes animation usage in conjunction with animation-name property, which leads to animation working fine in the V2 website header:

[lex111]

Yes, it was a short-sighted innovation. We can fix this in the next Docusaurus release, which I understand will be next week. 2020-11-19 17:58 GMT+03:00, Bartosz Kaszubowski <notifications@github.com>:

…

@lex111 Also the implementation in Infima is incorrect because it do not cover the CSS Keyframes animation usage in conjunction with `animation-name` property, which leads to animation working fine in the V2 website header:  -- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: #3739 (comment)

[slorber]

@lex111 will probably make a small bugfix release soon because the init template has a bug (#3784), and I'd like to have a stable release before merging i18n

Maybe can you revert this change for the bugfix release, and figure out a better way to apply it in an upcoming release?

[lex111]

Agree, it is better to remove this piece of code from Infima. I can only release new version tomorrow, so maybe you can do it yourself today? 2020-11-19 19:14 GMT+03:00, Sébastien Lorber <notifications@github.com>:

…

@lex111 will probably make a small bugfix release soon because the init template has a bug (#3784), and I'd like to have a stable release before merging i18n Maybe can you revert this change for the bugfix release, and figure out a better way to apply it in an upcoming release? -- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: #3739 (comment)

[Simek]

@lex111 Will reverting Infima to alpha.16 or alpha.15 resolve the issue or were there more changes in those versions, which you don't want not to lose?

[lex111]

Reduced interface support will be removed in Infima version .17 (the corresponding PR already merged). Let's postpone the adoption of this feature until we figure out the best way to implement it. @slorber will release new Docusaurus version on monday the next week, I guess.

@Simek until then, could you please build the RN site using .68v and confirm that it are rendered properly as before? The thing is, in the latest version of Docusaurus we have enabled the advanced minification of CSS bundle, and I want to know that in site like React Native that uses a lot of custom CSS code, nothing is broken.