From a539258c7b1b024daebdad4dbcdc27a0720a8124 Mon Sep 17 00:00:00 2001 From: Sergiy Dybskiy Date: Wed, 1 Sep 2021 14:48:24 -0400 Subject: [PATCH 1/2] Removes animation from skeleton shimmer when reduced animation system preference is on --- src/styles/shared/_skeleton.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/shared/_skeleton.scss b/src/styles/shared/_skeleton.scss index e5e5ce25691..7c375ed585d 100644 --- a/src/styles/shared/_skeleton.scss +++ b/src/styles/shared/_skeleton.scss @@ -23,6 +23,10 @@ $thumbnail-sizes: ( animation: var(--polaris-animation-skeleton-shimmer) $skeleton-shimmer-duration linear infinite alternate; will-change: opacity; + + @media (prefers-reduced-motion) { + animation: none; + } } @mixin skeleton-content { From 5a7ade1c0fb2e6a92d54b67fedfcbe6e2ebc533b Mon Sep 17 00:00:00 2001 From: Sergiy Dybskiy Date: Wed, 1 Sep 2021 14:54:34 -0400 Subject: [PATCH 2/2] unreleased --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 7410ce70a90..d7b2cd12b78 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - `Popover` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the underlying overlay component ([#4385](https://github.com/Shopify/polaris-react/pull/4385)) - `PositionedOverlay` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385)) - Updated `IndexTable` component to hide checkboxes when `selectable` prop is `false` ([#4376](https://github.com/Shopify/polaris-react/pull/4376)) +- [Accessibility] - Removes skeleton shimmer animation on devices that have Reduced motion setting enabled [#4460](https://github.com/Shopify/polaris-react/pull/4460) ### Bug fixes