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

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

@@ -1,27 +1,51 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface InputAccessibilityConfig {
-  enableARIA?, string>
-  focusTrap?}
+  enableARIA?: boolean
+  enableKeyboardNavigation?: boolean
+  enableScreenReader?: boolean
+  enableFocusManagement?: boolean
+  enableHighContrast?: boolean
+  enableReducedMotion?: boolean
+  enableVoiceControl?: boolean
+  ariaLabels?: Record<string, string>
+  focusTrap?: boolean
+  skipLinks?: boolean
+}
 
 export interface AccessibilityFeature {
-  id}
+  id: string
+  name: string
+  type: 'aria' | 'keyboard' | 'screen-reader' | 'focus' | 'contrast' | 'motion' | 'voice'
+  enabled: boolean
+  impact: 'low' | 'medium' | 'high'
+  description: string
+  ariaLabel?: string
+  keyboardShortcut?: string
+}
 
 export interface AccessibilityState {
-  isHighContrast]
+  isHighContrast: boolean
+  isReducedMotion: boolean
+  isVoiceControl: boolean
+  isKeyboardNavigating: boolean
+  isScreenReaderActive: boolean
+  focusIndex: number
+  accessibilityScore: number
+  activeFeatures: string[]
 }
 
 export interface InputAccessibilityCallbacks {
-  onAccessibilityFeatureEnabled?) => void
-  onKeyboardNavigationEnabled?) => void
-  onScreenReaderOptimized?) => void
-  onFocusManagementEnhanced?) => void
-  onAccessibilityScoreChanged?) => void
+  onAccessibilityFeatureEnabled?: (feature: AccessibilityFeature) => void
+  onKeyboardNavigationEnabled?: (feature: string) => void
+  onScreenReaderOptimized?: (optimization: string) => void
+  onFocusManagementEnhanced?: (feature: string) => void
+  onAccessibilityScoreChanged?: (score: number) => void
 }
 
 export const useInputAccessibility = (
-  config= {},
-  callbacks= {}
+  config: InputAccessibilityConfig = {},
+  callbacks: InputAccessibilityCallbacks = {}
 ) => {
   const {
     enableARIA = true,
@@ -36,14 +60,14 @@ export const useInputAccessibility = (
 
   const [accessibilityFeatures, setAccessibilityFeatures] = useState<AccessibilityFeature[]>([])
   const [accessibilityState, setAccessibilityState] = useState<AccessibilityState>({
-    isHighContrast,
-    isReducedMotion,
-    isVoiceControl,
-    isKeyboardNavigating,
-    isScreenReaderActive,
-    focusIndex,
-    accessibilityScore,
-    activeFeatures]
+    isHighContrast: false,
+    isReducedMotion: false,
+    isVoiceControl: false,
+    isKeyboardNavigating: false,
+    isScreenReaderActive: false,
+    focusIndex: 0,
+    accessibilityScore: 0,
+    activeFeatures: []
   })
 
   const [isEnhancing, setIsEnhancing] = useState(false)
@@ -56,97 +80,106 @@ export const useInputAccessibility = (
 
   // Initialize accessibility features
   const initializeAccessibilityFeatures = useCallback(() => {
-    const features] = [
+    const features: AccessibilityFeature[] = [
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'aria-1',
+        name: 'ARIA Labels',
+        type: 'aria',
+        enabled: enableARIA,
+        impact: 'high',
+        description: 'Enhanced ARIA labels for screen readers',
+        ariaLabel: 'Enhanced accessibility labels'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'aria-2',
+        name: 'ARIA Descriptions',
+        type: 'aria',
+        enabled: enableARIA,
+        impact: 'medium',
+        description: 'Detailed ARIA descriptions for complex inputs',
+        ariaLabel: 'Detailed input descriptions'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        keyboardShortcut, Shift+Tab, Arrow keys'
+        id: 'keyboard-1',
+        name: 'Keyboard Navigation',
+        type: 'keyboard',
+        enabled: enableKeyboardNavigation,
+        impact: 'high',
+        description: 'Full keyboard navigation support',
+        keyboardShortcut: 'Tab, Shift+Tab, Arrow keys'
       },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        keyboardShortcut, Ctrl+Z, etc.'
+        id: 'keyboard-2',
+        name: 'Keyboard Shortcuts',
+        type: 'keyboard',
+        enabled: enableKeyboardNavigation,
+        impact: 'medium',
+        description: 'Custom keyboard shortcuts for common actions',
+        keyboardShortcut: 'Ctrl+S, Ctrl+Z, etc.'
       },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'screen-reader-1',
+        name: 'Screen Reader Support',
+        type: 'screen-reader',
+        enabled: enableScreenReader,
+        impact: 'high',
+        description: 'Optimized screen reader compatibility',
+        ariaLabel: 'Screen reader optimized'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'screen-reader-2',
+        name: 'Live Regions',
+        type: 'screen-reader',
+        enabled: enableScreenReader,
+        impact: 'medium',
+        description: 'Live regions for dynamic content updates',
+        ariaLabel: 'Live content updates'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'focus-1',
+        name: 'Focus Management',
+        type: 'focus',
+        enabled: enableFocusManagement,
+        impact: 'high',
+        description: 'Enhanced focus management and visible focus indicators',
+        ariaLabel: 'Focus management'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'focus-2',
+        name: 'Focus Trap',
+        type: 'focus',
+        enabled: enableFocusManagement && focusTrap,
+        impact: 'medium',
+        description: 'Focus trap for modal dialogs and overlays',
+        ariaLabel: 'Focus containment'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'contrast-1',
+        name: 'High Contrast',
+        type: 'contrast',
+        enabled: enableHighContrast,
+        impact: 'medium',
+        description: 'High contrast mode support',
+        ariaLabel: 'High contrast support'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel},
+        id: 'motion-1',
+        name: 'Reduced Motion',
+        type: 'motion',
+        enabled: enableReducedMotion,
+        impact: 'medium',
+        description: 'Reduced motion preference support',
+        ariaLabel: 'Reduced motion support'
+      },
       {
-        id,
-        name,
-        type,
-        enabled,
-        impact,
-        description,
-        ariaLabel}
+        id: 'voice-1',
+        name: 'Voice Control',
+        type: 'voice',
+        enabled: enableVoiceControl,
+        impact: 'low',
+        description: 'Voice control and speech recognition support',
+        ariaLabel: 'Voice control support'
+      }
     ]
 
     setAccessibilityFeatures(features)
@@ -157,34 +190,38 @@ export const useInputAccessibility = (
   const monitorSystemPreferences = useCallback(() => {
     // Monitor reduced motion preference
     if (enableReducedMotion) {
-      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion)')
-      const handleMotionChange = (e) => {
+      motionQueryRef.current = window.matchMedia('(prefers-reduced-motion: reduce)')
+      const handleMotionChange = (e: MediaQueryListEvent) => {
         setAccessibilityState(prev => ({
           ...prev,
-          isReducedMotion}))
+          isReducedMotion: e.matches
+        }))
       }
       motionQueryRef.current.addEventListener('change', handleMotionChange)
       
       // Set initial state
       setAccessibilityState(prev => ({
         ...prev,
-        isReducedMotion}))
+        isReducedMotion: motionQueryRef.current?.matches || false
+      }))
     }
 
     // Monitor high contrast preference
     if (enableHighContrast) {
-      contrastQueryRef.current = window.matchMedia('(prefers-contrast)')
-      const handleContrastChange = (e) => {
+      contrastQueryRef.current = window.matchMedia('(prefers-contrast: high)')
+      const handleContrastChange = (e: MediaQueryListEvent) => {
         setAccessibilityState(prev => ({
           ...prev,
-          isHighContrast}))
+          isHighContrast: e.matches
+        }))
       }
       contrastQueryRef.current.addEventListener('change', handleContrastChange)
       
       // Set initial state
       setAccessibilityState(prev => ({
         ...prev,
-        isHighContrast}))
+        isHighContrast: contrastQueryRef.current?.matches || false
+      }))
     }
 
     // Monitor voice control preference (simulated)
@@ -193,7 +230,7 @@ export const useInputAccessibility = (
       setTimeout(() => {
         setAccessibilityState(prev => ({
           ...prev,
-          isVoiceControl) > 0.7 // 30% chance of voice control being active
+          isVoiceControl: Math.random() > 0.7 // 30% chance of voice control being active
         }))
       }, 1000)
     }
@@ -218,12 +255,13 @@ export const useInputAccessibility = (
       
       ariaEnhancements.forEach(enhancement => {
         callbacks.onAccessibilityFeatureEnabled?.({
-          id,
-          name,
-          type,
-          enabled,
-          impact,
-          description})
+          id: 'aria-enhancement',
+          name: 'ARIA Enhancement',
+          type: 'aria',
+          enabled: true,
+          impact: 'high',
+          description: enhancement
+        })
       })
     }, 200)
   }, [enableARIA, callbacks])
@@ -320,7 +358,7 @@ export const useInputAccessibility = (
     
     setAccessibilityState(prev => ({
       ...prev,
-      accessibilityScore)
+      accessibilityScore: Math.round(score)
     }))
     
     callbacks.onAccessibilityScoreChanged?.(score)
@@ -337,7 +375,7 @@ export const useInputAccessibility = (
 
   // Get accessibility recommendations
   const getAccessibilityRecommendations = useCallback(() => {
-    const recommendations] = []
+    const recommendations: string[] = []
     
     if (accessibilityState.accessibilityScore < 70) {
       recommendations.push('Accessibility score is low, consider enabling more features')
@@ -404,12 +442,12 @@ export const useInputAccessibility = (
     autoEnhanceAccessibility,
     
     // Utility functions
-    isFeatureEnabled) => accessibilityFeatures.find(f => f.id === featureId)?.enabled || false,
-    getFeatureByName) => accessibilityFeatures.find(f => f.name.toLowerCase().includes(name.toLowerCase())),
-    getAccessibilityScore) => accessibilityState.accessibilityScore,
-    isAccessibilityOptimal) => accessibilityState.accessibilityScore >= 80,
+    isFeatureEnabled: (featureId: string) => accessibilityFeatures.find(f => f.id === featureId)?.enabled || false,
+    getFeatureByName: (name: string) => accessibilityFeatures.find(f => f.name.toLowerCase().includes(name.toLowerCase())),
+    getAccessibilityScore: () => accessibilityState.accessibilityScore,
+    isAccessibilityOptimal: () => accessibilityState.accessibilityScore >= 80,
     getAccessibilityRecommendations,
-    clearEnhancements) => setEnhancements([])
+    clearEnhancements: () => setEnhancements([])
   }
 }