Use reduced motion

resources/js/components/UseReducedMotion.js

@@ -0,0 +1,53 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export const useReducedMotion = () => {
+    if (!matchMedia) { return false }
+
+    const prefersReducedMotion = ref(null)
+    const motionMediaQuery = matchMedia('(prefers-reduced-motion)')
+
+    const setReducedMotionPreferences = () => {
+        prefersReducedMotion.value = motionMediaQuery.matches
+    }
+
+    onMounted(() => {
+        motionMediaQuery.addEventListener('change', setReducedMotionPreferences)
+        setReducedMotionPreferences()
+    })
+
+    onUnmounted(() => motionMediaQuery.removeEventListener('change', setReducedMotionPreferences))
+
+    return prefersReducedMotion
+}
+
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```
+ * <script setup>
+ * import { useReducedMotion } from './UseReducedMotion.js'
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const isOpen = useRef(false)
+ *   const closedX = shouldReduceMotion ? 'translateX(0)' : 'translateX(-100%)'
+ * </script>
+ *
+ * <template>
+ *  <div
+ *    class="menu"
+ *    :style="{
+ *      opacity: isOpen ? 1 : 0,
+ *      transform: isOpen ? 'translateX(0)' : closedX
+ *    }"
+ *  ></div>
+ * </template>
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */

resources/js/utilities/reduced-motion.js

@@ -0,0 +1,38 @@
+/**
+* Prefers Reduced Motion Settings
+*
+* Checks for reduced motion setting and stores status in LocalStorage for use in other scripts.
+* Also stops all HTML5 videos from autoplaying.
+*
+*/
+const motionQuery = matchMedia('(prefers-reduced-motion)')
+
+const updateLocalStorage = (value) => {
+    localStorage.setItem('reduceMotion', value)
+}
+
+const stopVideoAutoplay = () => {
+    // Find all HTML5 video elements.
+    const videos = document.querySelectorAll('video')
+    videos.forEach(video => {
+        // Pause all videos with autoplay.
+        const autoplay = video.getAttribute('autoplay')
+        if (autoplay) {
+            video.pause()
+        }
+    })
+}
+
+const reducedMotionCheck = () => {
+    if (motionQuery.matches) {
+        // Add functions for reduced motion here.
+        console.warn(`[${process.env.npm_package_name || 'WARNING'}]: Reduced Motion setting is active. Autoplay and animations have been turned off.`)
+        updateLocalStorage(true)
+        stopVideoAutoplay()
+    } else {
+        updateLocalStorage(false)
+    }
+}
+
+reducedMotionCheck()
+motionQuery.addEventListener('change', reducedMotionCheck)

resources/styles/molecules/card/_index.scss

@@ -56,7 +56,6 @@
 
     &__content {
         grid-area: content;
-        width: 100%;
     }