feat: respect prefers-reduced-motion (#21530)

closes #19622

Author: KaelWD

packages/docs/src/examples/v-list/usage.vue

@@ -54,7 +54,7 @@
 
   const code = computed(() => {
     return `<${name}${propsToString(props.value)}>
-  <v-list-item${propsToString(itemProps.value, 2)}></v-list-item>
+  <v-list-item${propsToString(itemProps.value, [], 2)}></v-list-item>
 </${name}>`
   })
 </script>

packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass

@@ -30,6 +30,9 @@
 
       @include tools.elevation($bottom-sheet-elevation)
 
+      @media (prefers-reduced-motion: reduce)
+        transition: none
+
       > .v-card,
       > .v-sheet
         border-radius: $bottom-sheet-border-radius

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -78,6 +78,9 @@
     transition-property: margin-top, border-radius, border, max-width
     border-radius: $expansion-panel-border-radius
 
+    @media (prefers-reduced-motion: reduce)
+      transition-property: border-radius, border
+
     &:not(:first-child)::after
       border-top-style: solid
       border-top-width: thin
@@ -124,10 +127,12 @@
     outline: none
     padding: $expansion-panel-title-padding
     position: relative
-    transition: .3s min-height settings.$standard-easing
     width: 100%
     justify-content: space-between
 
+    @media (prefers-reduced-motion: no-preference)
+      transition: .3s min-height settings.$standard-easing
+
     @include tools.states('.v-expansion-panel-title__overlay', false)
 
     &--focusable.v-expansion-panel-title--active

packages/vuetify/src/components/VField/VField.sass

@@ -230,6 +230,9 @@
     transition: $field-transition-timing
     transition-property: opacity, transform, width
 
+    @media (prefers-reduced-motion: reduce)
+      transition-property: opacity
+
     .v-field--focused &,
     .v-field--persistent-clear &
       opacity: 1
@@ -253,10 +256,12 @@
     position: absolute
     top: var(--v-input-padding-top)
     transform-origin: left center
-    transition: $field-transition-timing
-    transition-property: opacity, transform
     z-index: 1
 
+    @media (prefers-reduced-motion: no-preference)
+      transition: $field-transition-timing
+      transition-property: opacity, transform
+
     .v-field--variant-underlined &,
     .v-field--variant-plain &
       top: calc(var(--v-input-padding-top) + var(--v-field-padding-top))
@@ -373,7 +378,9 @@
       &__end
         border: 0 solid currentColor
         opacity: var(--v-field-border-opacity)
-        transition: opacity $field-subtle-transition-timing
+
+        @media (prefers-reduced-motion: no-preference)
+          transition: opacity $field-subtle-transition-timing
 
       &__start
         flex: 0 0 $field-control-affixed-padding
@@ -413,7 +420,6 @@
         &::before,
         &::after
           opacity: var(--v-field-border-opacity)
-          transition: opacity $field-subtle-transition-timing
 
           @include tools.absolute(true)
 

packages/vuetify/src/components/VField/VField.tsx

@@ -25,6 +25,7 @@ import {
   EventProp,
   genericComponent,
   nullifyTransforms,
+  PREFERS_REDUCED_MOTION,
   propsFactory,
   standardEasing,
   useRender,
@@ -163,7 +164,7 @@ export const VField = genericComponent<new <T>(
     const { textColorClasses, textColorStyles } = useTextColor(color)
 
     watch(isActive, val => {
-      if (hasFloatingLabel.value) {
+      if (hasFloatingLabel.value && !PREFERS_REDUCED_MOTION()) {
         const el: HTMLElement = labelRef.value!.$el
         const targetEl: HTMLElement = floatingLabelRef.value!.$el
 

packages/vuetify/src/components/VMain/VMain.sass

@@ -11,6 +11,9 @@
     padding-top: var(--v-layout-top)
     padding-bottom: var(--v-layout-bottom)
 
+    @media (prefers-reduced-motion: reduce)
+      transition: none
+
     &__scroller
       max-width: 100%
       position: relative

packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass

@@ -20,6 +20,9 @@
     @include tools.rounded($navigation-drawer-border-radius)
     @include tools.theme($navigation-drawer-theme...)
 
+    @media (prefers-reduced-motion: reduce)
+      transition: none
+
     &--rounded
       @include tools.rounded($navigation-drawer-rounded-border-radius)
 

packages/vuetify/src/components/VParallax/VParallax.tsx

@@ -12,7 +12,7 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 
 // Utilities
 import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'
-import { clamp, genericComponent, getScrollParent, propsFactory, useRender } from '@/util'
+import { clamp, genericComponent, getScrollParent, PREFERS_REDUCED_MOTION, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VImgSlots } from '@/components/VImg/VImg'
@@ -71,7 +71,7 @@ export const VParallax = genericComponent<VImgSlots>()({
 
     let frame = -1
     function onScroll () {
-      if (!isIntersecting.value) return
+      if (!isIntersecting.value || PREFERS_REDUCED_MOTION()) return
 
       cancelAnimationFrame(frame)
       frame = requestAnimationFrame(() => {

packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx

@@ -12,7 +12,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
 import { ref, toRef, watchEffect } from 'vue'
-import { clamp, convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
+import { clamp, convertToUnit, genericComponent, PREFERS_REDUCED_MOTION, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -89,7 +89,8 @@ export const VProgressCircular = genericComponent<VProgressCircularSlots>()({
           {
             'v-progress-circular--indeterminate': !!props.indeterminate,
             'v-progress-circular--visible': isIntersecting.value,
-            'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink',
+            'v-progress-circular--disable-shrink': props.indeterminate &&
+              (props.indeterminate === 'disable-shrink' || PREFERS_REDUCED_MOTION()),
           },
           themeClasses.value,
           sizeClasses.value,

packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.browser.tsx

@@ -4,7 +4,7 @@ import { VForm } from '@/components/VForm'
 import { VListItem } from '@/components/VList'
 
 // Utilities
-import { commands, generate, render, screen, userEvent } from '@test'
+import { commands, generate, render, screen, userEvent, waitForClickable } from '@test'
 import { getAllByRole } from '@testing-library/vue'
 import { cloneVNode, nextTick, ref } from 'vue'
 
@@ -56,13 +56,11 @@ describe('VSelect', () => {
     expect(element).not.toHaveClass('v-select--active-menu')
 
     await userEvent.click(menuIcon)
-    await commands.waitStable('.v-list')
-    expect(screen.queryAllByCSS('.v-list-item')).toHaveLength(2)
+    await expect.poll(() => screen.queryAllByCSS('.v-list-item')).toHaveLength(2)
     expect(element).toHaveClass('v-select--active-menu')
 
     await userEvent.click(menuIcon)
-    await commands.waitStable('.v-list')
-    expect(screen.queryAllByCSS('.v-list-item')).toHaveLength(0)
+    await expect.poll(() => screen.queryAllByCSS('.v-list-item')).toHaveLength(0)
     expect(element).not.toHaveClass('v-select--active-menu')
   })
 
@@ -153,7 +151,7 @@ describe('VSelect', () => {
       await expect(screen.findAllByRole('option', { selected: true })).resolves.toHaveLength(2)
 
       const option = screen.getAllByRole('option')[2]
-      await commands.waitStable('.v-list')
+      await waitForClickable(option)
       await userEvent.click(option)
       expect(selectedItems.value).toStrictEqual(['California', 'Colorado', 'Florida'])
 
@@ -204,8 +202,9 @@ describe('VSelect', () => {
 
       await userEvent.click(element)
       await expect(screen.findAllByRole('option', { selected: true })).resolves.toHaveLength(2)
-      await commands.waitStable('.v-list')
-      await userEvent.click(screen.getAllByRole('option')[2])
+      const option = screen.getAllByRole('option')[2]
+      await waitForClickable(option)
+      await userEvent.click(option)
       expect(selectedItems.value).toStrictEqual([
         {
           title: 'Item 1',
@@ -280,6 +279,7 @@ describe('VSelect', () => {
       expect(element).toHaveTextContent('Item 1')
       expect(element).toHaveTextContent('Item 2')
 
+      await waitForClickable(options[0])
       await userEvent.click(options[0])
       expect(selectedItems.value).toStrictEqual([{
         text: 'Item 2',
@@ -484,6 +484,7 @@ describe('VSelect', () => {
       expect(options).toHaveLength(2)
       expect(options[0]).toHaveTextContent('Item 2')
 
+      await waitForClickable(options[0])
       await userEvent.click(options[0])
       expect(selectedItem.value).toStrictEqual({ text: 'Item 2', id: 'item2' })
       expect(screen.queryAllByRole('option', { selected: true })).toHaveLength(0)