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

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

@@ -1,27 +1,47 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface LoadingAccessibilityConfig {
-  enableScreenReaderSupport?}
+  enableScreenReaderSupport?: boolean
+  enableReducedMotionSupport?: boolean
+  enableFocusManagement?: boolean
+  enableAriaSupport?: boolean
+  enableVoiceControl?: boolean
+  enableHighContrast?: boolean
+  enableKeyboardNavigation?: boolean
+}
 
 export interface AccessibilityFeature {
-  id}
+  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}
+  screenReaderActive: boolean
+  reducedMotionEnabled: boolean
+  focusTrapped: boolean
+  ariaLabelsActive: boolean
+  voiceControlActive: boolean
+  highContrastMode: boolean
+  keyboardNavigationActive: boolean
+}
 
 export interface LoadingAccessibilityCallbacks {
-  onScreenReaderEnhanced?) => void
-  onReducedMotionApplied?) => void
-  onFocusManaged?) => void
-  onAriaEnhanced?) => void
-  onVoiceControlEnabled?) => void
-  onHighContrastApplied?) => void
-  onKeyboardNavigationEnabled?) => void
+  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= {},
-  callbacks= {}
+  config: LoadingAccessibilityConfig = {},
+  callbacks: LoadingAccessibilityCallbacks = {}
 ) => {
   const {
     enableScreenReaderSupport = true,
@@ -34,13 +54,14 @@ export const useLoadingAccessibility = (
   } = config
 
   const [accessibilityState, setAccessibilityState] = useState<AccessibilityState>({
-    screenReaderActive,
-    reducedMotionEnabled,
-    focusTrapped,
-    ariaLabelsActive,
-    voiceControlActive,
-    highContrastMode,
-    keyboardNavigationActive})
+    screenReaderActive: false,
+    reducedMotionEnabled: false,
+    focusTrapped: false,
+    ariaLabelsActive: false,
+    voiceControlActive: false,
+    highContrastMode: false,
+    keyboardNavigationActive: false
+  })
 
   const [accessibilityFeatures, setAccessibilityFeatures] = useState<AccessibilityFeature[]>([])
   const [isEnhancing, setIsEnhancing] = useState(false)
@@ -59,33 +80,36 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const screenReaderFeatures] = [
+      const screenReaderFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'sr-loading-states',
+          name: 'Loading State Descriptions',
+          type: 'screen-reader',
+          enabled: true,
+          description: 'Comprehensive loading state descriptions for screen readers',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'sr-progress-indication',
+          name: 'Progress Indication',
+          type: 'screen-reader',
+          enabled: true,
+          description: 'Clear progress indication for screen reader users',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, screenReaderActive: true }))
       setIsEnhancing(false)
       
       screenReaderFeatures.forEach(feature => {
@@ -102,33 +126,36 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const reducedMotionFeatures] = [
+      const reducedMotionFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'rm-animations',
+          name: 'Reduced Motion Animations',
+          type: 'reduced-motion',
+          enabled: true,
+          description: 'Loading animations adapted for reduced motion preferences',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'rm-transitions',
+          name: 'Reduced Motion Transitions',
+          type: 'reduced-motion',
+          enabled: true,
+          description: 'Smooth transitions that respect motion preferences',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, reducedMotionEnabled: true }))
       setIsEnhancing(false)
       
       reducedMotionFeatures.forEach(feature => {
@@ -145,33 +172,36 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const focusFeatures] = [
+      const focusFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'focus-trapping',
+          name: 'Focus Trapping',
+          type: 'focus',
+          enabled: true,
+          description: 'Focus trapped within loading states for keyboard navigation',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'focus-indicators',
+          name: 'Focus Indicators',
+          type: 'focus',
+          enabled: true,
+          description: 'Clear focus indicators for loading elements',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, focusTrapped: true }))
       setIsEnhancing(false)
       
       focusFeatures.forEach(feature => {
@@ -188,40 +218,44 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const ariaFeatures] = [
+      const ariaFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'aria-labels',
+          name: 'ARIA Labels',
+          type: 'aria',
+          enabled: true,
+          description: 'Comprehensive ARIA labels for loading states',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'aria-live',
+          name: 'ARIA Live Regions',
+          type: 'aria',
+          enabled: true,
+          description: 'Live regions for dynamic loading updates',
+          impact: 'high'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'aria-progress',
+          name: 'ARIA Progress Indicators',
+          type: 'aria',
+          enabled: true,
+          description: 'Progress indicators with ARIA support',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, ariaLabelsActive: true }))
       setIsEnhancing(false)
       
       ariaFeatures.forEach(feature => {
@@ -238,26 +272,28 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const voiceFeatures] = [
+      const voiceFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'voice-commands',
+          name: 'Voice Commands',
+          type: 'voice',
+          enabled: true,
+          description: 'Voice commands for loading state control',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, voiceControlActive: true }))
       setIsEnhancing(false)
       
       voiceFeatures.forEach(feature => {
@@ -274,26 +310,28 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const contrastFeatures] = [
+      const contrastFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'high-contrast',
+          name: 'High Contrast Mode',
+          type: 'contrast',
+          enabled: true,
+          description: 'High contrast loading states for better visibility',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, highContrastMode: true }))
       setIsEnhancing(false)
       
       contrastFeatures.forEach(feature => {
@@ -310,26 +348,28 @@ export const useLoadingAccessibility = (
     setIsEnhancing(true)
     
     setTimeout(() => {
-      const keyboardFeatures] = [
+      const keyboardFeatures: AccessibilityFeature[] = [
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact},
+          id: 'keyboard-shortcuts',
+          name: 'Keyboard Shortcuts',
+          type: 'keyboard',
+          enabled: true,
+          description: 'Keyboard shortcuts for loading state control',
+          impact: 'medium'
+        },
         {
-          id,
-          name,
-          type,
-          enabled,
-          description,
-          impact}
+          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}))
+      setAccessibilityState(prev => ({ ...prev, keyboardNavigationActive: true }))
       setIsEnhancing(false)
       
       keyboardFeatures.forEach(feature => {
@@ -379,9 +419,9 @@ export const useLoadingAccessibility = (
   useEffect(() => {
     // Monitor reduced motion preference
     if (enableReducedMotionSupport) {
-      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion)')
+      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion: reduce)')
       
-      const handleMotionChange = (e) => {
+      const handleMotionChange = (e: MediaQueryListEvent) => {
         if (e.matches) {
           enableReducedMotionSupportFeature()
         }
@@ -403,9 +443,9 @@ export const useLoadingAccessibility = (
   // Monitor high contrast preference
   useEffect(() => {
     if (enableHighContrast) {
-      contrastQueryRef.current = window.matchMedia('(prefers-contrast)')
+      contrastQueryRef.current = window.matchMedia('(prefers-contrast: high)')
       
-      const handleContrastChange = (e) => {
+      const handleContrastChange = (e: MediaQueryListEvent) => {
         if (e.matches) {
           enableHighContrastFeature()
         }
@@ -447,26 +487,26 @@ export const useLoadingAccessibility = (
     accessibilityScore,
     
     // Functions
-    enableScreenReaderSupport,
-    enableReducedMotionSupport,
-    enableFocusManagement,
-    enableAriaSupport,
-    enableVoiceControl,
-    enableHighContrast,
-    enableKeyboardNavigation,
+    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] = []
+    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')
@@ -484,7 +524,7 @@ export const useLoadingAccessibility = (
       
       return recommendations
     },
-    clearAccessibilityFeatures) => {
+    clearAccessibilityFeatures: () => {
       setAccessibilityFeatures([])
       setActiveFeatures([])
       setAccessibilityScore(0)