Apply smooth-scroll when `prefers-reduced-motion: no-preference` (#31877)

* feat(reboot): apply smooth-scroll when not prefers-reduced-motion

* docs(migration): mention scroll-behavior in alpha3

* docs(accessibility): mention scroll-behavior in reduced motion section

* docs(accessibility): rewording smooth scroll sentence

* feat(variable): introduce enable-smooth-scroll variable

* docs(accessibility): reword smooth-scroll sentence

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 223adfd86ef3ec8a0b6feddec0e0a5bbe4851ecb..e144c9bf7c55e7ce7eaee2fdd913a4de0ef983b9 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -27,6 +27,12 @@
 
 :root {
   font-size: $font-size-root;
+
+  @if $enable-smooth-scroll {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
 }
 
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 59850a592dd71282b6a1e2354e8a9621bf5f366d..4c0e04917cc0a878d96109f40deeabf45cbd532e 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -211,6 +211,7 @@ $enable-shadows:              false !default;
 $enable-gradients:            false !default;
 $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
+$enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;

diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md
index b32daec7336c6890b60e5ca9f13ff9cd6315db2f..524c8828908da82646302214f59bb598a4740dd8 100644 (file)
--- a/site/content/docs/5.0/getting-started/accessibility.md
+++ b/site/content/docs/5.0/getting-started/accessibility.md
@@ -47,6 +47,8 @@ For visually hidden interactive controls, such as traditional "skip" links, use
 
 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, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
 
+On browsers that support the `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), Bootstrap enables smooth scrolling using the `scroll-behavior` property.
+
 ## Additional resources
 
 - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 1b179f2e7182327348cc45c6f9e973b2afabe764..5d083858346a03d1cbee99f70fa9b2b02a2f2dd8 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -16,6 +16,10 @@ toc: true
 - The `scale-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative.
 - See [this PR](https://github.com/twbs/bootstrap/pull/30622) for more details.
 
+### Reboot
+
+- Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
+
 ## v5.0.0-alpha2
 
 ### Sass