upskill-event-manager/assets/js/reduced-motion-detection.js

/**
 * Reduced Motion Preference Detection
 * Adds CSS class to HTML element for reduced motion users
 */

(function() {
    'use strict';
    
    // Check for reduced motion preference
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    
    function handleReducedMotionChange(mediaQuery) {
        const htmlElement = document.documentElement;
        
        if (mediaQuery.matches) {
            htmlElement.classList.add('reduced-motion');
            console.log('Reduced motion preference detected - animations disabled');
        } else {
            htmlElement.classList.remove('reduced-motion');
        }
    }
    
    // Set initial state
    handleReducedMotionChange(prefersReducedMotion);
    
    // Listen for changes
    if (prefersReducedMotion.addEventListener) {
        prefersReducedMotion.addEventListener('change', handleReducedMotionChange);
    } else if (prefersReducedMotion.addListener) {
        // Fallback for older browsers
        prefersReducedMotion.addListener(handleReducedMotionChange);
    }
    
    // Additional safety: Disable animations if user has motion sensitivity
    if (navigator.userAgent.includes('MotionSensitive') || 
        navigator.userAgent.includes('AccessibilityMode')) {
        document.documentElement.classList.add('reduced-motion');
    }
})();