@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

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

@@ -0,0 +1,495 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface LoadingAccessibilityConfig {
+  enableScreenReaderSupport?}
+
+export interface AccessibilityFeature {
+  id}
+
+export interface AccessibilityState {
+  screenReaderActive}
+
+export interface LoadingAccessibilityCallbacks {
+  onScreenReaderEnhanced?) => void
+  onReducedMotionApplied?) => void
+  onFocusManaged?) => void
+  onAriaEnhanced?) => void
+  onVoiceControlEnabled?) => void
+  onHighContrastApplied?) => void
+  onKeyboardNavigationEnabled?) => void
+}
+
+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<AccessibilityState>({
+    screenReaderActive,
+    reducedMotionEnabled,
+    focusTrapped,
+    ariaLabelsActive,
+    voiceControlActive,
+    highContrastMode,
+    keyboardNavigationActive})
+
+  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] = [
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...screenReaderFeatures])
+      setActiveFeatures(prev => [...prev, ...screenReaderFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, screenReaderActive}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...reducedMotionFeatures])
+      setActiveFeatures(prev => [...prev, ...reducedMotionFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, reducedMotionEnabled}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...focusFeatures])
+      setActiveFeatures(prev => [...prev, ...focusFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, focusTrapped}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...ariaFeatures])
+      setActiveFeatures(prev => [...prev, ...ariaFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, ariaLabelsActive}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...voiceFeatures])
+      setActiveFeatures(prev => [...prev, ...voiceFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, voiceControlActive}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...contrastFeatures])
+      setActiveFeatures(prev => [...prev, ...contrastFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, highContrastMode}))
+      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,
+          name,
+          type,
+          enabled,
+          description,
+          impact},
+        {
+          id,
+          name,
+          type,
+          enabled,
+          description,
+          impact}
+      ]
+      
+      setAccessibilityFeatures(prev => [...prev, ...keyboardFeatures])
+      setActiveFeatures(prev => [...prev, ...keyboardFeatures.map(f => f.name)])
+      setAccessibilityState(prev => ({ ...prev, keyboardNavigationActive}))
+      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)')
+      
+      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)
+      }
+    }
+  }, [enableReducedMotionSupport, enableReducedMotionSupportFeature])
+
+  // Monitor high contrast preference
+  useEffect(() => {
+    if (enableHighContrast) {
+      contrastQueryRef.current = window.matchMedia('(prefers-contrast)')
+      
+      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)
+      }
+    }
+  }, [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,
+    enableReducedMotionSupport,
+    enableFocusManagement,
+    enableAriaSupport,
+    enableVoiceControl,
+    enableHighContrast,
+    enableKeyboardNavigation,
+    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
+    },
+    clearAccessibilityFeatures) => {
+      setAccessibilityFeatures([])
+      setActiveFeatures([])
+      setAccessibilityScore(0)
+    }
+  }
+}
+
+export default useLoadingAccessibility