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

package/README.md

@@ -0,0 +1,251 @@
+# React Native Accessibility Toolkit
+
+A comprehensive, production-ready accessibility plugin for React Native applications. This toolkit provides features like text-to-speech, screen reader support, dynamic color adjustments, text scaling, and more to make your React Native apps accessible to all users.
+
+## ✨ Features
+
+- **🔊 Text-to-Speech (TTS)** - Read content aloud with customizable voice controls
+- **📱 Native Accessibility** - TalkBack (Android) & VoiceOver (iOS) integration
+- **🎨 Dynamic Colors** - High contrast, grayscale, color inversion, saturation controls
+- **📏 Text Controls** - Font scaling, line height, letter spacing adjustments
+- **👁️ Visual Aids** - Hide images, enlarge buttons, reduced motion
+- **📖 Reading Features** - Text alignment, reading guides, text magnification
+- **🎯 Accessibility Profiles** - Pre-configured settings for specific needs
+- **💾 Persistent Storage** - Automatically saves user preferences
+- **🌐 Cross-Platform** - Works on both iOS and Android
+
+## 📦 Installation
+
+```bash
+npm install @yourorg/react-native-accessibility-toolkit
+# or
+yarn add @yourorg/react-native-accessibility-toolkit
+```
+
+### Install Peer Dependencies
+
+```bash
+npm install react-native-tts @react-native-async-storage/async-storage react-native-vector-icons
+```
+
+### iOS Setup
+
+```bash
+cd ios && pod install
+```
+
+Add to your `Info.plist`:
+```xml
+<key>NSSpeechRecognitionUsageDescription</key>
+<string>This app uses speech recognition for accessibility features</string>
+```
+
+### Android Setup
+
+For react-native-vector-icons, add to `android/app/build.gradle`:
+```gradle
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+```
+
+## 🚀 Quick Start
+
+### 1. Wrap Your App
+
+```javascript
+import { AccessibilityProvider } from '@yourorg/react-native-accessibility-toolkit';
+
+export default function App() {
+  return (
+    <AccessibilityProvider>
+      {/* Your app content */}
+    </AccessibilityProvider>
+  );
+}
+```
+
+### 2. Add Accessibility Button
+
+```javascript
+import { AccessibilityButton } from '@yourorg/react-native-accessibility-toolkit';
+
+function MyScreen() {
+  return (
+    <View>
+      {/* Your content */}
+      <AccessibilityButton />
+    </View>
+  );
+}
+```
+
+### 3. Use Accessible Components
+
+```javascript
+import { AccessibleText, useAccessibility } from '@yourorg/react-native-accessibility-toolkit';
+
+function MyComponent() {
+  const { fontScale, textColor } = useAccessibility();
+  
+  return (
+    <AccessibleText baseFontSize={16}>
+      This text respects accessibility settings!
+    </AccessibleText>
+  );
+}
+```
+
+## 📖 API Documentation
+
+### Core Hooks
+
+#### `useAccessibility()`
+```javascript
+const {
+  fontScale,              // Current font scale (1.0 - 2.0)
+  textColor,              // Custom text color
+  backgroundColor,        // Custom background color
+  updateSetting,          // Update single setting
+  setProfile,             // Apply accessibility profile
+  openModal,              // Open accessibility settings
+} = useAccessibility();
+```
+
+#### `useDynamicColors()`
+```javascript
+const colors = useDynamicColors();
+// Returns: { primaryTextColor, defaultBackground, primaryButtonColor, etc. }
+```
+
+#### `usePageRead(textContent)`
+```javascript
+const { start, pause, resume, stop, isSpeaking } = usePageRead("Text to read");
+```
+
+### Components
+
+- **`<AccessibleText>`** - Auto-scales and styles text
+- **`<AccessibilityButton>`** - Floating accessibility menu button
+
+### Services
+
+- **`TTSService`** - Text-to-speech functionality
+- **`NativeAccessibilityBridge`** - Native platform integration
+
+### Profiles
+
+```javascript
+import { ACCESSIBILITY_PROFILES } from '@yourorg/react-native-accessibility-toolkit';
+
+// Available profiles:
+ACCESSIBILITY_PROFILES.BLIND          // Screen reader optimized
+ACCESSIBILITY_PROFILES.DYSLEXIA       // Increased spacing, reading aids
+ACCESSIBILITY_PROFILES.LOW_VISION     // Maximum text, high contrast
+ACCESSIBILITY_PROFILES.COGNITIVE      // Simplified, clear layout
+ACCESSIBILITY_PROFILES.EPILEPSY_SAFE  // No animations, reduced saturation
+ACCESSIBILITY_PROFILES.ADHD_FOCUS     // Reading mask, minimal distractions
+```
+
+## 🎨 Customization
+
+### Update Individual Settings
+
+```javascript
+const { updateSetting } = useAccessibility();
+
+updateSetting('fontScale', 1.5);
+updateSetting('colorTheme', 'dark');
+updateSetting('textColor', '#FF0000');
+```
+
+### Apply Complete Profile
+
+```javascript
+const { setProfile } = useAccessibility();
+
+setProfile(ACCESSIBILITY_PROFILES.DYSLEXIA);
+```
+
+## 🛠️ Advanced Usage
+
+### Custom Styling with Accessibility
+
+```javascript
+import { useAccessibility, getAdjustedFontSize } from '@yourorg/react-native-accessibility-toolkit';
+
+function CustomComponent() {
+  const { fontScale, backgroundColor, textColor } = useAccessibility();
+  
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: backgroundColor || '#FFFFFF',
+    },
+    text: {
+      fontSize: getAdjustedFontSize(16, fontScale),
+      color: textColor || '#000000',
+    },
+  });
+  
+  return <View style={styles.container}>...</View>;
+}
+```
+
+### Screen Reader Announcements
+
+```javascript
+import { NativeAccessibilityBridge } from '@yourorg/react-native-accessibility-toolkit';
+
+// Announce important messages
+NativeAccessibilityBridge.announce("Form submitted successfully");
+```
+
+## 📱 Platform Support
+
+- **iOS**: 12.4+
+- **Android**: API 21+  
+- **React Native**: 0.60.0+
+
+## 🤝 Before Publishing
+
+### Update Package Name
+
+Replace `@yourorg/react-native-accessibility-toolkit` with your actual npm organization/package name in:
+- `package.json`
+- This README
+- Example code
+
+### Update Author & Repository
+
+Edit `package.json`:
+```json
+{
+  "author": "Your Name <your.email@example.com>",
+  "repository": {
+    "url": "https://github.com/yourusername/your-repo.git"
+  }
+}
+```
+
+### Publishing to NPM
+
+```bash
+cd PLUGIN_SETUP
+npm login
+npm publish --access public
+```
+
+## 📄 License
+
+MIT
+
+## 🙏 Acknowledgments
+
+Built following WCAG 2.1 accessibility guidelines to ensure apps work for everyone.
+
+## 📞 Support
+
+- Issues: https://github.com/yourorg/react-native-accessibility-toolkit/issues
+- Documentation: Full API docs available in the repository
+
+---
+
+Made with ❤️ for accessibility

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@accessibility-rn-js/react-native-accessibility-toolkit",
+  "version": "1.0.0",
+  "description": "A comprehensive accessibility toolkit for React Native applications with TTS, screen reader, color adjustments, and more",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "keywords": [
+    "react-native",
+    "accessibility",
+    "a11y",
+    "screen-reader",
+    "tts",
+    "text-to-speech",
+    "wcag",
+    "inclusive-design"
+  ],
+  "author": "Jayesh Gupta <jayeshgupta3502@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/accessibility-rn-js/react-native-accessibility-toolkit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/accessibility-rn-js/react-native-accessibility-toolkit/issues"
+  },
+  "homepage": "https://github.com/accessibility-rn-js/react-native-accessibility-toolkit#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-vector-icons": ">=9.0.0"
+  },
+  "dependencies": {
+    "react-native-tts": "^4.1.0",
+    "@react-native-async-storage/async-storage": "^1.19.0",
+    "react-native-draggable": "^3.3.0",
+    "@miblanchard/react-native-slider": "^2.3.1",
+    "react-native-element-dropdown": "^2.10.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1"
+  }
+}

package/setup.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+
+# Quick setup script for converting to plugin
+
+echo "🚀 Setting up React Native Accessibility Toolkit Plugin..."
+
+# Create directory structure
+echo "📁 Creating directory structure..."
+mkdir -p src/components src/context src/hooks src/services src/utils
+
+# Copy files from existing project
+echo "📋 Copying files..."
+echo "Please manually copy these files:"
+echo "  - src/accessibility/*.js → src/components/"
+echo "  - src/accessibility/AccessibilityContext.js → src/context/"
+echo "  - src/accessibility/use*.js → src/hooks/"
+echo "  - src/accessibility/TTSService.js → src/services/"
+echo "  - src/accessibility/NativeAccessibilityBridge.js → src/services/"
+echo "  - src/accessibility/AccessibilityStorage.js → src/services/"
+echo "  - src/accessibility/AccessibilityUtils.js → src/utils/"
+
+# Initialize npm if not already done
+if [ ! -f "package.json" ]; then
+    echo "📦 Initializing npm..."
+    npm init -y
+fi
+
+# Install dev dependencies
+echo "📥 Installing dev dependencies..."
+npm install --save-dev @babel/core @babel/preset-env eslint jest
+
+echo "✅ Setup complete!"
+echo ""
+echo "Next steps:"
+echo "1. Copy your accessibility files to the new structure"
+echo "2. Remove project-specific dependencies (Global, Colors, etc.)"
+echo "3. Test the package locally with 'npm link'"
+echo "4. Publish to npm with 'npm publish'"
+echo ""
+echo "📖 Read INSTALLATION_GUIDE.md for detailed instructions"

package/src/components/AccessibilityButton.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Platform,
+} from 'react-native';
+import { useAccessibility } from '../context/AccessibilityContext';
+import { MIN_TOUCH_TARGET } from '../utils/AccessibilityUtils';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+const AccessibilityButton = () => {
+    const { openModal, enlargeButtons } = useAccessibility();
+
+    const buttonSize = enlargeButtons ? MIN_TOUCH_TARGET * 1.2 : MIN_TOUCH_TARGET;
+
+    return (
+        <TouchableOpacity
+            style={[
+                styles.floatingButton,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: buttonSize / 2,
+                },
+            ]}
+            onPress={openModal}
+            accessible={true}
+            accessibilityLabel="Open Accessibility Menu"
+            accessibilityHint="Opens a menu with accessibility options like text size, contrast, and display settings"
+            accessibilityRole="button"
+            activeOpacity={0.8}
+        >
+            <Icon name="accessibility" size={enlargeButtons ? 28 : 24} color="#ffffff" />
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    floatingButton: {
+        position: 'absolute',
+        bottom: 20,
+        right: 20,
+        backgroundColor: '#8B63FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+        zIndex: 1000,
+    },
+});
+
+export default AccessibilityButton;

package/src/components/AccessibleText.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import { useAccessibility } from '../context/AccessibilityContext';
+import { getAdjustedFontSize, getAdjustedLineHeight } from '../utils/AccessibilityUtils';
+
+/**
+ * Accessibility-aware Text component
+ * Automatically applies font scaling, line height, letter spacing, and text alignment
+ */
+const AccessibleText = ({ 
+  style, 
+  children, 
+  baseFontSize = 14,
+  ...props 
+}) => {
+  const { 
+    fontScale, 
+    lineHeight: lineHeightMultiplier, 
+    letterSpacing: letterSpacingValue,
+    textAlignment,
+    textColor,
+    nativeBoldText,
+  } = useAccessibility();
+
+  const adjustedFontSize = getAdjustedFontSize(baseFontSize, fontScale);
+  const adjustedLineHeight = getAdjustedLineHeight(baseFontSize, lineHeightMultiplier, fontScale);
+
+  const accessibilityStyles = {
+    fontSize: adjustedFontSize,
+    lineHeight: adjustedLineHeight,
+    letterSpacing: letterSpacingValue,
+    textAlign: textAlignment,
+    ...(textColor && { color: textColor }),
+    ...(nativeBoldText && { fontWeight: 'bold' }),
+  };
+
+  return (
+    <RNText 
+      style={[style, accessibilityStyles]} 
+      {...props}
+      accessible={true}
+      accessibilityRole="text"
+      allowFontScaling={true}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default AccessibleText;

package/src/context/AccessibilityContext.js

@@ -0,0 +1,125 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { DEFAULT_ACCESSIBILITY_STATE, applyProfile } from '../utils/AccessibilityUtils';
+import { loadAccessibilityPreferences, saveAccessibilityPreferences } from '../services/AccessibilityStorage';
+import NativeAccessibilityBridge from '../services/NativeAccessibilityBridge';
+
+const AccessibilityContext = createContext();
+
+export const useAccessibility = () => {
+  const context = useContext(AccessibilityContext);
+  if (!context) {
+    throw new Error('useAccessibility must be used within AccessibilityProvider');
+  }
+  return context;
+};
+
+export const AccessibilityProvider = ({ children }) => {
+  const [state, setState] = useState(DEFAULT_ACCESSIBILITY_STATE);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Initialize native accessibility detection
+  useEffect(() => {
+    const initNative = async () => {
+      await NativeAccessibilityBridge.initialize((nativeSettings) => {
+        setState(prevState => ({
+          ...prevState,
+          ...nativeSettings,
+        }));
+      });
+    };
+
+    initNative();
+
+    return () => {
+      NativeAccessibilityBridge.cleanup();
+    };
+  }, []);
+
+  // Load preferences on mount
+  useEffect(() => {
+    const loadPreferences = async () => {
+      const preferences = await loadAccessibilityPreferences();
+      setState(preferences);
+      setIsLoading(false);
+    };
+
+    loadPreferences();
+  }, []);
+
+  // Save preferences whenever state changes
+  useEffect(() => {
+    if (!isLoading) {
+      saveAccessibilityPreferences(state);
+    }
+  }, [state, isLoading]);
+
+  // Update individual setting
+  const updateSetting = useCallback((key, value) => {
+    setState(prevState => ({
+      ...prevState,
+      [key]: value,
+      activeProfile: 'none',
+    }));
+  }, []);
+
+  // Update multiple settings
+  const updateSettings = useCallback((updates) => {
+    setState(prevState => ({
+      ...prevState,
+      ...updates,
+    }));
+  }, []);
+
+  // Apply profile
+  const setProfile = useCallback((profile) => {
+    const profileSettings = applyProfile(profile);
+    setState(profileSettings);
+  }, []);
+
+  // Reset defaults
+  const resetToDefault = useCallback(() => {
+    setState(DEFAULT_ACCESSIBILITY_STATE);
+  }, []);
+
+  // Modal controls
+  const toggleModal = useCallback(() => {
+    setIsModalVisible(prev => !prev);
+  }, []);
+
+  const openModal = useCallback(() => {
+    setIsModalVisible(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsModalVisible(false);
+  }, []);
+
+  // Screen reader announce
+  const announce = useCallback((message, options) => {
+    NativeAccessibilityBridge.announce(message, options);
+  }, []);
+
+  const value = {
+    ...state,
+    isModalVisible,
+    isLoading,
+
+    updateSetting,
+    updateSettings,
+    setProfile,
+    resetToDefault,
+    toggleModal,
+    openModal,
+    closeModal,
+    announce,
+  };
+
+  return (
+    <AccessibilityContext.Provider value={value}>
+      {children}
+    </AccessibilityContext.Provider>
+  );
+};
+
+export default AccessibilityContext;

package/src/hooks/useDynamicColors.js

@@ -0,0 +1,32 @@
+/**
+ * useDynamicColors.js
+ * Hook to get colors that respect accessibility settings
+ */
+
+import { useMemo } from 'react';
+import { useAccessibility } from '../context/AccessibilityContext';
+import { getColors } from '../utils/Colors';
+
+export const useDynamicColors = () => {
+  const accessibilitySettings = useAccessibility();
+
+  const colors = useMemo(() => {
+    return getColors(accessibilitySettings);
+  }, [
+    accessibilitySettings.colorTheme,
+    accessibilitySettings.darkMode,
+    accessibilitySettings.highContrast,
+    accessibilitySettings.darkHighContrast,
+    accessibilitySettings.whiteHighContrast,
+    accessibilitySettings.colorInversion,
+    accessibilitySettings.greyscale,
+    accessibilitySettings.lowSaturation,
+    accessibilitySettings.highSaturation,
+    accessibilitySettings.textColor,
+    accessibilitySettings.backgroundColor,
+  ]);
+
+  return colors;
+};
+
+export default useDynamicColors;

package/src/hooks/usePageRead.js

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Tts from 'react-native-tts';
+
+export function usePageRead(textToRead) {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [currentWordIndex, setCurrentWordIndex] = useState(null);
+
+  // Memoize words
+  const words = useMemo(
+    () => textToRead.trim().split(/\s+/),
+    [textToRead]
+  );
+
+  const indexRef = useRef(0);
+
+  useEffect(() => {
+    const finishSub = Tts.addEventListener('tts-finish', () => {
+      indexRef.current += 1;
+
+      if (indexRef.current < words.length) {
+        setCurrentWordIndex(indexRef.current);
+        Tts.speak(words[indexRef.current]);
+      } else {
+        setIsSpeaking(false);
+        setCurrentWordIndex(null);
+      }
+    });
+
+    const cancelSub = Tts.addEventListener('tts-cancel', () => {
+      setIsSpeaking(false);
+    });
+
+    return () => {
+      finishSub?.remove?.();
+      cancelSub?.remove?.();
+    };
+  }, [words]);
+
+  return useMemo(() => ({
+    isSpeaking,
+    currentWordIndex,
+
+    start: async () => {
+      if (!words.length) return;
+
+      indexRef.current = 0;
+      setCurrentWordIndex(0);
+      setIsSpeaking(true);
+
+      await Tts.stop();
+      await Tts.speak(words[0]);
+    },
+
+    pause: async () => {
+      await Tts.stop();
+      setIsSpeaking(false);
+    },
+
+    resume: async () => {
+      if (indexRef.current < words.length) {
+        setIsSpeaking(true);
+        await Tts.speak(words[indexRef.current]);
+      }
+    },
+
+    stop: async () => {
+      await Tts.stop();
+      indexRef.current = 0;
+      setIsSpeaking(false);
+      setCurrentWordIndex(null);
+    },
+  }), [isSpeaking, currentWordIndex, words]);
+}
+
+export default usePageRead;