@oxyhq/services 5.17.18 → 5.18.0

package/src/ui/screens/FeedbackScreen.tsx

@@ -1,18 +1,14 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import {
     View,
     Text,
-    TextInput,
     TouchableOpacity,
-    StyleSheet,
     ActivityIndicator,
     Platform,
     KeyboardAvoidingView,
     ScrollView,
     Animated,
     StatusBar,
-    Alert,
-    Dimensions,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
@@ -23,516 +19,38 @@ import { packageInfo } from '../../constants/version';
 import { GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
-import { screenContentStyle } from '../constants/spacing';
 
-// Types for better type safety
-interface FeedbackData {
-    type: 'bug' | 'feature' | 'general' | 'support';
-    title: string;
-    description: string;
-    priority: 'low' | 'medium' | 'high' | 'critical';
-    category: string;
-    contactEmail: string;
-    systemInfo: boolean;
-}
-
-interface FeedbackState {
-    status: 'idle' | 'submitting' | 'success' | 'error';
-    message: string;
-}
-
-// Constants
-const FEEDBACK_TYPES = [
-    { id: 'bug', label: 'Bug Report', icon: 'bug', color: '#FF3B30', description: 'Report a problem or issue' },
-    { id: 'feature', label: 'Feature Request', icon: 'bulb', color: '#007AFF', description: 'Suggest a new feature' },
-    { id: 'general', label: 'General Feedback', icon: 'chatbubble', color: '#34C759', description: 'Share your thoughts' },
-    { id: 'support', label: 'Support Request', icon: 'help-circle', color: '#FF9500', description: 'Get help with something' },
-];
-
-const PRIORITY_LEVELS = [
-    { id: 'low', label: 'Low', icon: 'arrow-down', color: '#34C759' },
-    { id: 'medium', label: 'Medium', icon: 'remove', color: '#FF9500' },
-    { id: 'high', label: 'High', icon: 'arrow-up', color: '#FF3B30' },
-    { id: 'critical', label: 'Critical', icon: 'warning', color: '#FF0000' },
-];
-
-const CATEGORIES = {
-    bug: ['UI/UX', 'Performance', 'Authentication', 'File Management', 'Billing', 'Other'],
-    feature: ['User Interface', 'File Management', 'Security', 'Performance', 'Integration', 'Other'],
-    general: ['User Experience', 'Design', 'Performance', 'Documentation', 'Other'],
-    support: ['Account Issues', 'Billing', 'Technical Problems', 'Feature Questions', 'Other'],
-};
-
-// Styles factory function
-const createStyles = (colors: any, theme: string) => StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    fullBleed: {
-        width: '100%',
-        alignSelf: 'stretch',
-    },
-    scrollContent: {
-        flexGrow: 1,
-        ...screenContentStyle,
-    },
-    stepContainer: {
-        flex: 1,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-    },
-    modernHeader: {
-        alignItems: 'flex-start',
-        width: '100%',
-        marginBottom: 24,
-    },
-    modernTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 42,
-        lineHeight: 48,
-        marginBottom: 12,
-        textAlign: 'left',
-        letterSpacing: -1,
-    },
-    modernSubtitle: {
-        fontSize: 18,
-        lineHeight: 24,
-        textAlign: 'left',
-        opacity: 0.8,
-        marginBottom: 24,
-    },
-    stepTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 42,
-        lineHeight: 48,
-        marginBottom: 12,
-        textAlign: 'left',
-        letterSpacing: -1,
-    },
-    inputContainer: {
-        width: '100%',
-        marginBottom: 24,
-    },
-    premiumInputWrapper: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        height: 56,
-        borderRadius: 16,
-        paddingHorizontal: 20,
-        borderWidth: 2,
-        backgroundColor: colors.inputBackground,
-    },
-    textAreaWrapper: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        minHeight: 120,
-        borderRadius: 16,
-        paddingHorizontal: 20,
-        paddingVertical: 16,
-        borderWidth: 2,
-        backgroundColor: colors.inputBackground,
-    },
-    inputIcon: {
-        marginRight: 12,
-    },
-    inputContent: {
-        flex: 1,
-    },
-    modernLabel: {
-        fontSize: 12,
-        fontWeight: '500',
-        marginBottom: 2,
-    },
-    modernInput: {
-        flex: 1,
-        fontSize: 16,
-        height: '100%',
-    },
-    textArea: {
-        flex: 1,
-        fontSize: 16,
-        textAlignVertical: 'top',
-        minHeight: 80,
-    },
-    typeGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 12,
-        marginBottom: 24,
-    },
-    typeCard: {
-        width: (Dimensions.get('window').width - 72) / 2,
-        padding: 20,
-        borderRadius: 16,
-        borderWidth: 2,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: 120,
-    },
-    typeIcon: {
-        marginBottom: 12,
-    },
-    typeLabel: {
-        fontSize: 16,
-        fontWeight: '600',
-        textAlign: 'center',
-        marginBottom: 4,
-    },
-    typeDescription: {
-        fontSize: 12,
-        textAlign: 'center',
-        opacity: 0.8,
-    },
-    priorityContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 24,
-    },
-    priorityButton: {
-        flex: 1,
-        padding: 16,
-        borderRadius: 12,
-        borderWidth: 2,
-        alignItems: 'center',
-        marginHorizontal: 4,
-    },
-    priorityLabel: {
-        fontSize: 12,
-        fontWeight: '600',
-        marginTop: 4,
-    },
-    categoryContainer: {
-        marginBottom: 24,
-    },
-    categoryButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        borderRadius: 12,
-        borderWidth: 1,
-        marginBottom: 8,
-    },
-    categoryText: {
-        fontSize: 16,
-        marginLeft: 12,
-    },
-    checkboxContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 24,
-    },
-    checkbox: {
-        width: 24,
-        height: 24,
-        borderRadius: 6,
-        borderWidth: 2,
-        marginRight: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    checkboxText: {
-        fontSize: 16,
-        flex: 1,
-    },
-    button: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 18,
-        paddingHorizontal: 32,
-        borderRadius: 16,
-        marginVertical: 8,
-        gap: 8,
-        width: '100%',
-        ...Platform.select({
-            web: {
-                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
-            },
-            default: {
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.3,
-                shadowRadius: 8,
-                elevation: 6,
-            }
-        }),
-    },
-    buttonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-        letterSpacing: 0.5,
-    },
-    navigationButtons: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 16,
-        marginBottom: 8,
-        width: '100%',
-        gap: 8,
-    },
-    navButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 6,
-        paddingHorizontal: 12,
-        gap: 6,
-        minWidth: 70,
-        borderWidth: 1,
-        ...Platform.select({
-            web: {
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            },
-            default: {
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.1,
-                shadowRadius: 4,
-                elevation: 2,
-            }
-        }),
-    },
-    backButton: {
-        backgroundColor: 'transparent',
-        borderTopLeftRadius: 35,
-        borderBottomLeftRadius: 35,
-        borderTopRightRadius: 12,
-        borderBottomRightRadius: 12,
-    },
-    nextButton: {
-        backgroundColor: 'transparent',
-        borderTopRightRadius: 35,
-        borderBottomRightRadius: 35,
-        borderTopLeftRadius: 12,
-        borderBottomLeftRadius: 12,
-    },
-    navButtonText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    progressContainer: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginBottom: 20,
-        marginTop: 8,
-    },
-    progressDot: {
-        height: 10,
-        width: 10,
-        borderRadius: 5,
-        marginHorizontal: 6,
-        borderWidth: 2,
-        borderColor: '#fff',
-        ...Platform.select({
-            web: {
-                boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
-            },
-            default: {
-                shadowColor: colors.primary,
-                shadowOpacity: 0.08,
-                shadowOffset: { width: 0, height: 1 },
-                shadowRadius: 2,
-                elevation: 1,
-            }
-        }),
-    },
-    summaryContainer: {
-        padding: 0,
-        marginBottom: 24,
-        width: '100%',
-    },
-    summaryRow: {
-        flexDirection: 'row',
-        marginBottom: 10,
-    },
-    summaryLabel: {
-        fontSize: 15,
-        width: 90,
-    },
-    summaryValue: {
-        fontSize: 15,
-        fontWeight: '600',
-        flex: 1,
-    },
-    successContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 40,
-    },
-    successIcon: {
-        marginBottom: 24,
-    },
-    successTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        marginBottom: 12,
-        textAlign: 'center',
-    },
-    successMessage: {
-        fontSize: 16,
-        textAlign: 'center',
-        opacity: 0.8,
-        marginBottom: 24,
-    },
-});
-
-// Custom hooks for better separation of concerns
-const useFeedbackForm = () => {
-    const [feedbackData, setFeedbackData] = useState<FeedbackData>({
-        type: 'general',
-        title: '',
-        description: '',
-        priority: 'medium',
-        category: '',
-        contactEmail: '',
-        systemInfo: true,
-    });
-
-    const [feedbackState, setFeedbackState] = useState<FeedbackState>({
-        status: 'idle',
-        message: ''
-    });
-
-    const updateField = useCallback((field: keyof FeedbackData, value: any) => {
-        setFeedbackData(prev => ({ ...prev, [field]: value }));
-    }, []);
-
-    const resetForm = useCallback(() => {
-        setFeedbackData({
-            type: 'general',
-            title: '',
-            description: '',
-            priority: 'medium',
-            category: '',
-            contactEmail: '',
-            systemInfo: true,
-        });
-        setFeedbackState({ status: 'idle', message: '' });
-    }, []);
-
-    return {
-        feedbackData,
-        feedbackState,
-        setFeedbackState,
-        updateField,
-        resetForm
-    };
-};
-
-// Reusable components
-const FormInput: React.FC<{
-    icon: string;
-    label: string;
-    value: string;
-    onChangeText: (text: string) => void;
-    placeholder?: string;
-    multiline?: boolean;
-    numberOfLines?: number;
-    testID?: string;
-    colors: any;
-    styles: any;
-    borderColor?: string;
-}> = React.memo(({
-    icon,
-    label,
-    value,
-    onChangeText,
-    placeholder,
-    multiline = false,
-    numberOfLines = 1,
-    testID,
-    colors,
-    styles,
-    borderColor,
-}) => (
-    <View style={styles.inputContainer}>
-        <View style={[
-            multiline ? styles.textAreaWrapper : styles.premiumInputWrapper,
-            {
-                borderColor: borderColor || colors.border,
-                backgroundColor: colors.inputBackground,
-                shadowColor: colors.primary,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.1,
-                shadowRadius: 12,
-                elevation: 3,
-            }
-        ]}>
-            {!multiline && (
-                <Ionicons
-                    name={icon as any}
-                    size={22}
-                    color={colors.secondaryText}
-                    style={styles.inputIcon}
-                />
-            )}
-            <View style={styles.inputContent}>
-                <Text style={[styles.modernLabel, { color: colors.secondaryText }]}>
-                    {label}
-                </Text>
-                <TextInput
-                    style={[
-                        multiline ? styles.textArea : styles.modernInput,
-                        { color: colors.text }
-                    ]}
-                    value={value}
-                    onChangeText={onChangeText}
-                    placeholder={placeholder}
-                    placeholderTextColor={colors.secondaryText + '60'}
-                    multiline={multiline}
-                    numberOfLines={multiline ? numberOfLines : undefined}
-                    testID={testID}
-                />
-            </View>
-        </View>
-    </View>
-));
-
-const ProgressIndicator: React.FC<{ currentStep: number; totalSteps: number; colors: any; styles: any }> = React.memo(({ currentStep, totalSteps, colors, styles }) => (
-    <View style={styles.progressContainer}>
-        {Array.from({ length: totalSteps }, (_, index) => (
-            <View
-                key={index}
-                style={[
-                    styles.progressDot,
-                    currentStep === index ?
-                        { backgroundColor: colors.primary, width: 24 } :
-                        { backgroundColor: colors.border }
-                ]}
-            />
-        ))}
-    </View>
-));
+import {
+    FormInput,
+    ProgressIndicator,
+    useFeedbackForm,
+    createFeedbackStyles,
+    FEEDBACK_TYPES,
+    PRIORITY_LEVELS,
+    CATEGORIES,
+} from '../components/feedback';
 
-// Main component
 const FeedbackScreen: React.FC<BaseScreenProps> = ({
     navigate,
     goBack,
     onClose,
     theme,
 }) => {
-    // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
     const normalizedTheme = normalizeTheme(theme);
     const colors = useThemeColors(normalizedTheme);
     const { t } = useI18n();
 
-    // Form state
     const { feedbackData, feedbackState, setFeedbackState, updateField, resetForm } = useFeedbackForm();
 
-    // UI state
     const [currentStep, setCurrentStep] = useState(0);
     const [errorMessage, setErrorMessage] = useState('');
 
-    // Animation refs
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
 
-    // Memoized styles
-    const styles = useMemo(() => createStyles(colors, normalizedTheme), [colors, normalizedTheme]);
+    const styles = useMemo(() => createFeedbackStyles(colors as any), [colors]);
 
-    // Animation functions
     const animateTransition = useCallback((nextStep: number) => {
         Animated.timing(fadeAnim, {
             toValue: 0,
@@ -569,7 +87,6 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         }
     }, [currentStep, animateTransition]);
 
-    // Form validation helpers
     const isTypeStepValid = useCallback(() => {
         return feedbackData.type && feedbackData.category;
     }, [feedbackData.type, feedbackData.category]);
@@ -582,7 +99,6 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         return feedbackData.contactEmail.trim() || user?.email;
     }, [feedbackData.contactEmail, user?.email]);
 
-    // Submit feedback handler
     const handleSubmitFeedback = useCallback(async () => {
         if (!isTypeStepValid() || !isDetailsStepValid() || !isContactStepValid()) {
             toast.error(t('feedback.toasts.fillRequired') || 'Please fill in all required fields');
@@ -593,7 +109,6 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
             setFeedbackState({ status: 'submitting', message: '' });
             setErrorMessage('');
 
-            // Prepare feedback data
             const feedbackPayload = {
                 type: feedbackData.type,
                 title: feedbackData.title,
@@ -611,15 +126,11 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 } : undefined,
             };
 
-            // TODO: Implement actual API integration
-            // Replace setTimeout simulation with actual API call: await oxyServices.submitFeedback(feedbackPayload)
-            // Currently simulates API call with setTimeout for development/testing purposes
-            await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
+            await oxyServices.submitFeedback(feedbackPayload);
 
             setFeedbackState({ status: 'success', message: t('feedback.toasts.submitSuccess') || 'Feedback submitted successfully!' });
             toast.success(t('feedback.toasts.thanks') || 'Thank you for your feedback!');
 
-            // Reset form after success
             setTimeout(() => {
                 resetForm();
                 setCurrentStep(0);
@@ -629,24 +140,22 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
             setFeedbackState({ status: 'error', message: error.message || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback') });
             toast.error(error.message || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback'));
         }
-    }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm]);
+    }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
 
-    // Step components
-    // Memoized grouped section items
     const feedbackTypeItems = useMemo(() => FEEDBACK_TYPES.map(type => ({
         id: type.id,
         icon: type.icon,
         iconColor: type.color,
         title: type.label,
         subtitle: type.description,
-        onPress: () => { updateField('type', type.id); updateField('category', ''); },
+        onPress: () => { updateField('type', type.id as any); updateField('category', ''); },
         selected: feedbackData.type === type.id,
         showChevron: false,
         multiRow: true,
         dense: true,
     })), [feedbackData.type, updateField]);
 
-    const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type as keyof typeof CATEGORIES] || []).map(cat => ({
+    const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
         id: cat,
         icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
         iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
@@ -662,17 +171,14 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         icon: p.icon,
         iconColor: p.color,
         title: p.label,
-        onPress: () => updateField('priority', p.id),
+        onPress: () => updateField('priority', p.id as any),
         selected: feedbackData.priority === p.id,
         showChevron: false,
         dense: true,
     })), [feedbackData.priority, updateField]);
 
-    const renderTypeStep = useCallback(() => (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
+    const renderTypeStep = () => (
+        <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.modernHeader}>
                 <Text style={[styles.stepTitle, { color: colors.text }]}>
                     {t('feedback.type.title') || 'What type of feedback?'}
@@ -687,7 +193,9 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             {feedbackData.type && (
                 <View style={styles.categoryContainer}>
-                    <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>{t('feedback.category.label') || 'Category'}</Text>
+                    <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>
+                        {t('feedback.category.label') || 'Category'}
+                    </Text>
                     <View style={styles.fullBleed}>
                         <GroupedSection items={categoryItems} />
                     </View>
@@ -696,46 +204,31 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             <View style={styles.navigationButtons}>
                 <TouchableOpacity
-                    style={[styles.navButton, {
-                        backgroundColor: 'transparent',
-                        borderColor: colors.border,
-                        shadowColor: colors.border,
-                        borderTopLeftRadius: 35,
-                        borderBottomLeftRadius: 35,
-                        borderTopRightRadius: 35,
-                        borderBottomRightRadius: 35,
-                    }]}
+                    style={[styles.navButton, { backgroundColor: 'transparent', borderColor: colors.border, borderRadius: 35 }]}
                     onPress={goBack}
+                    accessibilityRole="button"
+                    accessibilityLabel="Go back"
                 >
                     <Ionicons name="arrow-back" size={16} color={colors.text} />
                     <Text style={[styles.navButtonText, { color: colors.text }]}>{t('common.actions.back') || 'Back'}</Text>
                 </TouchableOpacity>
 
                 <TouchableOpacity
-                    style={[styles.navButton, {
-                        backgroundColor: colors.primary,
-                        borderColor: colors.primary,
-                        shadowColor: colors.primary,
-                        borderTopLeftRadius: 35,
-                        borderBottomLeftRadius: 35,
-                        borderTopRightRadius: 35,
-                        borderBottomRightRadius: 35,
-                    }]}
+                    style={[styles.navButton, { backgroundColor: colors.primary, borderColor: colors.primary, borderRadius: 35 }]}
                     onPress={nextStep}
                     disabled={!isTypeStepValid()}
+                    accessibilityRole="button"
+                    accessibilityLabel="Continue to next step"
                 >
                     <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>{t('common.actions.next') || 'Next'}</Text>
                     <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    ), [fadeAnim, slideAnim, colors, feedbackData, feedbackTypeItems, categoryItems, updateField, goBack, nextStep, isTypeStepValid, styles, theme]);
+    );
 
-    const renderDetailsStep = useCallback(() => (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
+    const renderDetailsStep = () => (
+        <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.modernHeader}>
                 <Text style={[styles.stepTitle, { color: colors.text }]}>
                     {t('feedback.details.title') || 'Tell us more'}
@@ -749,34 +242,34 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 icon="create-outline"
                 label={t('feedback.fields.title.label') || 'Title'}
                 value={feedbackData.title}
-                onChangeText={(text) => {
-                    updateField('title', text);
-                    setErrorMessage('');
-                }}
+                onChangeText={(text) => { updateField('title', text); setErrorMessage(''); }}
                 placeholder={t('feedback.fields.title.placeholder') || 'Brief summary of your feedback'}
                 testID="feedback-title-input"
-                colors={colors}
+                colors={colors as any}
                 styles={styles}
+                accessibilityLabel="Feedback title"
+                accessibilityHint="Enter a brief summary of your feedback"
             />
 
             <FormInput
                 icon="document-text-outline"
                 label={t('feedback.fields.description.label') || 'Description'}
                 value={feedbackData.description}
-                onChangeText={(text) => {
-                    updateField('description', text);
-                    setErrorMessage('');
-                }}
+                onChangeText={(text) => { updateField('description', text); setErrorMessage(''); }}
                 placeholder={t('feedback.fields.description.placeholder') || 'Please provide detailed information...'}
                 multiline={true}
                 numberOfLines={6}
                 testID="feedback-description-input"
-                colors={colors}
+                colors={colors as any}
                 styles={styles}
+                accessibilityLabel="Feedback description"
+                accessibilityHint="Provide detailed information about your feedback"
             />
 
             <View style={{ marginBottom: 24 }}>
-                <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>{t('feedback.priority.label') || 'Priority Level'}</Text>
+                <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>
+                    {t('feedback.priority.label') || 'Priority Level'}
+                </Text>
                 <View style={styles.fullBleed}>
                     <GroupedSection items={priorityItems} />
                 </View>
@@ -784,37 +277,31 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             <View style={styles.navigationButtons}>
                 <TouchableOpacity
-                    style={[styles.navButton, styles.backButton, {
-                        borderColor: colors.border,
-                        shadowColor: colors.border,
-                    }]}
+                    style={[styles.navButton, styles.backButton, { borderColor: colors.border }]}
                     onPress={prevStep}
+                    accessibilityRole="button"
+                    accessibilityLabel="Go back"
                 >
                     <Ionicons name="arrow-back" size={16} color={colors.text} />
                     <Text style={[styles.navButtonText, { color: colors.text }]}>{t('common.actions.back') || 'Back'}</Text>
                 </TouchableOpacity>
 
                 <TouchableOpacity
-                    style={[styles.navButton, styles.nextButton, {
-                        backgroundColor: colors.primary,
-                        borderColor: colors.primary,
-                        shadowColor: colors.primary,
-                    }]}
+                    style={[styles.navButton, styles.nextButton, { backgroundColor: colors.primary, borderColor: colors.primary }]}
                     onPress={nextStep}
                     disabled={!isDetailsStepValid()}
+                    accessibilityRole="button"
+                    accessibilityLabel="Continue to next step"
                 >
                     <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>{t('common.actions.next') || 'Next'}</Text>
                     <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    ), [fadeAnim, slideAnim, colors, feedbackData, updateField, setErrorMessage, prevStep, nextStep, isDetailsStepValid, styles, priorityItems, theme]);
+    );
 
-    const renderContactStep = useCallback(() => (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
+    const renderContactStep = () => (
+        <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.modernHeader}>
                 <Text style={[styles.stepTitle, { color: colors.text }]}>
                     {t('feedback.contact.title') || 'Contact Information'}
@@ -828,14 +315,13 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 icon="mail-outline"
                 label={t('feedback.fields.email.label') || 'Email Address'}
                 value={feedbackData.contactEmail}
-                onChangeText={(text) => {
-                    updateField('contactEmail', text);
-                    setErrorMessage('');
-                }}
+                onChangeText={(text) => { updateField('contactEmail', text); setErrorMessage(''); }}
                 placeholder={user?.email || (t('feedback.fields.email.placeholder') || 'Enter your email address')}
                 testID="feedback-email-input"
-                colors={colors}
+                colors={colors as any}
                 styles={styles}
+                accessibilityLabel="Email address"
+                accessibilityHint="Enter your email so we can respond"
             />
 
             <View style={styles.checkboxContainer}>
@@ -848,10 +334,11 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                         }
                     ]}
                     onPress={() => updateField('systemInfo', !feedbackData.systemInfo)}
+                    accessibilityRole="checkbox"
+                    accessibilityState={{ checked: feedbackData.systemInfo }}
+                    accessibilityLabel="Include system information"
                 >
-                    {feedbackData.systemInfo && (
-                        <Ionicons name="checkmark" size={16} color="#FFFFFF" />
-                    )}
+                    {feedbackData.systemInfo && <Ionicons name="checkmark" size={16} color="#FFFFFF" />}
                 </TouchableOpacity>
                 <Text style={[styles.checkboxText, { color: colors.text }]}>
                     {t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue'}
@@ -860,37 +347,31 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             <View style={styles.navigationButtons}>
                 <TouchableOpacity
-                    style={[styles.navButton, styles.backButton, {
-                        borderColor: colors.border,
-                        shadowColor: colors.border,
-                    }]}
+                    style={[styles.navButton, styles.backButton, { borderColor: colors.border }]}
                     onPress={prevStep}
+                    accessibilityRole="button"
+                    accessibilityLabel="Go back"
                 >
                     <Ionicons name="arrow-back" size={16} color={colors.text} />
                     <Text style={[styles.navButtonText, { color: colors.text }]}>Back</Text>
                 </TouchableOpacity>
 
                 <TouchableOpacity
-                    style={[styles.navButton, styles.nextButton, {
-                        backgroundColor: colors.primary,
-                        borderColor: colors.primary,
-                        shadowColor: colors.primary,
-                    }]}
+                    style={[styles.navButton, styles.nextButton, { backgroundColor: colors.primary, borderColor: colors.primary }]}
                     onPress={nextStep}
                     disabled={!isContactStepValid()}
+                    accessibilityRole="button"
+                    accessibilityLabel="Continue to summary"
                 >
                     <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>Next</Text>
                     <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    ), [fadeAnim, slideAnim, colors, feedbackData, user, updateField, setErrorMessage, prevStep, nextStep, isContactStepValid, styles]);
+    );
 
-    const renderSummaryStep = useCallback(() => (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
+    const renderSummaryStep = () => (
+        <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.modernHeader}>
                 <Text style={[styles.stepTitle, { color: colors.text }]}>
                     {t('feedback.summary.title') || 'Summary'}
@@ -902,31 +383,27 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             <View style={styles.summaryContainer}>
                 <View style={styles.summaryRow}>
-                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>{t('feedback.summary.type') || 'Type:'}</Text>
+                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Type:</Text>
                     <Text style={[styles.summaryValue, { color: colors.text }]}>
                         {FEEDBACK_TYPES.find(t => t.id === feedbackData.type)?.label}
                     </Text>
                 </View>
-
                 <View style={styles.summaryRow}>
-                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>{t('feedback.summary.category') || 'Category:'}</Text>
+                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Category:</Text>
                     <Text style={[styles.summaryValue, { color: colors.text }]}>{feedbackData.category}</Text>
                 </View>
-
                 <View style={styles.summaryRow}>
-                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>{t('feedback.summary.priority') || 'Priority:'}</Text>
+                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Priority:</Text>
                     <Text style={[styles.summaryValue, { color: colors.text }]}>
                         {PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label}
                     </Text>
                 </View>
-
                 <View style={styles.summaryRow}>
-                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>{t('feedback.summary.titleLabel') || 'Title:'}</Text>
+                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Title:</Text>
                     <Text style={[styles.summaryValue, { color: colors.text }]}>{feedbackData.title}</Text>
                 </View>
-
                 <View style={styles.summaryRow}>
-                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>{t('feedback.summary.contact') || 'Contact:'}</Text>
+                    <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Contact:</Text>
                     <Text style={[styles.summaryValue, { color: colors.text }]}>
                         {feedbackData.contactEmail || user?.email}
                     </Text>
@@ -938,6 +415,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 onPress={handleSubmitFeedback}
                 disabled={feedbackState.status === 'submitting'}
                 testID="submit-feedback-button"
+                accessibilityRole="button"
+                accessibilityLabel="Submit feedback"
             >
                 {feedbackState.status === 'submitting' ? (
                     <ActivityIndicator color="#FFFFFF" size="small" />
@@ -951,32 +430,23 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
             <View style={styles.navigationButtons}>
                 <TouchableOpacity
-                    style={[styles.navButton, {
-                        backgroundColor: 'transparent',
-                        borderColor: colors.border,
-                        shadowColor: colors.border,
-                        borderTopLeftRadius: 35,
-                        borderBottomLeftRadius: 35,
-                        borderTopRightRadius: 35,
-                        borderBottomRightRadius: 35,
-                    }]}
+                    style={[styles.navButton, { backgroundColor: 'transparent', borderColor: colors.border, borderRadius: 35 }]}
                     onPress={prevStep}
+                    accessibilityRole="button"
+                    accessibilityLabel="Go back"
                 >
                     <Ionicons name="arrow-back" size={16} color={colors.text} />
                     <Text style={[styles.navButtonText, { color: colors.text }]}>{t('common.actions.back') || 'Back'}</Text>
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    ), [fadeAnim, slideAnim, colors, feedbackData, user, feedbackState.status, handleSubmitFeedback, prevStep, styles]);
+    );
 
-    const renderSuccessStep = useCallback(() => (
-        <Animated.View style={[
-            styles.stepContainer,
-            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
-        ]}>
+    const renderSuccessStep = () => (
+        <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.successContainer}>
-                <View style={[styles.successIcon, { backgroundColor: colors.success + '20', padding: 24, borderRadius: 50 }]}>
-                    <Ionicons name="checkmark-circle" size={48} color={colors.success} />
+                <View style={[styles.successIcon, { backgroundColor: (colors.success || '#34C759') + '20', padding: 24, borderRadius: 50 }]}>
+                    <Ionicons name="checkmark-circle" size={48} color={colors.success || '#34C759'} />
                 </View>
                 <Text style={[styles.successTitle, { color: colors.text }]}>
                     {t('feedback.success.thanks') || 'Thank You!'}
@@ -986,23 +456,18 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </Text>
                 <TouchableOpacity
                     style={[styles.button, { backgroundColor: colors.primary }]}
-                    onPress={() => {
-                        resetForm();
-                        setCurrentStep(0);
-                    }}
+                    onPress={() => { resetForm(); setCurrentStep(0); }}
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit another feedback"
                 >
                     <Text style={styles.buttonText}>{t('feedback.actions.submitAnother') || 'Submit Another'}</Text>
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    ), [fadeAnim, slideAnim, colors, resetForm, styles]);
-
-    // Render current step
-    const renderCurrentStep = useCallback(() => {
-        if (feedbackState.status === 'success') {
-            return renderSuccessStep();
-        }
+    );
 
+    const renderCurrentStep = () => {
+        if (feedbackState.status === 'success') return renderSuccessStep();
         switch (currentStep) {
             case 0: return renderTypeStep();
             case 1: return renderDetailsStep();
@@ -1010,7 +475,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
             case 3: return renderSummaryStep();
             default: return renderTypeStep();
         }
-    }, [currentStep, feedbackState.status, renderTypeStep, renderDetailsStep, renderContactStep, renderSummaryStep, renderSuccessStep]);
+    };
 
     return (
         <KeyboardAvoidingView
@@ -1028,7 +493,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 keyboardShouldPersistTaps="handled"
             >
                 {feedbackState.status !== 'success' && (
-                    <ProgressIndicator currentStep={currentStep} totalSteps={4} colors={colors} styles={styles} />
+                    <ProgressIndicator currentStep={currentStep} totalSteps={4} colors={colors as any} styles={styles} />
                 )}
                 {renderCurrentStep()}
             </ScrollView>
@@ -1036,4 +501,4 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     );
 };
 
-export default FeedbackScreen; 
+export default FeedbackScreen;