Making use of prefers-reduced-motion media query

[MikeRogers0]

As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.

[MikeRogers0]

It looks like Travis is failing because stylelint doesn't know about prefers-reduced-motion.

Is there a prefered way to whitelist media features or should I open a PR to stylelint ( I think the LOC is https://github.com/stylelint/stylelint/blob/f6fbad37e1ffa84aed4a996b3829b4275e7320c5/lib/reference/keywordSets.js#L553 )?

[patrickhlauke]

no time to test just now, but i believe editing build\.stylelintrc to include the following (or something very similar to it) should work

"media-feature-name-no-unknown": [true, {
  "ignoreMediaFeatureNames": ["prefers-reduced-motion"]
}]

(and no, i think it's not a bug on stylelint, as prefers-reduced-motion isn't in an official w3c spec yet, iirc)

[MikeRogers0]

@patrickhlauke That fixed it! Tests are now passing 🎉

[patrickhlauke]

just to check, did you compile this locally and test it actually works as expected?

[MikeRogers0]

just to check, did you compile this locally and test it actually works as expected?

@patrickhlauke I did indeed 👍 If you'd like I can record a little demo video of it working?

[brianteeman]

Looks great to me - thanks

[mdo]

We should document this, too.

[MikeRogers0]

@mdo I'm happy to do that :)

Is after the "Visually hidden content" section in docs/4.0/getting-started/accessibility.md a suitable place?

Copy wise I'm thinking:

Reduced Motion

iOS & MacOS users have a system preference to Reduce Motion which is passed onto the browser. If a user has selected this option, Bootstrap will attempt to reduce the the amount of transitions on a page by defaulting them to transition: none;.

[brianteeman]

@MikeRogers0 iirc the reduce motion preference is not limited to the browser so maybe delete "which is passed onto the browser"

[patrickhlauke]

I think documentation-wise I'd lean more towards the following (but yes, the accessibility markdown seems the most appropriate place):

### Reduced motion

Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed) will be disabled. Currently, support is limited to Safari on macOS and iOS.

@mdo ?

[patrickhlauke]

incidentally (testing this PR) it seems .carousel-fade and animated progress bars always use transitions/animations, regardless of the setting (and presumably regardless of $enable-transitions ?)

[MikeRogers0]

@patrickhlauke I'm happy to update scss/_carousel.scss and scss/_progress.scss to remove their animation, though I'm not sure if that would reduce animation to much & make things to clunky. What do you think?

Also updated docs/4.0/getting-started/accessibility.md :)

[brianteeman]

Updating the progress bar to remove the animation on the candy strip was my initial aim - sadly cant test it right now as am away from my apple

[MikeRogers0]

Updated the progress bar & carousel now have reduced animation :)

Here is a demo:

[patrickhlauke]

ah sorry @MikeRogers0 i didn't intend for you to have to do the carousel and progressbar thing. was more of a passing note.

wondering if those two should (and should have been from the start?) be using the transition mixin instead. that'd then also stop them when $enable-transitions is changed. @mdo, thoughts?

[patrickhlauke]

@MikeRogers0 would it be possible for you to omit the last commit (and we'll tackle the carousel and progress bar animations separately, probably tying them to the mixin/$enable-transitions instead). once that's done, I think we're good to merge :)

[MikeRogers0]

@patrickhlauke Reverted that commit 👍

[patrickhlauke]

filed a separate issue here #25709

@mdo, good to merge?

[MikeRogers0]

@mdo @patrickhlauke Any plans to merge this? :)

[patrickhlauke]

@MikeRogers0 went ahead and merged. Think @mdo was happy in principle, but with volume of issues/PRs we get, it's sometimes easy for things to fall between the cracks :)

[MikeRogers0]

Ah wonderful! Thank you so much!

[brianteeman]

Thank you