From e8f2dca8e1f44a1d0b0faca85dd5ff51e51986a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 13 Oct 2020 11:20:07 +0200 Subject: [PATCH 1/7] feat(reboot): apply smooth-scroll when not prefers-reduced-motion --- scss/_reboot.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 223adfd86ef3..fbc1c901e9b6 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -27,6 +27,10 @@ :root { font-size: $font-size-root; + + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; + } } From 9c2fdbd88cc72572f2db450a72ff9216e6b86110 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 15 Oct 2020 10:26:17 +0200 Subject: [PATCH 2/7] docs(migration): mention scroll-behavior in alpha3 --- site/content/docs/5.0/migration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 1b179f2e7182..c0d4d639147e 100644 --- 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 + +- Uee `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 From da91fff2fe46753aa205902baad4ccee2ddbd223 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 15 Oct 2020 10:35:20 +0200 Subject: [PATCH 3/7] docs(accessibility): mention scroll-behavior in reduced motion section --- site/content/docs/5.0/getting-started/accessibility.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 150c80d65c29..36ed1a3b8ac5 100644 --- 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. +Alternatively, the `scroll-behavior` property enables smooth scroll if the user did not ask for reduced motion. + ## Additional resources - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) From c059f799700b5c46bd91b594347f2d40776d3cf6 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 15 Oct 2020 16:31:43 +0300 Subject: [PATCH 4/7] Update migration.md --- site/content/docs/5.0/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index c0d4d639147e..f199b98424f2 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -18,7 +18,7 @@ toc: true ### Reboot -- Uee `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) +- Uee `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 From c648f1a265089dfe39761db75fd61061d949ed0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 16 Oct 2020 10:19:59 +0200 Subject: [PATCH 5/7] docs(accessibility): rewording smooth scroll sentence --- site/content/docs/5.0/getting-started/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 36ed1a3b8ac5..843b3f6a1f61 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -47,7 +47,7 @@ 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. -Alternatively, the `scroll-behavior` property enables smooth scroll if the user did not ask for reduced motion. +Bootstrap also enables smooth scroll if the user did not ask for reduced motion, using the `scroll-behavior` property. ## Additional resources From cfccf1d8c671479ea8e42520a8a51c8fc509dcf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 19 Oct 2020 10:16:37 +0200 Subject: [PATCH 6/7] feat(variable): introduce enable-smooth-scroll variable --- scss/_reboot.scss | 6 ++++-- scss/_variables.scss | 1 + site/content/docs/5.0/migration.md | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index fbc1c901e9b6..e144c9bf7c55 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -28,8 +28,10 @@ :root { font-size: $font-size-root; - @media (prefers-reduced-motion: no-preference) { - scroll-behavior: smooth; + @if $enable-smooth-scroll { + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; + } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 59850a592dd7..4c0e04917cc0 100644 --- 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/migration.md b/site/content/docs/5.0/migration.md index f199b98424f2..5d083858346a 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -18,7 +18,7 @@ toc: true ### Reboot -- Uee `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) +- 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 From fdf00f9adcbbb1d5de25411a7370733e95a9643d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 19 Oct 2020 10:19:11 +0200 Subject: [PATCH 7/7] docs(accessibility): reword smooth-scroll sentence --- site/content/docs/5.0/getting-started/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 843b3f6a1f61..420270cc3aea 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -47,7 +47,7 @@ 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. -Bootstrap also enables smooth scroll if the user did not ask for reduced motion, using the `scroll-behavior` property. +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