rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
* 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>
This commit is contained in:
Gaël Poupard 2020-10-19 11:00:37 +02:00 committed by GitHub
parent ece40bcd11
commit ed2f43e1b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_reboot.scss
View File

@ -27,6 +27,12 @@
:root { :root {
font-size: $font-size-root; font-size: $font-size-root;
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
} }

1
scss/_variables.scss
View File

@ -211,6 +211,7 @@ $enable-shadows: false !default;
$enable-gradients: false !default; $enable-gradients: false !default;
$enable-transitions: true !default; $enable-transitions: true !default;
$enable-reduced-motion: true !default; $enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default; $enable-grid-classes: true !default;
$enable-button-pointers: true !default; $enable-button-pointers: true !default;
$enable-rfs: true !default; $enable-rfs: true !default;

2
site/content/docs/5.0/getting-started/accessibility.md
View File

@ -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. 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 ## Additional resources
- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)

4
site/content/docs/5.0/migration.md
View File

@ -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. - 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. - 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 ## v5.0.0-alpha2
### Sass ### Sass