feat: improve accessibility across app components and screens

src/components/AchievementGrid.tsx

@@ -86,7 +86,7 @@ function AchievementTile({ achievement }: { achievement: Achievement }) {
         opacity,
       }}
     >
-      <Text style={{ fontSize: 24 }}>{achievement.icon}</Text>
+      <Text accessible={true} accessibilityRole="image" accessibilityLabel={`${achievement.title} icon`} style={{ fontSize: 24 }}>{achievement.icon}</Text>
       <Text
         style={{
           color: colors.text,

src/components/EarningsSummary.tsx

@@ -83,7 +83,7 @@ export default function EarningsSummary({ activities }: EarningsSummaryProps) {
                 marginBottom: spacing.xs,
               }}
             >
-              <Text style={{ fontSize: 14, width: 24 }}>{item.icon}</Text>
+              <Text accessible={true} accessibilityRole="image" accessibilityLabel={`${item.label} icon`} style={{ fontSize: 14, width: 24 }}>{item.icon}</Text>
               <Text
                 style={{
                   color: colors.text,

src/components/EmptyState.tsx

@@ -21,7 +21,7 @@ export default function EmptyState({
         marginTop: spacing.xl * 2,
       }}
     >
-      <Text style={{ fontSize: 64 }}>{icon}</Text>
+      <Text accessible={true} accessibilityRole="image" accessibilityLabel="Empty state icon" style={{ fontSize: 64 }}>{icon}</Text>
       <Text
         style={{
           color: colors.text,

src/components/ErrorBoundary.tsx

@@ -30,6 +30,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       }
       return (
         <View
+          accessibilityLiveRegion="polite"
           style={{
             flex: 1,
             backgroundColor: colors.background,
@@ -38,7 +39,7 @@ export default class ErrorBoundary extends Component<Props, State> {
             padding: spacing.lg,
           }}
         >
-          <Text style={{ fontSize: 48 }}>⚠️</Text>
+          <Text accessible={true} accessibilityRole="image" accessibilityLabel="Warning icon" style={{ fontSize: 48 }}>⚠️</Text>
           <Text
             style={{
               color: colors.text,
@@ -59,6 +60,8 @@ export default class ErrorBoundary extends Component<Props, State> {
             {this.state.error?.message || 'An unexpected error occurred'}
           </Text>
           <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel="Try Again"
             onPress={this.handleRetry}
             style={{
               marginTop: spacing.lg,

src/components/ImpactStats.tsx

@@ -39,7 +39,7 @@ function StatItem({
 }) {
   return (
     <View style={{ alignItems: 'center' }}>
-      <Text style={{ fontSize: 24 }}>{icon}</Text>
+      <Text accessible={true} accessibilityRole="image" accessibilityLabel={`${label} icon`} style={{ fontSize: 24 }}>{icon}</Text>
       <Text
         style={{
           color: colors.text,

src/components/LoadingSkeleton.tsx

@@ -44,6 +44,9 @@ export default function Skeleton({
 
   return (
     <Animated.View
+      accessible={true}
+      accessibilityLabel="Loading..."
+      accessibilityLiveRegion="polite"
       style={[
         {
           width,

src/components/OfflineBanner.tsx

@@ -12,6 +12,7 @@ export default function OfflineBanner() {
 
   return (
     <View
+      accessibilityLiveRegion="polite"
       style={{
         backgroundColor: colors.warning,
         padding: 8,

src/components/PendingProofsBanner.tsx

@@ -37,8 +37,9 @@ export default function PendingProofsBanner({
         alignItems: 'center',
         marginTop: spacing.md,
       }}
+      accessibilityLiveRegion="polite"
     >
-      <Text style={{ fontSize: 20, marginRight: spacing.sm }}>📤</Text>
+      <Text style={{ fontSize: 20, marginRight: spacing.sm }} accessible={true} accessibilityLabel="Outbox">📤</Text>
       <View style={{ flex: 1 }}>
         <Text style={{ color: '#000', fontWeight: '600', fontSize: 13 }}>
           {count} proof{count === 1 ? '' : 's'} waiting to sync
@@ -48,6 +49,8 @@ export default function PendingProofsBanner({
       <TouchableOpacity
         onPress={onRetry}
         disabled={!canRetry}
+        accessibilityRole="button"
+        accessibilityLabel="Retry syncing proofs"
         style={{
           paddingHorizontal: spacing.md,
           paddingVertical: spacing.sm,

src/components/RewardBadge.tsx

@@ -52,7 +52,7 @@ export default function RewardBadge({
         alignSelf: 'flex-start',
       }}
     >
-      <Text style={{ fontSize: s.icon, marginRight: s.badge / 4 }}>
+      <Text style={{ fontSize: s.icon, marginRight: s.badge / 4 }} accessible={true} accessibilityLabel={tier.label}>
         {tier.emoji}
       </Text>
       <Text

src/components/StreakCard.tsx

@@ -34,7 +34,7 @@ export default function StreakCard({ streak, bestStreak }: StreakCardProps) {
           marginRight: spacing.md,
         }}
       >
-        <Text style={{ fontSize: 28 }}>{streak > 0 ? '🔥' : '🧊'}</Text>
+        <Text style={{ fontSize: 28 }} accessible={true} accessibilityLabel={streak > 0 ? 'Fire' : 'Ice'}>{streak > 0 ? '🔥' : '🧊'}</Text>
       </View>
 
       <View style={{ flex: 1 }}>

src/components/TabBarIcon.tsx

@@ -20,6 +20,8 @@ export default function TabBarIcon({
         fontSize: size,
         opacity: focused ? 1 : 0.5,
       }}
+      accessible={true}
+      accessibilityLabel="Tab icon"
     >
       {emoji}
     </Text>

src/components/TaskCard.tsx

@@ -41,6 +41,9 @@ export default function TaskCard({
   return (
     <TouchableOpacity
       onPress={() => onPress(id)}
+      accessibilityRole="button"
+      accessibilityLabel={`Task: ${title}`}
+      accessibilityHint="Navigates to task details"
       style={{
         backgroundColor: colors.surface,
         borderRadius: 12,
@@ -52,7 +55,7 @@ export default function TaskCard({
         borderColor: colors.border,
       }}
     >
-      <Text style={{ fontSize: 32, marginRight: spacing.md }}>
+      <Text style={{ fontSize: 32, marginRight: spacing.md }} accessible={true} accessibilityLabel="Task icon">
         {TASK_TYPE_CONFIG[type]?.icon || '📍'}
       </Text>
       <View style={{ flex: 1 }}>

src/components/TransactionHistory.tsx

@@ -60,7 +60,7 @@ export default function TransactionHistory({
 
   if (loading) {
     return (
-      <View style={{ marginTop: spacing.xl }}>
+      <View style={{ marginTop: spacing.xl }} accessibilityLiveRegion="polite">
         <Skeleton
           height={18}
           width="40%"
@@ -80,20 +80,18 @@ export default function TransactionHistory({
 
   if (error) {
     return (
-      <View style={{ marginTop: spacing.xl, alignItems: 'center' }}>
+      <View style={{ marginTop: spacing.xl, alignItems: 'center' }} accessibilityLiveRegion="polite">
         <Text style={{ color: colors.error, fontSize: 13 }}>{error}</Text>
-        <TouchableOpacity
-          onPress={() => void loadPayments()}
-          accessibilityRole="button"
-          style={{
-            marginTop: spacing.xs,
-            paddingVertical: spacing.sm,
-            paddingHorizontal: spacing.md,
-            minHeight: 44,
-            justifyContent: 'center',
-          }}
-        >
-          <Text style={{ color: colors.primary, fontSize: 13 }}>Retry</Text>
+        <TouchableOpacity onPress={loadPayments} accessibilityRole="button" accessibilityLabel="Retry loading transaction history">
+          <Text
+            style={{
+              color: colors.primary,
+              fontSize: 13,
+              marginTop: spacing.xs,
+            }}
+          >
+            Retry
+          </Text>
         </TouchableOpacity>
       </View>
     );
@@ -131,7 +129,7 @@ export default function TransactionHistory({
               borderColor: colors.border,
             }}
           >
-            <Text style={{ fontSize: 20, marginRight: spacing.md }}>
+            <Text style={{ fontSize: 20, marginRight: spacing.md }} accessible={true} accessibilityLabel={isSent ? 'Sent' : 'Received'}>
               {isSent ? '↗️' : '↙️'}
             </Text>
             <View style={{ flex: 1 }}>

src/screens/EditProfileScreen.tsx

@@ -72,17 +72,9 @@ export default function EditProfileScreen() {
         >
           <TouchableOpacity
             onPress={() => navigation.goBack()}
+            style={{ marginBottom: spacing.md }}
+            accessibilityLabel="Cancel editing profile"
             accessibilityRole="button"
-            accessibilityLabel="Cancel"
-            style={{
-              alignSelf: 'flex-start',
-              paddingVertical: spacing.sm,
-              paddingHorizontal: spacing.md,
-              marginLeft: -spacing.md,
-              marginBottom: spacing.md,
-              minHeight: 44,
-              justifyContent: 'center',
-            }}
           >
             <Text style={{ color: colors.primary, fontSize: 16 }}>Cancel</Text>
           </TouchableOpacity>
@@ -112,6 +104,7 @@ export default function EditProfileScreen() {
             onChangeText={setName}
             placeholder="Your name"
             placeholderTextColor={colors.textSecondary}
+            accessibilityLabel="Display Name input"
             style={{
               backgroundColor: colors.surface,
               borderRadius: 12,
@@ -138,6 +131,7 @@ export default function EditProfileScreen() {
             onChangeText={setBio}
             placeholder="Tell others about yourself"
             placeholderTextColor={colors.textSecondary}
+            accessibilityLabel="Bio input"
             multiline
             numberOfLines={4}
             textAlignVertical="top"
@@ -157,6 +151,8 @@ export default function EditProfileScreen() {
           <TouchableOpacity
             onPress={() => void handleSave()}
             disabled={isSaving}
+            accessibilityLabel="Save Changes"
+            accessibilityRole="button"
             style={{
               padding: spacing.md,
               backgroundColor: colors.primary,
@@ -165,7 +161,10 @@ export default function EditProfileScreen() {
               opacity: isSaving ? 0.5 : 1,
             }}
           >
-            <Text style={{ color: '#FFF', fontWeight: '600', fontSize: 16 }}>
+            <Text 
+              style={{ color: '#FFF', fontWeight: '600', fontSize: 16 }}
+              accessibilityLiveRegion="polite"
+            >
               {isSaving ? 'Saving...' : 'Save Changes'}
             </Text>
           </TouchableOpacity>

src/screens/HomeScreen.tsx

@@ -64,7 +64,11 @@ export default function HomeScreen() {
           paddingBottom: spacing.lg,
         }}
       >
-        <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
+        <TouchableOpacity 
+          onPress={() => navigation.navigate('Profile')}
+          accessibilityLabel={`Go to Profile. ${getGreeting()}, ${profile?.name || 'Eco Warrior'}`}
+          accessibilityRole="button"
+        >
           <Text style={{ color: colors.textSecondary, fontSize: 16 }}>
             {getGreeting()},
           </Text>
@@ -178,6 +182,8 @@ export default function HomeScreen() {
 
           <TouchableOpacity
             onPress={() => navigation.navigate('Tasks')}
+            accessibilityLabel="Browse Tasks"
+            accessibilityRole="button"
             style={{
               padding: spacing.lg,
               backgroundColor: colors.primary,
@@ -190,7 +196,14 @@ export default function HomeScreen() {
             <Text style={{ color: '#FFF', fontWeight: 'bold', fontSize: 18 }}>
               Browse Tasks
             </Text>
-            <Text style={{ marginLeft: spacing.sm, fontSize: 20 }}>🌿</Text>
+            <Text 
+              style={{ marginLeft: spacing.sm, fontSize: 20 }}
+              accessible={true}
+              accessibilityLabel="Leaves"
+              accessibilityRole="image"
+            >
+              🌿
+            </Text>
           </TouchableOpacity>
         </View>
 
@@ -262,7 +275,12 @@ export default function HomeScreen() {
                       a.status === 'pending' ? colors.warning : colors.border,
                   }}
                 >
-                  <Text style={{ fontSize: 24, marginRight: spacing.md }}>
+                  <Text 
+                    style={{ fontSize: 24, marginRight: spacing.md }}
+                    accessible={true}
+                    accessibilityLabel="Task Icon"
+                    accessibilityRole="image"
+                  >
                     {TASK_TYPE_CONFIG[a.taskType as TaskType]?.icon || '📍'}
                   </Text>
                   <View style={{ flex: 1 }}>

src/screens/MapScreen.tsx

@@ -261,8 +261,14 @@ export default function MapScreen() {
 
       {/* ── Header ── */}
       <View style={styles.header} pointerEvents="box-none">
-        <View style={styles.headerCard}>
-          <Text style={styles.headerTitle}>🗺️ Discover Tasks</Text>
+        <View style={styles.headerCard} accessibilityLiveRegion="polite">
+          <Text 
+            style={styles.headerTitle}
+            accessible={true}
+            accessibilityLabel="Discover Tasks Map"
+          >
+            🗺️ Discover Tasks
+          </Text>
           {isLoading && (
             <ActivityIndicator
               size="small"
@@ -271,9 +277,11 @@ export default function MapScreen() {
             />
           )}
           {error != null && (
-            <TouchableOpacity
-              onPress={() => void refresh()}
+            <TouchableOpacity 
+              onPress={refresh} 
               style={styles.retryBtn}
+              accessibilityLabel="Retry loading tasks"
+              accessibilityRole="button"
             >
               <Text style={styles.retryText}>Retry</Text>
             </TouchableOpacity>
@@ -289,6 +297,8 @@ export default function MapScreen() {
               key={km}
               testID={`radius-btn-${km}`}
               onPress={() => setRadiusKm(km)}
+              accessibilityLabel={`Set radius to ${km} kilometers`}
+              accessibilityRole="button"
               style={[
                 styles.radiusOpt,
                 radiusKm === km && styles.radiusOptActive,
@@ -312,6 +322,8 @@ export default function MapScreen() {
         <TouchableOpacity
           testID="recenter-btn"
           style={styles.recenterBtn}
+          accessibilityLabel="Recenter map on your location"
+          accessibilityRole="button"
           onPress={() => {
             mapRef.current?.animateToRegion(
               {
@@ -324,14 +336,26 @@ export default function MapScreen() {
             );
           }}
         >
-          <Text style={styles.recenterIcon}>◎</Text>
+          <Text 
+            style={styles.recenterIcon}
+            accessible={true}
+            accessibilityLabel="Recenter map"
+            accessibilityRole="image"
+          >
+            ◎
+          </Text>
         </TouchableOpacity>
       )}
 
       {/* ── No-location fallback notice ── */}
       {!location && (
         <View style={styles.noLocationBanner} pointerEvents="none">
-          <Text style={styles.noLocationText}>
+          <Text 
+            style={styles.noLocationText}
+            accessible={true}
+            accessibilityLabel="Enable location to see tasks near you"
+            accessibilityLiveRegion="polite"
+          >
             📍 Enable location to see tasks near you
           </Text>
         </View>