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

package/dist/components/ui/touch-friendly-interface.js

@@ -4,34 +4,40 @@ import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interf
 
 // Touch-Friendly Button Component
 export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  children: React.ReactNode
+}
 
 export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
   ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
     const feedbackClasses = {
-      scale,
-      ripple,
-      color,
-      none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    }
 
     const variantClasses = {
-      default,
-      secondary,
-      outline,
-      ghost,
-      destructive}
+      default: 'touch-friendly-button',
+      secondary: 'touch-friendly-button-secondary',
+      outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+      ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
+      destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
+    }
 
     const sizeClasses = {
-      sm] min-w-[44px] px-3 py-2 text-sm',
-      default] min-w-[48px] px-4 py-3 text-base',
-      lg] min-w-[56px] px-6 py-4 text-lg',
-      xl] min-w-[64px] px-8 py-5 text-xl'
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
+      xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
     }
 
     return (
@@ -45,8 +51,8 @@ export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyBu
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       >
@@ -65,26 +71,29 @@ TouchFriendlyButton.displayName = 'TouchFriendlyButton'
 
 // Touch-Friendly Input Component
 export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  touchSize?}
+  touchSize?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+}
 
 export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
   ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
     const { getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
     const feedbackClasses = {
-      scale,
-      ripple,
-      color,
-      none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-focus',
+      none: ''
+    }
 
     const sizeClasses = {
-      sm] min-w-[44px] px-3 py-2 text-sm',
-      default] min-w-[48px] px-4 py-3 text-base',
-      lg] min-w-[56px] px-6 py-4 text-lg'
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
     }
 
     return (
@@ -97,8 +106,8 @@ export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInpu
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       />
@@ -110,29 +119,37 @@ TouchFriendlyInput.displayName = 'TouchFriendlyInput'
 
 // Touch-Friendly Card Component
 export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?}
+  size?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  interactive?: boolean
+}
 
 export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
   ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
     const feedbackClasses = interactive ? {
-      scale,
-      ripple,
-      color,
-      none} , ripple, color, none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    } : { scale: '', ripple: '', color: '', none: '' }
 
     const sizeClasses = {
-      sm] min-w-[44px] p-3',
-      default] min-w-[48px] p-4',
-      lg] min-w-[56px] p-6'
+      sm: 'min-h-[44px] min-w-[44px] p-3',
+      default: 'min-h-[48px] min-w-[48px] p-4',
+      lg: 'min-h-[56px] min-w-[56px] p-6'
     }
 
-    const interactiveClasses = interactive ? 'cursor-pointer' ={ref}
+    const interactiveClasses = interactive ? 'cursor-pointer' : ''
+
+    return (
+      <div
+        ref={ref}
         className={cn(
           baseClasses,
           feedbackClasses[feedback],
@@ -141,8 +158,8 @@ export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardPro
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       >
@@ -161,20 +178,23 @@ TouchFriendlyCard.displayName = 'TouchFriendlyCard'
 
 // Touch-Friendly Toggle Component
 export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  checked?) => void
-  size?}
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  size?: 'sm' | 'default' | 'lg'
+}
 
 export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
   ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
-      feedback})
+      minSize: 44,
+      feedback: 'scale'
+    })
 
     const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
     const sizeClasses = {
-      sm] min-w-[44px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]'
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
     }
 
     const handleClick = () => {
@@ -191,13 +211,13 @@ export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyTo
           baseClasses,
           sizeClasses[size],
           'relative inline-flex items-center justify-center rounded-full transition-colors',
-          checked ? 'bg-cs-primary' ,
-          'focus,
+          checked ? 'bg-cs-primary' : 'bg-cs-border',
+          'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         onClick={handleClick}
         {...props}
@@ -205,8 +225,9 @@ export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyTo
         <span
           className={cn(
             'inline-block rounded-full bg-white shadow transform transition-transform',
-            size === 'sm' ? 'w-5 h-5' === 'default' ? 'w-6 h-6' ,
-            checked ? 'translate-x-full' )}
+            size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7',
+            checked ? 'translate-x-full' : 'translate-x-0'
+          )}
         />
         {!isTouchTargetCompliant() && (
           <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
@@ -222,19 +243,22 @@ TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
 
 // Touch-Friendly Slider Component
 export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  touchSize?}
+  touchSize?: 'sm' | 'default' | 'lg'
+  showValue?: boolean
+}
 
 export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
   ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
-      feedback})
+      minSize: 44,
+      feedback: 'scale'
+    })
 
     const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
     const sizeClasses = {
-      sm] min-w-[44px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]'
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
     }
 
     return (
@@ -246,11 +270,11 @@ export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySli
             baseClasses,
             sizeClasses[touchSize],
             'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
-            'focus,
+            'focus:outline-none focus:ring-2 focus:ring-cs-primary',
             className
           )}
           style={{
-            minHeight)}px`
+            minHeight: `${getTouchTargetSize()}px`
           }}
           {...props}
         />

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

@@ -1,54 +1,71 @@
 import { useState, useCallback, useRef, useEffect, KeyboardEvent } from 'react'
 
 export interface AccessibilitySupportConfig {
-  enableAriaSupport?}
+  enableAriaSupport?: boolean
+  enableKeyboardNavigation?: boolean
+  enableScreenReaderSupport?: boolean
+  enableFocusManagement?: boolean
+  enableHighContrast?: boolean
+  enableReducedMotion?: boolean
+  enableVoiceControl?: boolean
+}
 
 export interface AccessibilityState {
-  hasAriaLabels}
+  hasAriaLabels: boolean
+  hasKeyboardNavigation: boolean
+  hasScreenReaderSupport: boolean
+  hasFocusManagement: boolean
+  isHighContrast: boolean
+  isReducedMotion: boolean
+  isVoiceControlEnabled: boolean
+  accessibilityLevel: 'basic' | 'enhanced' | 'advanced'
+}
 
 export interface AccessibilityFeatures {
-  ariaLabels, string>
-  keyboardShortcuts, string>
-  focusableElements, string>
+  ariaLabels: Map<string, string>
+  keyboardShortcuts: Map<string, string>
+  focusableElements: Set<string>
+  screenReaderText: Map<string, string>
 }
 
 export interface AccessibilitySupportCallbacks {
-  onAriaEnhanced?) => void
-  onKeyboardNavigationEnabled?) => void
-  onScreenReaderEnhanced?) => void
-  onFocusManagementImproved?) => void
-  onAccessibilityWarning?) => void
+  onAriaEnhanced?: (feature: string) => void
+  onKeyboardNavigationEnabled?: (feature: string) => void
+  onScreenReaderEnhanced?: (feature: string) => void
+  onFocusManagementImproved?: (feature: string) => void
+  onAccessibilityWarning?: (warning: string) => void
 }
 
 export const useAccessibilitySupport = (
-  config= {},
-  callbacks= {}
+  config: AccessibilitySupportConfig = {},
+  callbacks: AccessibilitySupportCallbacks = {}
 ) => {
   const {
     enableAriaSupport = true,
-    enableKeyboardNavigation= true,
+    enableKeyboardNavigation: enableKeyboardNav = true,
     enableScreenReaderSupport = true,
     enableFocusManagement = true,
-    enableHighContrast= true,
-    enableReducedMotion= true,
-    enableVoiceControl= true
+    enableHighContrast: enableHighContrastMode = true,
+    enableReducedMotion: enableReducedMotionMode = true,
+    enableVoiceControl: enableVoiceControlMode = true
   } = config
 
   const [state, setState] = useState<AccessibilityState>({
-    hasAriaLabels,
-    hasKeyboardNavigation,
-    hasScreenReaderSupport,
-    hasFocusManagement,
-    isHighContrast,
-    isReducedMotion,
-    isVoiceControlEnabled,
-    accessibilityLevel})
+    hasAriaLabels: false,
+    hasKeyboardNavigation: false,
+    hasScreenReaderSupport: false,
+    hasFocusManagement: false,
+    isHighContrast: false,
+    isReducedMotion: false,
+    isVoiceControlEnabled: false,
+    accessibilityLevel: 'basic'
+  })
 
   const [features, setFeatures] = useState<AccessibilityFeatures>({
-    ariaLabels),
-    keyboardShortcuts),
-    focusableElements),
-    screenReaderText)
+    ariaLabels: new Map(),
+    keyboardShortcuts: new Map(),
+    focusableElements: new Set(),
+    screenReaderText: new Map()
   })
 
   const [isEnhancing, setIsEnhancing] = useState(false)
@@ -56,12 +73,12 @@ export const useAccessibilitySupport = (
   const [accessibilityWarnings, setAccessibilityWarnings] = useState<string[]>([])
   
   const focusableElementsRef = useRef<Set<HTMLElement>>(new Set())
-  const keyboardListenersRef = useRef<Map<string, (event) => void>>(new Map())
+  const keyboardListenersRef = useRef<Map<string, (event: KeyboardEvent) => void>>(new Map())
 
   // ARIA support
   const enhanceAriaSupport = useCallback((
-    elementId,
-    ariaAttributes, string>
+    elementId: string,
+    ariaAttributes: Record<string, string>
   ) => {
     if (!enableAriaSupport) return false
 
@@ -78,13 +95,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...ariaEnhancements])
       setState(prev => ({
         ...prev,
-        hasAriaLabels,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasAriaLabels: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        ariaLabels, JSON.stringify(ariaAttributes)))
+        ariaLabels: new Map(prev.ariaLabels.set(elementId, JSON.stringify(ariaAttributes)))
       }))
       
       setIsEnhancing(false)
@@ -99,8 +117,8 @@ export const useAccessibilitySupport = (
 
   // Keyboard navigation
   const enableKeyboardNavigationFeature = useCallback((
-    elementId,
-    shortcuts, string>
+    elementId: string,
+    shortcuts: Record<string, string>
   ) => {
     if (!enableKeyboardNav) return false
 
@@ -117,13 +135,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...keyboardEnhancements])
       setState(prev => ({
         ...prev,
-        hasKeyboardNavigation,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasKeyboardNavigation: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        keyboardShortcuts, JSON.stringify(shortcuts)))
+        keyboardShortcuts: new Map(prev.keyboardShortcuts.set(elementId, JSON.stringify(shortcuts)))
       }))
       
       setIsEnhancing(false)
@@ -138,8 +157,9 @@ export const useAccessibilitySupport = (
 
   // Screen reader support
   const enhanceScreenReaderSupport = useCallback((
-    elementId,
-    screenReaderText) => {
+    elementId: string,
+    screenReaderText: string
+  ) => {
     if (!enableScreenReaderSupport) return false
 
     setIsEnhancing(true)
@@ -155,13 +175,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...screenReaderEnhancements])
       setState(prev => ({
         ...prev,
-        hasScreenReaderSupport,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasScreenReaderSupport: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        screenReaderText, screenReaderText))
+        screenReaderText: new Map(prev.screenReaderText.set(elementId, screenReaderText))
       }))
       
       setIsEnhancing(false)
@@ -176,8 +197,9 @@ export const useAccessibilitySupport = (
 
   // Focus management
   const improveFocusManagement = useCallback((
-    elementId,
-    focusStrategy) => {
+    elementId: string,
+    focusStrategy: 'trap' | 'cycle' | 'skip' | 'highlight'
+  ) => {
     if (!enableFocusManagement) return false
 
     setIsEnhancing(true)
@@ -193,13 +215,14 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...focusEnhancements])
       setState(prev => ({
         ...prev,
-        hasFocusManagement,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        hasFocusManagement: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       // Update features
       setFeatures(prev => ({
         ...prev,
-        focusableElements))
+        focusableElements: new Set(prev.focusableElements.add(elementId))
       }))
       
       setIsEnhancing(false)
@@ -229,8 +252,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...highContrastEnhancements])
       setState(prev => ({
         ...prev,
-        isHighContrast,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isHighContrast: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -259,8 +283,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...reducedMotionEnhancements])
       setState(prev => ({
         ...prev,
-        isReducedMotion,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isReducedMotion: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -289,8 +314,9 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...voiceControlEnhancements])
       setState(prev => ({
         ...prev,
-        isVoiceControlEnabled,
-        accessibilityLevel=== 'basic' ? 'enhanced' }))
+        isVoiceControlEnabled: true,
+        accessibilityLevel: prev.accessibilityLevel === 'basic' ? 'enhanced' : 'advanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -305,10 +331,11 @@ export const useAccessibilitySupport = (
   // Accessibility validation
   const validateAccessibility = useCallback(() => {
     const validation = {
-      isValid,
-      warnings] as string[],
-      errors] as string[],
-      score}
+      isValid: true,
+      warnings: [] as string[],
+      errors: [] as string[],
+      score: 0
+    }
     
     // Check ARIA support
     if (!state.hasAriaLabels) {
@@ -346,16 +373,18 @@ export const useAccessibilitySupport = (
   // Accessibility analysis
   const analyzeAccessibility = useCallback(() => {
     const analysis = {
-      level,
-      features,
-        keyboard,
-        screenReader,
-        focus,
-        highContrast,
-        reducedMotion,
-        voiceControl},
-      coverage,
-      recommendations] as string[]
+      level: state.accessibilityLevel,
+      features: {
+        aria: state.hasAriaLabels,
+        keyboard: state.hasKeyboardNavigation,
+        screenReader: state.hasScreenReaderSupport,
+        focus: state.hasFocusManagement,
+        highContrast: state.isHighContrast,
+        reducedMotion: state.isReducedMotion,
+        voiceControl: state.isVoiceControlEnabled
+      },
+      coverage: 0,
+      recommendations: [] as string[]
     }
     
     // Calculate coverage
@@ -410,11 +439,12 @@ export const useAccessibilitySupport = (
       setEnhancements(prev => [...prev, ...autoEnhancements])
       setState(prev => ({
         ...prev,
-        hasAriaLabels,
-        hasKeyboardNavigation,
-        hasScreenReaderSupport,
-        hasFocusManagement,
-        accessibilityLevel}))
+        hasAriaLabels: true,
+        hasKeyboardNavigation: true,
+        hasScreenReaderSupport: true,
+        hasFocusManagement: true,
+        accessibilityLevel: 'enhanced'
+      }))
       
       setIsEnhancing(false)
       
@@ -428,7 +458,7 @@ export const useAccessibilitySupport = (
   useEffect(() => {
     // Check for high contrast preference
     if (enableHighContrastMode) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast)')
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)')
       if (highContrastQuery.matches) {
         enableHighContrastFeature()
       }
@@ -436,7 +466,7 @@ export const useAccessibilitySupport = (
     
     // Check for reduced motion preference
     if (enableReducedMotionMode) {
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)')
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
       if (reducedMotionQuery.matches) {
         enableReducedMotionFeature()
       }
@@ -461,12 +491,12 @@ export const useAccessibilitySupport = (
     
     // Enhancement functions
     enhanceAriaSupport,
-    enableKeyboardNavigation,
+    enableKeyboardNavigation: enableKeyboardNavigationFeature,
     enhanceScreenReaderSupport,
     improveFocusManagement,
-    enableHighContrast,
-    enableReducedMotion,
-    enableVoiceControl,
+    enableHighContrast: enableHighContrastFeature,
+    enableReducedMotion: enableReducedMotionFeature,
+    enableVoiceControl: enableVoiceControlFeature,
     autoEnhanceAccessibility,
     
     // Analysis and validation
@@ -474,14 +504,14 @@ export const useAccessibilitySupport = (
     analyzeAccessibility,
     
     // Utility functions
-    isAccessibilityEnhanced) => state.accessibilityLevel !== 'basic',
-    getAccessibilityLevel) => state.accessibilityLevel,
-    getAccessibilityScore) => {
+    isAccessibilityEnhanced: () => state.accessibilityLevel !== 'basic',
+    getAccessibilityLevel: () => state.accessibilityLevel,
+    getAccessibilityScore: () => {
       const validation = validateAccessibility()
       return validation.score
     },
-    clearEnhancements) => setEnhancements([]),
-    clearWarnings) => setAccessibilityWarnings([])
+    clearEnhancements: () => setEnhancements([]),
+    clearWarnings: () => setAccessibilityWarnings([])
   }
 }