@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/hooks/use-loading-accessibility.esm.js

@@ -1,535 +1,425 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-
-export interface LoadingAccessibilityConfig {
-  enableScreenReaderSupport?: boolean
-  enableReducedMotionSupport?: boolean
-  enableFocusManagement?: boolean
-  enableAriaSupport?: boolean
-  enableVoiceControl?: boolean
-  enableHighContrast?: boolean
-  enableKeyboardNavigation?: boolean
-}
-
-export interface AccessibilityFeature {
-  id: string
-  name: string
-  type: 'screen-reader' | 'reduced-motion' | 'focus' | 'aria' | 'voice' | 'contrast' | 'keyboard'
-  enabled: boolean
-  description: string
-  impact: 'low' | 'medium' | 'high'
-}
-
-export interface AccessibilityState {
-  screenReaderActive: boolean
-  reducedMotionEnabled: boolean
-  focusTrapped: boolean
-  ariaLabelsActive: boolean
-  voiceControlActive: boolean
-  highContrastMode: boolean
-  keyboardNavigationActive: boolean
-}
-
-export interface LoadingAccessibilityCallbacks {
-  onScreenReaderEnhanced?: (feature: string) => void
-  onReducedMotionApplied?: (feature: string) => void
-  onFocusManaged?: (feature: string) => void
-  onAriaEnhanced?: (feature: string) => void
-  onVoiceControlEnabled?: (feature: string) => void
-  onHighContrastApplied?: (feature: string) => void
-  onKeyboardNavigationEnabled?: (feature: string) => void
-}
-
-export const useLoadingAccessibility = (
-  config: LoadingAccessibilityConfig = {},
-  callbacks: LoadingAccessibilityCallbacks = {}
-) => {
-  const {
-    enableScreenReaderSupport = true,
-    enableReducedMotionSupport = true,
-    enableFocusManagement = true,
-    enableAriaSupport = true,
-    enableVoiceControl = true,
-    enableHighContrast = true,
-    enableKeyboardNavigation = true
-  } = config
-
-  const [accessibilityState, setAccessibilityState] = useState<AccessibilityState>({
-    screenReaderActive: false,
-    reducedMotionEnabled: false,
-    focusTrapped: false,
-    ariaLabelsActive: false,
-    voiceControlActive: false,
-    highContrastMode: false,
-    keyboardNavigationActive: false
-  })
-
-  const [accessibilityFeatures, setAccessibilityFeatures] = useState<AccessibilityFeature[]>([])
-  const [isEnhancing, setIsEnhancing] = useState(false)
-  const [activeFeatures, setActiveFeatures] = useState<string[]>([])
-  const [accessibilityScore, setAccessibilityScore] = useState(0)
-
-
-  const accessibilityTimerRef = useRef<number | null>(null)
-  const motionQueryRef = useRef<MediaQueryList | null>(null)
-  const contrastQueryRef = useRef<MediaQueryList | null>(null)
-
-  // Screen reader support
-  const enableScreenReaderSupportFeature = useCallback(() => {
-    if (!enableScreenReaderSupport) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const screenReaderFeatures: AccessibilityFeature[] = [
-        {
-          id: 'sr-loading-states',
-          name: 'Loading State Descriptions',
-          type: 'screen-reader',
-          enabled: true,
-          description: 'Comprehensive loading state descriptions for screen readers',
-          impact: 'high'
-        },
-        {
-          id: 'sr-progress-indication',
-          name: 'Progress Indication',
-          type: 'screen-reader',
-          enabled: true,
-          description: 'Clear progress indication for screen reader users',
-          impact: 'high'
-        },
-        {
-          id: 'sr-status-updates',
-          name: 'Status Updates',
-          type: 'screen-reader',
-          enabled: true,
-          description: 'Real-time status updates for loading processes',
-          impact: 'medium'
+import { useState, useCallback, useRef, useEffect } from 'react';
+export const useLoadingAccessibility = (config = {}, callbacks = {}) => {
+    const { enableScreenReaderSupport = true, enableReducedMotionSupport = true, enableFocusManagement = true, enableAriaSupport = true, enableVoiceControl = true, enableHighContrast = true, enableKeyboardNavigation = true } = config;
+    const [accessibilityState, setAccessibilityState] = useState({
+        screenReaderActive: false,
+        reducedMotionEnabled: false,
+        focusTrapped: false,
+        ariaLabelsActive: false,
+        voiceControlActive: false,
+        highContrastMode: false,
+        keyboardNavigationActive: false
+    });
+    const [accessibilityFeatures, setAccessibilityFeatures] = useState([]);
+    const [isEnhancing, setIsEnhancing] = useState(false);
+    const [activeFeatures, setActiveFeatures] = useState([]);
+    const [accessibilityScore, setAccessibilityScore] = useState(0);
+    const accessibilityTimerRef = useRef(null);
+    const motionQueryRef = useRef(null);
+    const contrastQueryRef = useRef(null);
+    // Screen reader support
+    const enableScreenReaderSupportFeature = useCallback(() => {
+        if (!enableScreenReaderSupport)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const screenReaderFeatures = [
+                {
+                    id: 'sr-loading-states',
+                    name: 'Loading State Descriptions',
+                    type: 'screen-reader',
+                    enabled: true,
+                    description: 'Comprehensive loading state descriptions for screen readers',
+                    impact: 'high'
+                },
+                {
+                    id: 'sr-progress-indication',
+                    name: 'Progress Indication',
+                    type: 'screen-reader',
+                    enabled: true,
+                    description: 'Clear progress indication for screen reader users',
+                    impact: 'high'
+                },
+                {
+                    id: 'sr-status-updates',
+                    name: 'Status Updates',
+                    type: 'screen-reader',
+                    enabled: true,
+                    description: 'Real-time status updates for loading processes',
+                    impact: 'medium'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...screenReaderFeatures]);
+            setActiveFeatures(prev => [...prev, ...screenReaderFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, screenReaderActive: true }));
+            setIsEnhancing(false);
+            screenReaderFeatures.forEach(feature => {
+                callbacks.onScreenReaderEnhanced?.(feature.description);
+            });
+        }, 300);
+    }, [enableScreenReaderSupport, callbacks]);
+    // Reduced motion support
+    const enableReducedMotionSupportFeature = useCallback(() => {
+        if (!enableReducedMotionSupport)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const reducedMotionFeatures = [
+                {
+                    id: 'rm-animations',
+                    name: 'Reduced Motion Animations',
+                    type: 'reduced-motion',
+                    enabled: true,
+                    description: 'Loading animations adapted for reduced motion preferences',
+                    impact: 'high'
+                },
+                {
+                    id: 'rm-transitions',
+                    name: 'Reduced Motion Transitions',
+                    type: 'reduced-motion',
+                    enabled: true,
+                    description: 'Smooth transitions that respect motion preferences',
+                    impact: 'medium'
+                },
+                {
+                    id: 'rm-loading-states',
+                    name: 'Reduced Motion Loading States',
+                    type: 'reduced-motion',
+                    enabled: true,
+                    description: 'Loading states optimized for motion sensitivity',
+                    impact: 'medium'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...reducedMotionFeatures]);
+            setActiveFeatures(prev => [...prev, ...reducedMotionFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, reducedMotionEnabled: true }));
+            setIsEnhancing(false);
+            reducedMotionFeatures.forEach(feature => {
+                callbacks.onReducedMotionApplied?.(feature.description);
+            });
+        }, 250);
+    }, [enableReducedMotionSupport, callbacks]);
+    // Focus management
+    const enableFocusManagementFeature = useCallback(() => {
+        if (!enableFocusManagement)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const focusFeatures = [
+                {
+                    id: 'focus-trapping',
+                    name: 'Focus Trapping',
+                    type: 'focus',
+                    enabled: true,
+                    description: 'Focus trapped within loading states for keyboard navigation',
+                    impact: 'high'
+                },
+                {
+                    id: 'focus-indicators',
+                    name: 'Focus Indicators',
+                    type: 'focus',
+                    enabled: true,
+                    description: 'Clear focus indicators for loading elements',
+                    impact: 'medium'
+                },
+                {
+                    id: 'focus-order',
+                    name: 'Logical Focus Order',
+                    type: 'focus',
+                    enabled: true,
+                    description: 'Logical focus order for loading state elements',
+                    impact: 'medium'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...focusFeatures]);
+            setActiveFeatures(prev => [...prev, ...focusFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, focusTrapped: true }));
+            setIsEnhancing(false);
+            focusFeatures.forEach(feature => {
+                callbacks.onFocusManaged?.(feature.description);
+            });
+        }, 200);
+    }, [enableFocusManagement, callbacks]);
+    // ARIA support
+    const enableAriaSupportFeature = useCallback(() => {
+        if (!enableAriaSupport)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const ariaFeatures = [
+                {
+                    id: 'aria-labels',
+                    name: 'ARIA Labels',
+                    type: 'aria',
+                    enabled: true,
+                    description: 'Comprehensive ARIA labels for loading states',
+                    impact: 'high'
+                },
+                {
+                    id: 'aria-live',
+                    name: 'ARIA Live Regions',
+                    type: 'aria',
+                    enabled: true,
+                    description: 'Live regions for dynamic loading updates',
+                    impact: 'high'
+                },
+                {
+                    id: 'aria-progress',
+                    name: 'ARIA Progress Indicators',
+                    type: 'aria',
+                    enabled: true,
+                    description: 'Progress indicators with ARIA support',
+                    impact: 'medium'
+                },
+                {
+                    id: 'aria-status',
+                    name: 'ARIA Status Updates',
+                    type: 'aria',
+                    enabled: true,
+                    description: 'Status updates with ARIA announcements',
+                    impact: 'medium'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...ariaFeatures]);
+            setActiveFeatures(prev => [...prev, ...ariaFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, ariaLabelsActive: true }));
+            setIsEnhancing(false);
+            ariaFeatures.forEach(feature => {
+                callbacks.onAriaEnhanced?.(feature.description);
+            });
+        }, 180);
+    }, [enableAriaSupport, callbacks]);
+    // Voice control support
+    const enableVoiceControlFeature = useCallback(() => {
+        if (!enableVoiceControl)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const voiceFeatures = [
+                {
+                    id: 'voice-commands',
+                    name: 'Voice Commands',
+                    type: 'voice',
+                    enabled: true,
+                    description: 'Voice commands for loading state control',
+                    impact: 'medium'
+                },
+                {
+                    id: 'voice-feedback',
+                    name: 'Voice Feedback',
+                    type: 'voice',
+                    enabled: true,
+                    description: 'Voice feedback for loading progress',
+                    impact: 'medium'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...voiceFeatures]);
+            setActiveFeatures(prev => [...prev, ...voiceFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, voiceControlActive: true }));
+            setIsEnhancing(false);
+            voiceFeatures.forEach(feature => {
+                callbacks.onVoiceControlEnabled?.(feature.description);
+            });
+        }, 150);
+    }, [enableVoiceControl, callbacks]);
+    // High contrast support
+    const enableHighContrastFeature = useCallback(() => {
+        if (!enableHighContrast)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const contrastFeatures = [
+                {
+                    id: 'high-contrast',
+                    name: 'High Contrast Mode',
+                    type: 'contrast',
+                    enabled: true,
+                    description: 'High contrast loading states for better visibility',
+                    impact: 'medium'
+                },
+                {
+                    id: 'contrast-optimization',
+                    name: 'Contrast Optimization',
+                    type: 'contrast',
+                    enabled: true,
+                    description: 'Optimized contrast ratios for accessibility',
+                    impact: 'low'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...contrastFeatures]);
+            setActiveFeatures(prev => [...prev, ...contrastFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, highContrastMode: true }));
+            setIsEnhancing(false);
+            contrastFeatures.forEach(feature => {
+                callbacks.onHighContrastApplied?.(feature.description);
+            });
+        }, 120);
+    }, [enableHighContrast, callbacks]);
+    // Keyboard navigation support
+    const enableKeyboardNavigationFeature = useCallback(() => {
+        if (!enableKeyboardNavigation)
+            return;
+        setIsEnhancing(true);
+        setTimeout(() => {
+            const keyboardFeatures = [
+                {
+                    id: 'keyboard-shortcuts',
+                    name: 'Keyboard Shortcuts',
+                    type: 'keyboard',
+                    enabled: true,
+                    description: 'Keyboard shortcuts for loading state control',
+                    impact: 'medium'
+                },
+                {
+                    id: 'keyboard-navigation',
+                    name: 'Keyboard Navigation',
+                    type: 'keyboard',
+                    enabled: true,
+                    description: 'Full keyboard navigation for loading states',
+                    impact: 'high'
+                }
+            ];
+            setAccessibilityFeatures(prev => [...prev, ...keyboardFeatures]);
+            setActiveFeatures(prev => [...prev, ...keyboardFeatures.map(f => f.name)]);
+            setAccessibilityState(prev => ({ ...prev, keyboardNavigationActive: true }));
+            setIsEnhancing(false);
+            keyboardFeatures.forEach(feature => {
+                callbacks.onKeyboardNavigationEnabled?.(feature.description);
+            });
+        }, 100);
+    }, [enableKeyboardNavigation, callbacks]);
+    // Auto-enable accessibility features
+    const autoEnableAccessibility = useCallback(() => {
+        enableScreenReaderSupportFeature();
+        enableReducedMotionSupportFeature();
+        enableFocusManagementFeature();
+        enableAriaSupportFeature();
+        enableVoiceControlFeature();
+        enableHighContrastFeature();
+        enableKeyboardNavigationFeature();
+    }, [
+        enableScreenReaderSupportFeature,
+        enableReducedMotionSupportFeature,
+        enableFocusManagementFeature,
+        enableAriaSupportFeature,
+        enableVoiceControlFeature,
+        enableHighContrastFeature,
+        enableKeyboardNavigationFeature
+    ]);
+    // Calculate accessibility score
+    const calculateAccessibilityScore = useCallback(() => {
+        const totalFeatures = accessibilityFeatures.length;
+        const enabledFeatures = accessibilityFeatures.filter(f => f.enabled).length;
+        if (totalFeatures === 0)
+            return 0;
+        const score = Math.round((enabledFeatures / totalFeatures) * 100);
+        setAccessibilityScore(score);
+        return score;
+    }, [accessibilityFeatures]);
+    // Update accessibility score when features change
+    useEffect(() => {
+        calculateAccessibilityScore();
+    }, [accessibilityFeatures, calculateAccessibilityScore]);
+    // Monitor system preferences
+    useEffect(() => {
+        // Monitor reduced motion preference
+        if (enableReducedMotionSupport) {
+            motionQueryRef.current = window.matchMedia('(prefers-reduced-motion: reduce)');
+            const handleMotionChange = (e) => {
+                if (e.matches) {
+                    enableReducedMotionSupportFeature();
+                }
+            };
+            motionQueryRef.current.addEventListener('change', handleMotionChange);
+            // Check initial state
+            if (motionQueryRef.current.matches) {
+                enableReducedMotionSupportFeature();
+            }
+            return () => {
+                motionQueryRef.current?.removeEventListener('change', handleMotionChange);
+            };
         }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...screenReaderFeatures])
-      setActiveFeatures(prev => [...prev, ...screenReaderFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, screenReaderActive: true }))
-      setIsEnhancing(false)
-      
-      screenReaderFeatures.forEach(feature => {
-        callbacks.onScreenReaderEnhanced?.(feature.description)
-      })
-      
-    }, 300)
-  }, [enableScreenReaderSupport, callbacks])
-
-  // Reduced motion support
-  const enableReducedMotionSupportFeature = useCallback(() => {
-    if (!enableReducedMotionSupport) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const reducedMotionFeatures: AccessibilityFeature[] = [
-        {
-          id: 'rm-animations',
-          name: 'Reduced Motion Animations',
-          type: 'reduced-motion',
-          enabled: true,
-          description: 'Loading animations adapted for reduced motion preferences',
-          impact: 'high'
-        },
-        {
-          id: 'rm-transitions',
-          name: 'Reduced Motion Transitions',
-          type: 'reduced-motion',
-          enabled: true,
-          description: 'Smooth transitions that respect motion preferences',
-          impact: 'medium'
-        },
-        {
-          id: 'rm-loading-states',
-          name: 'Reduced Motion Loading States',
-          type: 'reduced-motion',
-          enabled: true,
-          description: 'Loading states optimized for motion sensitivity',
-          impact: 'medium'
+    }, [enableReducedMotionSupport, enableReducedMotionSupportFeature]);
+    // Monitor high contrast preference
+    useEffect(() => {
+        if (enableHighContrast) {
+            contrastQueryRef.current = window.matchMedia('(prefers-contrast: high)');
+            const handleContrastChange = (e) => {
+                if (e.matches) {
+                    enableHighContrastFeature();
+                }
+            };
+            contrastQueryRef.current.addEventListener('change', handleContrastChange);
+            // Check initial state
+            if (contrastQueryRef.current.matches) {
+                enableHighContrastFeature();
+            }
+            return () => {
+                contrastQueryRef.current?.removeEventListener('change', handleContrastChange);
+            };
         }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...reducedMotionFeatures])
-      setActiveFeatures(prev => [...prev, ...reducedMotionFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, reducedMotionEnabled: true }))
-      setIsEnhancing(false)
-      
-      reducedMotionFeatures.forEach(feature => {
-        callbacks.onReducedMotionApplied?.(feature.description)
-      })
-      
-    }, 250)
-  }, [enableReducedMotionSupport, callbacks])
-
-  // Focus management
-  const enableFocusManagementFeature = useCallback(() => {
-    if (!enableFocusManagement) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const focusFeatures: AccessibilityFeature[] = [
-        {
-          id: 'focus-trapping',
-          name: 'Focus Trapping',
-          type: 'focus',
-          enabled: true,
-          description: 'Focus trapped within loading states for keyboard navigation',
-          impact: 'high'
-        },
-        {
-          id: 'focus-indicators',
-          name: 'Focus Indicators',
-          type: 'focus',
-          enabled: true,
-          description: 'Clear focus indicators for loading elements',
-          impact: 'medium'
-        },
-        {
-          id: 'focus-order',
-          name: 'Logical Focus Order',
-          type: 'focus',
-          enabled: true,
-          description: 'Logical focus order for loading state elements',
-          impact: 'medium'
-        }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...focusFeatures])
-      setActiveFeatures(prev => [...prev, ...focusFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, focusTrapped: true }))
-      setIsEnhancing(false)
-      
-      focusFeatures.forEach(feature => {
-        callbacks.onFocusManaged?.(feature.description)
-      })
-      
-    }, 200)
-  }, [enableFocusManagement, callbacks])
-
-  // ARIA support
-  const enableAriaSupportFeature = useCallback(() => {
-    if (!enableAriaSupport) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const ariaFeatures: AccessibilityFeature[] = [
-        {
-          id: 'aria-labels',
-          name: 'ARIA Labels',
-          type: 'aria',
-          enabled: true,
-          description: 'Comprehensive ARIA labels for loading states',
-          impact: 'high'
-        },
-        {
-          id: 'aria-live',
-          name: 'ARIA Live Regions',
-          type: 'aria',
-          enabled: true,
-          description: 'Live regions for dynamic loading updates',
-          impact: 'high'
-        },
-        {
-          id: 'aria-progress',
-          name: 'ARIA Progress Indicators',
-          type: 'aria',
-          enabled: true,
-          description: 'Progress indicators with ARIA support',
-          impact: 'medium'
+    }, [enableHighContrast, enableHighContrastFeature]);
+    // Auto-enable on mount
+    useEffect(() => {
+        autoEnableAccessibility();
+    }, [autoEnableAccessibility]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (accessibilityTimerRef.current) {
+                clearTimeout(accessibilityTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        // State
+        accessibilityState,
+        accessibilityFeatures,
+        isEnhancing,
+        activeFeatures,
+        accessibilityScore,
+        // Functions
+        enableScreenReaderSupport: enableScreenReaderSupportFeature,
+        enableReducedMotionSupport: enableReducedMotionSupportFeature,
+        enableFocusManagement: enableFocusManagementFeature,
+        enableAriaSupport: enableAriaSupportFeature,
+        enableVoiceControl: enableVoiceControlFeature,
+        enableHighContrast: enableHighContrastFeature,
+        enableKeyboardNavigation: enableKeyboardNavigationFeature,
+        autoEnableAccessibility,
+        // Utility functions
+        isScreenReaderActive: () => accessibilityState.screenReaderActive,
+        isReducedMotionEnabled: () => accessibilityState.reducedMotionEnabled,
+        isFocusManaged: () => accessibilityState.focusTrapped,
+        isAriaEnhanced: () => accessibilityState.ariaLabelsActive,
+        isVoiceControlActive: () => accessibilityState.voiceControlActive,
+        isHighContrastMode: () => accessibilityState.highContrastMode,
+        isKeyboardNavigationActive: () => accessibilityState.keyboardNavigationActive,
+        getAccessibilityScore: () => accessibilityScore,
+        getAccessibilityRecommendations: () => {
+            const recommendations = [];
+            if (accessibilityScore < 50) {
+                recommendations.push('Enable more accessibility features for better user experience');
+                recommendations.push('Consider implementing screen reader support');
+                recommendations.push('Add ARIA labels for loading states');
+            }
+            else if (accessibilityScore < 80) {
+                recommendations.push('Enable remaining accessibility features');
+                recommendations.push('Consider voice control support');
+                recommendations.push('Optimize keyboard navigation');
+            }
+            else {
+                recommendations.push('Excellent accessibility coverage');
+                recommendations.push('Consider advanced accessibility features');
+                recommendations.push('Monitor for new accessibility standards');
+            }
+            return recommendations;
         },
-        {
-          id: 'aria-status',
-          name: 'ARIA Status Updates',
-          type: 'aria',
-          enabled: true,
-          description: 'Status updates with ARIA announcements',
-          impact: 'medium'
-        }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...ariaFeatures])
-      setActiveFeatures(prev => [...prev, ...ariaFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, ariaLabelsActive: true }))
-      setIsEnhancing(false)
-      
-      ariaFeatures.forEach(feature => {
-        callbacks.onAriaEnhanced?.(feature.description)
-      })
-      
-    }, 180)
-  }, [enableAriaSupport, callbacks])
-
-  // Voice control support
-  const enableVoiceControlFeature = useCallback(() => {
-    if (!enableVoiceControl) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const voiceFeatures: AccessibilityFeature[] = [
-        {
-          id: 'voice-commands',
-          name: 'Voice Commands',
-          type: 'voice',
-          enabled: true,
-          description: 'Voice commands for loading state control',
-          impact: 'medium'
-        },
-        {
-          id: 'voice-feedback',
-          name: 'Voice Feedback',
-          type: 'voice',
-          enabled: true,
-          description: 'Voice feedback for loading progress',
-          impact: 'medium'
-        }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...voiceFeatures])
-      setActiveFeatures(prev => [...prev, ...voiceFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, voiceControlActive: true }))
-      setIsEnhancing(false)
-      
-      voiceFeatures.forEach(feature => {
-        callbacks.onVoiceControlEnabled?.(feature.description)
-      })
-      
-    }, 150)
-  }, [enableVoiceControl, callbacks])
-
-  // High contrast support
-  const enableHighContrastFeature = useCallback(() => {
-    if (!enableHighContrast) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const contrastFeatures: AccessibilityFeature[] = [
-        {
-          id: 'high-contrast',
-          name: 'High Contrast Mode',
-          type: 'contrast',
-          enabled: true,
-          description: 'High contrast loading states for better visibility',
-          impact: 'medium'
-        },
-        {
-          id: 'contrast-optimization',
-          name: 'Contrast Optimization',
-          type: 'contrast',
-          enabled: true,
-          description: 'Optimized contrast ratios for accessibility',
-          impact: 'low'
-        }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...contrastFeatures])
-      setActiveFeatures(prev => [...prev, ...contrastFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, highContrastMode: true }))
-      setIsEnhancing(false)
-      
-      contrastFeatures.forEach(feature => {
-        callbacks.onHighContrastApplied?.(feature.description)
-      })
-      
-    }, 120)
-  }, [enableHighContrast, callbacks])
-
-  // Keyboard navigation support
-  const enableKeyboardNavigationFeature = useCallback(() => {
-    if (!enableKeyboardNavigation) return
-
-    setIsEnhancing(true)
-    
-    setTimeout(() => {
-      const keyboardFeatures: AccessibilityFeature[] = [
-        {
-          id: 'keyboard-shortcuts',
-          name: 'Keyboard Shortcuts',
-          type: 'keyboard',
-          enabled: true,
-          description: 'Keyboard shortcuts for loading state control',
-          impact: 'medium'
-        },
-        {
-          id: 'keyboard-navigation',
-          name: 'Keyboard Navigation',
-          type: 'keyboard',
-          enabled: true,
-          description: 'Full keyboard navigation for loading states',
-          impact: 'high'
-        }
-      ]
-      
-      setAccessibilityFeatures(prev => [...prev, ...keyboardFeatures])
-      setActiveFeatures(prev => [...prev, ...keyboardFeatures.map(f => f.name)])
-      setAccessibilityState(prev => ({ ...prev, keyboardNavigationActive: true }))
-      setIsEnhancing(false)
-      
-      keyboardFeatures.forEach(feature => {
-        callbacks.onKeyboardNavigationEnabled?.(feature.description)
-      })
-      
-    }, 100)
-  }, [enableKeyboardNavigation, callbacks])
-
-  // Auto-enable accessibility features
-  const autoEnableAccessibility = useCallback(() => {
-    enableScreenReaderSupportFeature()
-    enableReducedMotionSupportFeature()
-    enableFocusManagementFeature()
-    enableAriaSupportFeature()
-    enableVoiceControlFeature()
-    enableHighContrastFeature()
-    enableKeyboardNavigationFeature()
-  }, [
-    enableScreenReaderSupportFeature,
-    enableReducedMotionSupportFeature,
-    enableFocusManagementFeature,
-    enableAriaSupportFeature,
-    enableVoiceControlFeature,
-    enableHighContrastFeature,
-    enableKeyboardNavigationFeature
-  ])
-
-  // Calculate accessibility score
-  const calculateAccessibilityScore = useCallback(() => {
-    const totalFeatures = accessibilityFeatures.length
-    const enabledFeatures = accessibilityFeatures.filter(f => f.enabled).length
-    
-    if (totalFeatures === 0) return 0
-    
-    const score = Math.round((enabledFeatures / totalFeatures) * 100)
-    setAccessibilityScore(score)
-    return score
-  }, [accessibilityFeatures])
-
-  // Update accessibility score when features change
-  useEffect(() => {
-    calculateAccessibilityScore()
-  }, [accessibilityFeatures, calculateAccessibilityScore])
-
-  // Monitor system preferences
-  useEffect(() => {
-    // Monitor reduced motion preference
-    if (enableReducedMotionSupport) {
-      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion: reduce)')
-      
-      const handleMotionChange = (e: MediaQueryListEvent) => {
-        if (e.matches) {
-          enableReducedMotionSupportFeature()
-        }
-      }
-      
-      motionQueryRef.current.addEventListener('change', handleMotionChange)
-      
-      // Check initial state
-      if (motionQueryRef.current.matches) {
-        enableReducedMotionSupportFeature()
-      }
-      
-      return () => {
-        motionQueryRef.current?.removeEventListener('change', handleMotionChange)
-      }
-    }
-  }, [enableReducedMotionSupport, enableReducedMotionSupportFeature])
-
-  // Monitor high contrast preference
-  useEffect(() => {
-    if (enableHighContrast) {
-      contrastQueryRef.current = window.matchMedia('(prefers-contrast: high)')
-      
-      const handleContrastChange = (e: MediaQueryListEvent) => {
-        if (e.matches) {
-          enableHighContrastFeature()
+        clearAccessibilityFeatures: () => {
+            setAccessibilityFeatures([]);
+            setActiveFeatures([]);
+            setAccessibilityScore(0);
         }
-      }
-      
-      contrastQueryRef.current.addEventListener('change', handleContrastChange)
-      
-      // Check initial state
-      if (contrastQueryRef.current.matches) {
-        enableHighContrastFeature()
-      }
-      
-      return () => {
-        contrastQueryRef.current?.removeEventListener('change', handleContrastChange)
-      }
-    }
-  }, [enableHighContrast, enableHighContrastFeature])
-
-  // Auto-enable on mount
-  useEffect(() => {
-    autoEnableAccessibility()
-  }, [autoEnableAccessibility])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (accessibilityTimerRef.current) {
-        clearTimeout(accessibilityTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    accessibilityState,
-    accessibilityFeatures,
-    isEnhancing,
-    activeFeatures,
-    accessibilityScore,
-    
-    // Functions
-    enableScreenReaderSupport: enableScreenReaderSupportFeature,
-    enableReducedMotionSupport: enableReducedMotionSupportFeature,
-    enableFocusManagement: enableFocusManagementFeature,
-    enableAriaSupport: enableAriaSupportFeature,
-    enableVoiceControl: enableVoiceControlFeature,
-    enableHighContrast: enableHighContrastFeature,
-    enableKeyboardNavigation: enableKeyboardNavigationFeature,
-    autoEnableAccessibility,
-    
-    // Utility functions
-    isScreenReaderActive: () => accessibilityState.screenReaderActive,
-    isReducedMotionEnabled: () => accessibilityState.reducedMotionEnabled,
-    isFocusManaged: () => accessibilityState.focusTrapped,
-    isAriaEnhanced: () => accessibilityState.ariaLabelsActive,
-    isVoiceControlActive: () => accessibilityState.voiceControlActive,
-    isHighContrastMode: () => accessibilityState.highContrastMode,
-    isKeyboardNavigationActive: () => accessibilityState.keyboardNavigationActive,
-    getAccessibilityScore: () => accessibilityScore,
-    getAccessibilityRecommendations: () => {
-      const recommendations: string[] = []
-      
-      if (accessibilityScore < 50) {
-        recommendations.push('Enable more accessibility features for better user experience')
-        recommendations.push('Consider implementing screen reader support')
-        recommendations.push('Add ARIA labels for loading states')
-      } else if (accessibilityScore < 80) {
-        recommendations.push('Enable remaining accessibility features')
-        recommendations.push('Consider voice control support')
-        recommendations.push('Optimize keyboard navigation')
-      } else {
-        recommendations.push('Excellent accessibility coverage')
-        recommendations.push('Consider advanced accessibility features')
-        recommendations.push('Monitor for new accessibility standards')
-      }
-      
-      return recommendations
-    },
-    clearAccessibilityFeatures: () => {
-      setAccessibilityFeatures([])
-      setActiveFeatures([])
-      setAccessibilityScore(0)
-    }
-  }
-}
-
-export default useLoadingAccessibility
+    };
+};
+export default useLoadingAccessibility;