From 7a30d248476687a9f8e612eafc1f923d8297fff4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 13 Oct 2020 14:44:48 +0200 Subject: [PATCH 1/4] feature(spinners): slow down spinners when prefers-reduced-motion --- scss/_spinners.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 9e083eae1b0d..99335544e5f2 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -54,3 +54,12 @@ width: $spinner-width-sm; height: $spinner-height-sm; } + +@if $enable-reduced-motion { + @media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: $spinner-animation-speed * 2; + } + } +} From 9d405dbf3d8aff7a4659780401fa49556ff2bfa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 15 Oct 2020 10:07:34 +0200 Subject: [PATCH 2/4] docs(spinners): add reduced motion callout and mention slowing down in accessibility page --- site/content/docs/5.0/components/spinners.md | 4 ++++ site/content/docs/5.0/getting-started/accessibility.md | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index fc9cd4e57ab9..8b04057569fc 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -12,6 +12,10 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The For accessibility purposes, each loader here includes `role="status"` and a nested ``. +{{% callout info %}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{% /callout %}} + ## Border spinner Use the border spinners for a lightweight loading indicator. diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 150c80d65c29..5ebf6159fd4c 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -45,7 +45,7 @@ For visually hidden interactive controls, such as traditional "skip" links, use ### 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, or the sliding animation in carousels) will be disabled. +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—or slowed down when animation is meaningful, such as in spinners. ## Additional resources From 57f8b658b7af4ac394b8d3f6e4da6684ecfd73c3 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 15 Oct 2020 12:52:29 +0300 Subject: [PATCH 3/4] Update spinners.md --- site/content/docs/5.0/components/spinners.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index 8b04057569fc..250e334b8357 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -12,9 +12,9 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The For accessibility purposes, each loader here includes `role="status"` and a nested ``. -{{% callout info %}} +{{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{% /callout %}} +{{< /callout >}} ## Border spinner From 1d40d9ac740fe555d81d4760c1a51266b555e0ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 16 Oct 2020 09:46:56 +0200 Subject: [PATCH 4/4] docs(accessibility): rewording --- 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 5ebf6159fd4c..b32daec7336c 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -45,7 +45,7 @@ For visually hidden interactive controls, such as traditional "skip" links, use ### 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, or the sliding animation in carousels) will be disabled—or slowed down when animation is meaningful, such as in spinners. +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. ## Additional resources