diff options
| author | Gaël Poupard <[email protected]> | 2020-10-19 11:00:37 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-10-19 12:00:37 +0300 |
| commit | ed2f43e1b9e160ccc7a887527448a0f19e455a9c (patch) | |
| tree | d1033019f70864abcb99169a57702b52c9d91cdd | |
| parent | ece40bcd110c47478fa1316bd099ba59210a231b (diff) | |
| download | bootstrap-ed2f43e1b9e160ccc7a887527448a0f19e455a9c.tar.xz bootstrap-ed2f43e1b9e160ccc7a887527448a0f19e455a9c.zip | |
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 <[email protected]>
| -rw-r--r-- | scss/_reboot.scss | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/5.0/getting-started/accessibility.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 4 |
4 files changed, 13 insertions, 0 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 223adfd86..e144c9bf7 100644 --- 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 59850a592..4c0e04917 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/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index b32daec73..524c88289 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, 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 1b179f2e7..5d0838583 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 + +- 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 |