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

package/src/utils/AccessibilityUtils.js

@@ -0,0 +1,223 @@
+// Accessibility utility functions and constants
+
+export const ACCESSIBILITY_PROFILES = {
+  NONE: 'none',
+  BLIND: 'blind',
+  DYSLEXIA: 'dyslexia',
+  LOW_VISION: 'low_vision',
+  COGNITIVE: 'cognitive',
+  EPILEPSY_SAFE: 'epilepsy_safe',
+  ADHD_FOCUS: 'adhd_focus',
+};
+
+export const COLOR_THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+  HIGH_CONTRAST: 'high_contrast',
+  SEPIA: 'sepia',
+};
+
+export const TEXT_ALIGNMENT = {
+  LEFT: 'left',
+  CENTER: 'center',
+  RIGHT: 'right',
+  JUSTIFY: 'justify',
+};
+
+// Default accessibility state
+export const DEFAULT_ACCESSIBILITY_STATE = {
+  // Font & Text
+  fontScale: 1.0,
+  lineHeight: 1.5,
+  letterSpacing: 0,
+  textAlignment: TEXT_ALIGNMENT.LEFT,
+  
+  // Colors & Display
+  highContrast: false,
+  whiteHighContrast: false,
+  darkHighContrast: false,
+  colorInversion: false,
+  greyscale: false,
+  lowSaturation: false,
+  highSaturation: false,
+  colorTheme: COLOR_THEMES.LIGHT,
+  accentColor: '#007AFF',
+  textColor: null,
+  backgroundColor: null,
+  
+  // Visual Aids
+  hideImages: false,
+  enlargeButtons: false,
+  reducedMotion: false,
+  highlightLinks: false,
+  
+  // Reading Assistance
+  readingMask: false,
+  readingLine: false,
+  textMagnifier: false,
+  textToSpeech: false,
+  dictionary: false,
+
+  // Accessibility Features
+  screenReader: false,
+  
+  // Native Settings (from system)
+  nativeScreenReader: false,
+  nativeReducedMotion: false,
+  nativeBoldText: false,
+  nativeGrayscale: false,
+  nativeInvertColors: false,
+  nativeReduceTransparency: false,
+  
+  // Active Profile
+  activeProfile: ACCESSIBILITY_PROFILES.NONE,
+};
+
+// Profile configurations with detailed feature sets
+export const PROFILE_CONFIGS = {
+  [ACCESSIBILITY_PROFILES.BLIND]: {
+    textToSpeech: true,
+    screenReader: true,
+    highContrast: true,
+    colorTheme: COLOR_THEMES.HIGH_CONTRAST,
+    hideImages: true,
+    fontScale: 1.2,
+    reducedMotion: true,
+    enlargeButtons: true,
+    highlightLinks: true,
+    dictionary: true,
+  },
+  
+  [ACCESSIBILITY_PROFILES.DYSLEXIA]: {
+    fontScale: 1.5,
+    lineHeight: 2.4,
+    letterSpacing: 0.5,
+    highlightLinks: true,
+    enlargeButtons: true,
+    colorTheme: COLOR_THEMES.LIGHT,
+    textAlignment: TEXT_ALIGNMENT.LEFT,
+    readingLine: true,
+  },
+  
+  [ACCESSIBILITY_PROFILES.LOW_VISION]: {
+    fontScale: 2.0,
+    highContrast: true,
+    whiteHighContrast: true,
+    colorTheme: COLOR_THEMES.HIGH_CONTRAST,
+    enlargeButtons: true,
+    textMagnifier: true,
+    lineHeight: 2.2,
+    letterSpacing: 0.6,
+    highlightLinks: true,
+    dictionary: true,
+  },
+  
+  [ACCESSIBILITY_PROFILES.COGNITIVE]: {
+    readingLine: true,
+    readingMask: false,
+    dictionary: true,
+    reducedMotion: true,
+    highlightLinks: true,
+    fontScale: 1.3,
+    lineHeight: 2.0,
+    letterSpacing: 0.3,
+    colorTheme: COLOR_THEMES.LIGHT,
+    enlargeButtons: true,
+  },
+  
+  [ACCESSIBILITY_PROFILES.EPILEPSY_SAFE]: {
+    reducedMotion: true,
+    colorTheme: COLOR_THEMES.DARK,
+    lowSaturation: true,
+    greyscale: false,
+    hideImages: false,
+    fontScale: 1.1,
+    highlightLinks: true,
+  },
+  
+  [ACCESSIBILITY_PROFILES.ADHD_FOCUS]: {
+    readingMask: true,
+    readingLine: true,
+    hideImages: true,
+    reducedMotion: true,
+    fontScale: 1.3,
+    lineHeight: 2.0,
+    highlightLinks: true,
+    enlargeButtons: true,
+    colorTheme: COLOR_THEMES.LIGHT,
+  },
+};
+
+// Apply profile settings
+export const applyProfile = (profile) => {
+  if (profile === ACCESSIBILITY_PROFILES.NONE) {
+    return DEFAULT_ACCESSIBILITY_STATE;
+  }
+  
+  const profileConfig = PROFILE_CONFIGS[profile];
+  return {
+    ...DEFAULT_ACCESSIBILITY_STATE,
+    ...profileConfig,
+    activeProfile: profile,
+  };
+};
+
+// Color theme values
+export const COLOR_THEME_VALUES = {
+  [COLOR_THEMES.LIGHT]: {
+    background: '#FFFFFF',
+    text: '#000000',
+    primary: '#007AFF',
+    secondary: '#5856D6',
+    border: '#C7C7CC',
+  },
+  [COLOR_THEMES.DARK]: {
+    background: '#000000',
+    text: '#FFFFFF',
+    primary: '#0A84FF',
+    secondary: '#5E5CE6',
+    border: '#38383A',
+  },
+  [COLOR_THEMES.HIGH_CONTRAST]: {
+    background: '#000000',
+    text: '#FFFF00',
+    primary: '#FFFFFF',
+    secondary: '#00FF00',
+    border: '#FFFFFF',
+  },
+  [COLOR_THEMES.SEPIA]: {
+    background: '#F4ECD8',
+    text: '#5C4B37',
+    primary: '#8B4513',
+    secondary: '#A0522D',
+    border: '#D2B48C',
+  },
+};
+
+// Calculate adjusted font size
+export const getAdjustedFontSize = (baseFontSize, fontScale) => {
+  return baseFontSize * fontScale;
+};
+
+// Calculate adjusted line height
+export const getAdjustedLineHeight = (baseFontSize, lineHeightMultiplier, fontScale) => {
+  return baseFontSize * fontScale * lineHeightMultiplier;
+};
+
+// Get button padding adjustment
+export const getButtonPadding = (baseSize, enlargeButtons) => {
+  return enlargeButtons ? baseSize * 1.5 : baseSize;
+};
+
+// Minimum touch target size (48dp)
+export const MIN_TOUCH_TARGET = 48;
+
+// Apply color inversion filter
+export const applyColorInversion = (enabled) => {
+  return enabled ? 'invert(100%)' : 'none';
+};
+
+// Apply greyscale filter
+export const applyGreyscale = (enabled) => {
+  return enabled ? 'grayscale(100%)' : 'none';
+};

package/src/utils/Colors.js

@@ -0,0 +1,203 @@
+/**
+ * Colors.js
+ * Dynamic color provider for accessibility plugin
+ */
+
+// Base color definitions
+const BASE_COLORS = {
+    primaryButtonColor: '#8B63FF',
+    secondaryButtonColor: '#FF974F',
+    primaryTextColor: '#2D3142',
+    primaryInactive: '#9c9eb9',
+    textInputBorder: '#d6d9e0',
+    successColor: '#4fab53',
+    placeholderTextColor: "#A9B2C2",
+    modalBackground: 'rgba(0, 0, 0, 0.5)',
+    red: "#ff3b30",
+    defaultBackground: '#FFFFFF',
+    boxBackground: '#F4F6FA', 
+    lightBlue: '#E4DFFF',
+};
+
+// 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(Math.max(0, Math.min(255, x))).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+};
+
+// Helper to determine if a color is light or dark
+const isLightColor = (hex) => {
+    if (hex.startsWith('rgba')) return true;
+    const rgb = hexToRgb(hex);
+    if (!rgb) return true;
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5;
+};
+
+// Apply grayscale to a color
+const applyGrayscale = (hex) => {
+    if (hex.startsWith('rgba')) return 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) => {
+    if (hex.startsWith('rgba')) return hex;
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+    
+    const gray = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
+    const r = gray + factor * (rgb.r - gray);
+    const g = gray + factor * (rgb.g - gray);
+    const b = gray + factor * (rgb.b - gray);
+    
+    return rgbToHex(r, g, b);
+};
+
+// Invert a color
+const invertColor = (hex) => {
+    if (hex.startsWith('rgba')) return hex;
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+    return rgbToHex(255 - rgb.r, 255 - rgb.g, 255 - rgb.b);
+};
+
+// Process colors based on accessibility settings
+const processColors = (colors, settings) => {
+    if (!settings) return colors;
+
+    let processed = { ...colors };
+
+    // Apply grayscale
+    if (settings.greyscale) {
+        processed = Object.keys(processed).reduce((acc, key) => {
+            acc[key] = applyGrayscale(processed[key]);
+            return acc;
+        }, {});
+    }
+
+    // Apply saturation adjustments
+    if (settings.lowSaturation && !settings.greyscale) {
+        processed = Object.keys(processed).reduce((acc, key) => {
+            if (key !== 'modalBackground') {
+                acc[key] = applySaturation(processed[key], 0.3);
+            } else {
+                acc[key] = processed[key];
+            }
+            return acc;
+        }, {});
+    }
+
+    if (settings.highSaturation && !settings.greyscale && !settings.lowSaturation) {
+        processed = Object.keys(processed).reduce((acc, key) => {
+            if (key !== 'modalBackground') {
+                acc[key] = applySaturation(processed[key], 2.0);
+            } else {
+                acc[key] = processed[key];
+            }
+            return acc;
+        }, {});
+    }
+
+    // Apply color inversion
+    if (settings.colorInversion) {
+        processed = Object.keys(processed).reduce((acc, key) => {
+            if (key !== 'modalBackground') {
+                acc[key] = invertColor(processed[key]);
+            } else {
+                acc[key] = processed[key];
+            }
+            return acc;
+        }, {});
+    }
+
+    return processed;
+};
+
+// Get colors with accessibility transformations applied
+export const getColors = (accessibilitySettings) => {
+    const settings = accessibilitySettings || {};
+    
+    // Apply dark mode first
+    let colors = { ...BASE_COLORS };
+    if (settings.colorTheme === 'dark' || settings.darkMode) {
+        colors = {
+            ...colors,
+            primaryTextColor: '#FFFFFF',
+            defaultBackground: '#1E1E1E',
+            boxBackground: '#2C2C2E',
+            textInputBorder: '#3A3A3C',
+            placeholderTextColor: '#8E8E93',
+            primaryInactive: '#6E6E73',
+        };
+    }
+
+    // Apply high contrast
+    if (settings.highContrast) {
+        if (settings.colorTheme === 'dark' || settings.darkMode) {
+            if (settings.darkHighContrast) {
+                colors = {
+                    ...colors,
+                    defaultBackground: '#000000',
+                    primaryTextColor: '#FFFFFF',
+                    boxBackground: '#1A1A1A',
+                    primaryButtonColor: '#FFFFFF',
+                    secondaryButtonColor: '#FFFF00',
+                    textInputBorder: '#FFFFFF',
+                };
+            }
+        } else {
+            if (settings.whiteHighContrast) {
+                colors = {
+                    ...colors,
+                    defaultBackground: '#FFFFFF',
+                    primaryTextColor: '#000000',
+                    boxBackground: '#F5F5F5',
+                    primaryButtonColor: '#0000FF',
+                    secondaryButtonColor: '#000080',
+                    textInputBorder: '#000000',
+                };
+            }
+        }
+    }
+
+    // Apply color filters
+    const processedColors = processColors(colors, settings);
+    
+    // Apply custom text and background color overrides
+    if (settings.textColor) {
+        processedColors.primaryTextColor = settings.textColor;
+        processedColors.buttonTextColor = settings.textColor;
+    } else {
+        processedColors.buttonTextColor = processedColors.boxBackground;
+    }
+    
+    if (settings.backgroundColor) {
+        processedColors.defaultBackground = settings.backgroundColor;
+        if (!settings.textColor) {
+            const isLight = isLightColor(settings.backgroundColor);
+            processedColors.buttonTextColor = isLight ? '#000000' : '#FFFFFF';
+        }
+    }
+    
+    return processedColors;
+};
+
+export default BASE_COLORS;

package/src/utils/Fonts.js

@@ -0,0 +1,24 @@
+import { StyleSheet, Platform } from 'react-native';
+
+/**
+ * Default font styles for accessibility plugin
+ * Users can override these by providing custom fonts in their app
+ */
+export default StyleSheet.create({
+    Regular: {
+        fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif',
+        fontWeight: '400',
+    },
+    Medium: {
+        fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif-medium',
+        fontWeight: '500',
+    },
+    SemiBold: {
+        fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif',
+        fontWeight: '600',
+    },
+    Bold: {
+        fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif',
+        fontWeight: '700',
+    },
+});