From 2306f62bf19bb0696a9455aaf2eea6b083d9fdae Mon Sep 17 00:00:00 2001
From: Mike Rogers <me@mikerogers.io>
Date: Tue, 20 Mar 2018 09:28:21 +0000
Subject: [PATCH] Making use of `prefers-reduced-motion` media query (#25641)
* Making use of `prefers-reduced-motion` media query
As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.
* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md
---
.stylelintrc | 3 +++
docs/4.0/getting-started/accessibility.md | 4 ++++
scss/mixins/_transition.scss | 4 ++++
3 files changed, 11 insertions(+)
diff --git a/.stylelintrc b/.stylelintrc
index c9d67250e8..c65940be24 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -33,6 +33,9 @@
"no-descending-specificity": null,
"no-duplicate-selectors": true,
"number-leading-zero": "never",
+ "media-feature-name-no-unknown": [true, {
+ "ignoreMediaFeatureNames": ["prefers-reduced-motion"]
+ }],
"order/properties-order": [
"position",
"top",
diff --git a/docs/4.0/getting-started/accessibility.md b/docs/4.0/getting-started/accessibility.md
index 0f9e87ae18..d4381aa21e 100644
--- a/docs/4.0/getting-started/accessibility.md
+++ b/docs/4.0/getting-started/accessibility.md
@@ -43,6 +43,10 @@ For visually hidden interactive controls, such as traditional "skip" links, `.sr
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
+### 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.
+
## Additional resources
- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/)
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index 7e33dee319..f853821344 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -6,4 +6,8 @@
transition: $transition;
}
}
+
+ @media screen and (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
}
--
GitLab