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

@@ -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",

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/)

scss/mixins/_transition.scss

@@ -6,4 +6,8 @@
       transition: $transition;
     }
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }