feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)

2026-02-19 22:05:40 +08:00
parent 6fe6ebef13
commit c8fe67f346
20 changed files with 1416 additions and 619 deletions
--- a/components/contacts/AddContactSheet.tsx
+++ b/components/contacts/AddContactSheet.tsx
@@ -65,11 +65,16 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
        <View className="flex-1 bg-secondary">
          {/* Header */}
          <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
-            <TouchableOpacity onPress={() => { reset(); onClose(); }}>
+            <TouchableOpacity
+              onPress={() => { reset(); onClose(); }}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
              <X size={22} color="#2C3E50" />
            </TouchableOpacity>
            <Text className="text-charcoal font-semibold text-lg">New Contact</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
          </View>

          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
@@ -80,7 +85,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
            <Text className="text-charcoal font-medium mb-2">Status</Text>
            <View className="flex-row flex-wrap gap-2 mb-4">
              {STATUS_OPTIONS.map((s) => (
-                <TouchableOpacity key={s} onPress={() => setStatus(s)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                <TouchableOpacity
+                  key={s}
+                  onPress={() => setStatus(s)}
+                  className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Status: ${s}`}
+                  accessibilityState={{ selected: status === s }}
+                  style={{ minHeight: 36 }}
+                >
                  <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
                </TouchableOpacity>
              ))}
@@ -90,7 +103,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
            <Text className="text-charcoal font-medium mb-2">Category</Text>
            <View className="flex-row gap-2 mb-4">
              {CATEGORY_OPTIONS.map((c) => (
-                <TouchableOpacity key={c} onPress={() => setCategory(c)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                <TouchableOpacity
+                  key={c}
+                  onPress={() => setCategory(c)}
+                  className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Category: ${c}`}
+                  accessibilityState={{ selected: category === c }}
+                  style={{ minHeight: 36 }}
+                >
                  <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
                </TouchableOpacity>
              ))}
@@ -101,6 +122,10 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {

            {/* GPS Tag */}
            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel={coords ? `GPS location tagged: ${coords.lat.toFixed(5)}, ${coords.lng.toFixed(5)}` : 'Tag GPS location'}
+              accessibilityHint="Requests location permission and tags the current GPS coordinates"
+              style={{ minHeight: 48 }}
              onPress={async () => {
                const { status } = await Location.requestForegroundPermissionsAsync();
                if (status !== 'granted') { alert('Location permission denied'); return; }
--- a/components/contacts/ContactCard.tsx
+++ b/components/contacts/ContactCard.tsx
@@ -1,4 +1,4 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { useRouter } from 'expo-router';
 import { ChevronRight } from 'lucide-react-native';
 import { Contact } from '@/store/useContactStore';
@@ -25,9 +25,13 @@ export function ContactCard({ contact, onRefresh }: Props) {
    <TouchableOpacity
      className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
      onPress={() => router.push({ pathname: '/contact/[id]', params: { id: contact.id } })}
+      accessibilityRole="button"
+      accessibilityLabel={`${contact.fullName}, ${contact.status}${contact.address ? `, ${contact.address}` : ''}`}
+      accessibilityHint="Tap to view contact details"
+      style={{ minHeight: 72 }}
    >
      <View className="w-12 h-12 rounded-full bg-primary items-center justify-center mr-3">
-        <Text className="text-white font-bold text-lg">{initials}</Text>
+        <Text className="text-white font-bold text-lg" accessibilityElementsHidden>{initials}</Text>
      </View>
      <View className="flex-1">
        <Text className="text-charcoal font-semibold text-base" numberOfLines={1}>{contact.fullName}</Text>
@@ -36,7 +40,7 @@ export function ContactCard({ contact, onRefresh }: Props) {
          <Text className={`text-xs font-medium px-2 py-0.5 rounded-full self-start ${statusStyle}`}>{contact.status}</Text>
        </View>
      </View>
-      <ChevronRight size={18} color="#9CA3AF" />
+      <ChevronRight size={18} color="#9CA3AF" accessibilityElementsHidden />
    </TouchableOpacity>
  );
 }
--- a/components/contacts/EditContactSheet.tsx
+++ b/components/contacts/EditContactSheet.tsx
@@ -55,9 +55,16 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
        <View className="flex-1 bg-secondary">
          <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
-            <TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
+            <TouchableOpacity
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
+            >
+              <X size={22} color="#2C3E50" />
+            </TouchableOpacity>
            <Text className="text-charcoal font-semibold text-lg">Edit Contact</Text>
-            <View style={{ width: 22 }} />
+            <View style={{ width: 44 }} />
          </View>
          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
            <Input label="Full Name *" value={fullName} onChangeText={setFullName} />
@@ -65,7 +72,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
            <Text className="text-charcoal font-medium mb-2">Status</Text>
            <View className="flex-row flex-wrap gap-2 mb-4">
              {STATUS_OPTIONS.map((s) => (
-                <TouchableOpacity key={s} onPress={() => setStatus(s as any)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                <TouchableOpacity
+                  key={s}
+                  onPress={() => setStatus(s as any)}
+                  className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Status: ${s}`}
+                  accessibilityState={{ selected: status === s }}
+                  style={{ minHeight: 36 }}
+                >
                  <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
                </TouchableOpacity>
              ))}
@@ -73,7 +88,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
            <Text className="text-charcoal font-medium mb-2">Category</Text>
            <View className="flex-row gap-2 mb-4">
              {CATEGORY_OPTIONS.map((c) => (
-                <TouchableOpacity key={c} onPress={() => setCategory(c as any)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
+                <TouchableOpacity
+                  key={c}
+                  onPress={() => setCategory(c as any)}
+                  className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Category: ${c}`}
+                  accessibilityState={{ selected: category === c }}
+                  style={{ minHeight: 36 }}
+                >
                  <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
                </TouchableOpacity>
              ))}