@accessibility-rn-js/react-native-accessibility-toolkit 1.0.0

package/src/hooks/useThemeColors.js

@@ -0,0 +1,169 @@
+/**
+ * useThemeColors.js
+ * Hook to get dynamic colors based on accessibility settings
+ */
+
+import { useMemo } from 'react';
+import { useAccessibility } from '../context/AccessibilityContext';
+
+// Helper to convert hex to RGB
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+};
+
+// Helper to convert RGB to hex
+const rgbToHex = (r, g, b) => {
+  return '#' + [r, g, b].map((x) => {
+    const hex = Math.round(x).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('');
+};
+
+// Apply grayscale to a color
+const applyGrayscale = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const gray = Math.round(0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b);
+  return rgbToHex(gray, gray, gray);
+};
+
+// Apply saturation adjustment
+const applySaturation = (hex, factor) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  
+  const gray = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
+  const r = Math.max(0, Math.min(255, gray + factor * (rgb.r - gray)));
+  const g = Math.max(0, Math.min(255, gray + factor * (rgb.g - gray)));
+  const b = Math.max(0, Math.min(255, gray + factor * (rgb.b - gray)));
+  
+  return rgbToHex(r, g, b);
+};
+
+// Invert a color
+const invertColor = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return rgbToHex(255 - rgb.r, 255 - rgb.g, 255 - rgb.b);
+};
+
+export const useThemeColors = () => {
+  const {
+    colorTheme,
+    highContrast,
+    colorInversion,
+    greyscale,
+    lowSaturation,
+    highSaturation,
+  } = useAccessibility();
+
+  const colors = useMemo(() => {
+    const isDark = colorTheme === 'dark';
+    
+    // Base colors
+    let baseColors;
+    
+    if (highContrast) {
+      // High contrast colors
+      if (isDark) {
+        baseColors = {
+          background: '#000000',
+          text: '#FFFFFF',
+          primary: '#FFFFFF',
+          secondary: '#FFFF00',
+          border: '#FFFFFF',
+          card: '#1A1A1A',
+          placeholder: '#CCCCCC',
+        };
+      } else {
+        baseColors = {
+          background: '#FFFFFF',
+          text: '#000000',
+          primary: '#0000FF',
+          secondary: '#000080',
+          border: '#000000',
+          card: '#F5F5F5',
+          placeholder: '#666666',
+        };
+      }
+    } else {
+      // Normal colors
+      if (isDark) {
+        baseColors = {
+          background: '#1E1E1E',
+          text: '#FFFFFF',
+          primary: '#007AFF',
+          secondary: '#5856D6',
+          border: '#3A3A3C',
+          card: '#2C2C2E',
+          placeholder: '#8E8E93',
+        };
+      } else {
+        baseColors = {
+          background: '#FFFFFF',
+          text: '#000000',
+          primary: '#007AFF',
+          secondary: '#5856D6',
+          border: '#C7C7CC',
+          card: '#F2F2F7',
+          placeholder: '#8E8E93',
+        };
+      }
+    }
+
+    // Apply color transformations
+    let processedColors = { ...baseColors };
+
+    // Apply grayscale
+    if (greyscale) {
+      processedColors = Object.keys(processedColors).reduce((acc, key) => {
+        acc[key] = applyGrayscale(processedColors[key]);
+        return acc;
+      }, {});
+    }
+
+    // Apply saturation adjustments
+    if (lowSaturation && !greyscale) {
+      processedColors = Object.keys(processedColors).reduce((acc, key) => {
+        if (key !== 'background' && key !== 'text') {
+          acc[key] = applySaturation(processedColors[key], 0.3);
+        } else {
+          acc[key] = processedColors[key];
+        }
+        return acc;
+      }, {});
+    }
+
+    if (highSaturation && !greyscale && !lowSaturation) {
+      processedColors = Object.keys(processedColors).reduce((acc, key) => {
+        if (key !== 'background' && key !== 'text') {
+          acc[key] = applySaturation(processedColors[key], 2.0);
+        } else {
+          acc[key] = processedColors[key];
+        }
+        return acc;
+      }, {});
+    }
+
+    // Apply color inversion
+    if (colorInversion) {
+      processedColors = Object.keys(processedColors).reduce((acc, key) => {
+        acc[key] = invertColor(processedColors[key]);
+        return acc;
+      }, {});
+    }
+
+    return processedColors;
+  }, [colorTheme, highContrast, colorInversion, greyscale, lowSaturation, highSaturation]);
+
+  return colors;
+};
+
+export default useThemeColors;

package/src/index.js

@@ -0,0 +1,49 @@
+// Main exports for the accessibility toolkit
+export { AccessibilityProvider, useAccessibility } from './context/AccessibilityContext';
+
+// Components
+export { default as AccessibilityButton } from './components/AccessibilityButton';
+export { default as AccessibleText } from './components/AccessibleText';
+
+// Hooks
+export { default as useDynamicColors } from './hooks/useDynamicColors';
+export { default as usePageRead } from './hooks/usePageRead';
+export { default as useThemeColors } from './hooks/useThemeColors';
+
+// Services
+export { default as TTSService } from './services/TTSService';
+export { default as NativeAccessibilityBridge } from './services/NativeAccessibilityBridge';
+export { 
+  loadAccessibilityPreferences, 
+  saveAccessibilityPreferences,
+  clearAccessibilityPreferences 
+} from './services/AccessibilityStorage';
+
+// Utils
+export {
+  ACCESSIBILITY_PROFILES,
+  TEXT_ALIGNMENT,
+  COLOR_THEMES,
+  DEFAULT_ACCESSIBILITY_STATE,
+  PROFILE_CONFIGS,
+  applyProfile,
+  getAdjustedFontSize,
+  getAdjustedLineHeight,
+  getButtonPadding,
+  MIN_TOUCH_TARGET,
+} from './utils/AccessibilityUtils';
+
+export { getColors } from './utils/Colors';
+
+// Default export for convenience
+export default {
+  AccessibilityProvider,
+  useAccessibility,
+  AccessibilityButton,
+  AccessibleText,
+  useDynamicColors,
+  usePageRead,
+  useThemeColors,
+  TTSService,
+  NativeAccessibilityBridge,
+};

package/src/services/AccessibilityStorage.js

@@ -0,0 +1,40 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { DEFAULT_ACCESSIBILITY_STATE } from '../utils/AccessibilityUtils';
+
+const STORAGE_KEY = '@accessibility_preferences';
+
+// Save accessibility preferences
+export const saveAccessibilityPreferences = async (preferences) => {
+  try {
+    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
+    return true;
+  } catch (error) {
+    console.error('Error saving accessibility preferences:', error);
+    return false;
+  }
+};
+
+// Load accessibility preferences
+export const loadAccessibilityPreferences = async () => {
+  try {
+    const stored = await AsyncStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+    return DEFAULT_ACCESSIBILITY_STATE;
+  } catch (error) {
+    console.error('Error loading accessibility preferences:', error);
+    return DEFAULT_ACCESSIBILITY_STATE;
+  }
+};
+
+// Clear accessibility preferences
+export const clearAccessibilityPreferences = async () => {
+  try {
+    await AsyncStorage.removeItem(STORAGE_KEY);
+    return true;
+  } catch (error) {
+    console.error('Error clearing accessibility preferences:', error);
+    return false;
+  }
+};

package/src/services/NativeAccessibilityBridge.js

@@ -0,0 +1,171 @@
+/**
+ * NativeAccessibilityBridge.js
+ * Bridge between React Native native accessibility features and custom implementation
+ */
+
+import { AccessibilityInfo, Platform } from 'react-native';
+
+class NativeAccessibilityBridge {
+  listeners = [];
+
+  /**
+   * Initialize native accessibility detection
+   */
+  async initialize(updateCallback) {
+    try {
+      // Detect Screen Reader
+      const screenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
+      
+      // Detect Reduced Motion (iOS only)
+      let reducedMotionEnabled = false;
+      if (Platform.OS === 'ios') {
+        reducedMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();
+      }
+
+      // Detect Bold Text (iOS only)
+      let boldTextEnabled = false;
+      if (Platform.OS === 'ios') {
+        boldTextEnabled = await AccessibilityInfo.isBoldTextEnabled();
+      }
+
+      // Detect Grayscale (iOS only)
+      let grayscaleEnabled = false;
+      if (Platform.OS === 'ios') {
+        grayscaleEnabled = await AccessibilityInfo.isGrayscaleEnabled();
+      }
+
+      // Detect Invert Colors (iOS only)
+      let invertColorsEnabled = false;
+      if (Platform.OS === 'ios') {
+        invertColorsEnabled = await AccessibilityInfo.isInvertColorsEnabled();
+      }
+
+      // Detect Reduce Transparency (iOS only)
+      let reduceTransparencyEnabled = false;
+      if (Platform.OS === 'ios') {
+        reduceTransparencyEnabled = await AccessibilityInfo.isReduceTransparencyEnabled();
+      }
+
+      // Update with native settings
+      updateCallback({
+        nativeScreenReader: screenReaderEnabled,
+        nativeReducedMotion: reducedMotionEnabled,
+        nativeBoldText: boldTextEnabled,
+        nativeGrayscale: grayscaleEnabled,
+        nativeInvertColors: invertColorsEnabled,
+        nativeReduceTransparency: reduceTransparencyEnabled,
+      });
+
+      // Setup listeners
+      this.setupListeners(updateCallback);
+
+      return {
+        screenReaderEnabled,
+        reducedMotionEnabled,
+        boldTextEnabled,
+        grayscaleEnabled,
+        invertColorsEnabled,
+        reduceTransparencyEnabled,
+      };
+    } catch (error) {
+      console.error('Error initializing native accessibility:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Setup event listeners for native accessibility changes
+   */
+  setupListeners(updateCallback) {
+    // Screen Reader changed
+    const screenReaderListener = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      (enabled) => {
+        updateCallback({ nativeScreenReader: enabled });
+      }
+    );
+    this.listeners.push(screenReaderListener);
+
+    // Reduced Motion changed (iOS)
+    if (Platform.OS === 'ios') {
+      const reducedMotionListener = AccessibilityInfo.addEventListener(
+        'reduceMotionChanged',
+        (enabled) => {
+          updateCallback({ nativeReducedMotion: enabled });
+        }
+      );
+      this.listeners.push(reducedMotionListener);
+
+      // Bold Text changed
+      const boldTextListener = AccessibilityInfo.addEventListener(
+        'boldTextChanged',
+        (enabled) => {
+          updateCallback({ nativeBoldText: enabled });
+        }
+      );
+      this.listeners.push(boldTextListener);
+
+      // Grayscale changed
+      const grayscaleListener = AccessibilityInfo.addEventListener(
+        'grayscaleChanged',
+        (enabled) => {
+          updateCallback({ nativeGrayscale: enabled });
+        }
+      );
+      this.listeners.push(grayscaleListener);
+
+      // Invert Colors changed
+      const invertColorsListener = AccessibilityInfo.addEventListener(
+        'invertColorsChanged',
+        (enabled) => {
+          updateCallback({ nativeInvertColors: enabled });
+        }
+      );
+      this.listeners.push(invertColorsListener);
+    }
+  }
+
+  /**
+   * Announce message for screen readers
+   */
+  announce(message, options = {}) {
+    AccessibilityInfo.announceForAccessibility(message);
+  }
+
+  /**
+   * Announce message for screen readers (with queue option for iOS)
+   */
+  announceForAccessibilityWithOptions(message, options = {}) {
+    if (Platform.OS === 'ios') {
+      AccessibilityInfo.announceForAccessibilityWithOptions(
+        message,
+        options // { queue: true/false }
+      );
+    } else {
+      AccessibilityInfo.announceForAccessibility(message);
+    }
+  }
+
+  /**
+   * Set accessibility focus to a specific element
+   */
+  setAccessibilityFocus(reactTag) {
+    if (Platform.OS === 'ios') {
+      AccessibilityInfo.setAccessibilityFocus(reactTag);
+    }
+  }
+
+  /**
+   * Clean up listeners
+   */
+  cleanup() {
+    this.listeners.forEach(listener => {
+      if (listener && listener.remove) {
+        listener.remove();
+      }
+    });
+    this.listeners = [];
+  }
+}
+
+export default new NativeAccessibilityBridge();

package/src/services/TTSService.js

@@ -0,0 +1,117 @@
+/**
+ * TTSService.js
+ * Text-to-Speech service for reading page content
+ */
+
+import { Platform } from 'react-native';
+import Tts from 'react-native-tts';
+
+class TTSService {
+  isSpeaking = false;
+  isPaused = false;
+
+  /**
+   * Initialize TTS
+   */
+  async init() {
+    try {
+      // Set up event listeners
+      Tts.addEventListener('tts-start', () => {
+        this.isSpeaking = true;
+      });
+      
+      Tts.addEventListener('tts-finish', () => {
+        this.isSpeaking = false;
+      });
+      
+      Tts.addEventListener('tts-cancel', () => {
+        this.isSpeaking = false;
+      });
+
+      // Set default settings
+      await Tts.setDefaultLanguage('en-US');
+      await Tts.setDefaultRate(0.5);
+      await Tts.setDefaultPitch(1.0);
+    } catch (error) {
+      console.error('TTS Init Error:', error);
+    }
+  }
+
+  /**
+   * Speak text aloud
+   */
+  async speak(text, options = {}) {
+    const {
+      language = 'en-US',
+      pitch = 1.0,
+      rate = 0.5,
+    } = options;
+
+    try {
+      this.isSpeaking = true;
+      this.isPaused = false;
+
+      await Tts.setDefaultLanguage(language);
+      await Tts.setDefaultRate(rate);
+      await Tts.setDefaultPitch(pitch);
+      
+      Tts.speak(text);
+    } catch (error) {
+      this.isSpeaking = false;
+      console.error('TTS Error:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Stop speaking
+   */
+  stop() {
+    Tts.stop();
+    this.isSpeaking = false;
+    this.isPaused = false;
+  }
+
+  /**
+   * Check if TTS is available
+   */
+  async isAvailable() {
+    try {
+      const voices = await Tts.voices();
+      return voices && voices.length > 0;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /**
+   * Get available voices
+   */
+  async getVoices() {
+    try {
+      return await Tts.voices();
+    } catch (error) {
+      return [];
+    }
+  }
+
+  /**
+   * Read entire page (utility function)
+   * Extracts text from components marked with accessibility labels
+   */
+  readPage(textContent) {
+    if (!textContent) return;
+    
+    // Clean and prepare text for reading
+    const cleanText = textContent
+      .replace(/\s+/g, ' ')
+      .replace(/[^\w\s.,!?-]/g, '')
+      .trim();
+    
+    this.speak(cleanText, {
+      rate: 0.9, // Slightly slower for better comprehension
+    });
+  }
+}
+
+export default new TTSService();