Polish mobile and web experience

apps/mobile/components/ui/SelectField.tsx

@@ -7,6 +7,8 @@ import {
   StyleSheet,
   Text,
   View,
+  type StyleProp,
+  type ViewStyle,
 } from "react-native";
 
 import { fonts, radii, spacing } from "@/constants/theme";
@@ -26,6 +28,8 @@ type SelectFieldProps = {
   required?: boolean;
   error?: string;
   onValueChange: (value: string) => void;
+  onBlur?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
 };
 
 export function SelectField({
@@ -37,19 +41,29 @@ export function SelectField({
   required,
   error,
   onValueChange,
+  onBlur,
+  containerStyle,
 }: SelectFieldProps) {
   const { colors } = useAppTheme();
   const [open, setOpen] = useState(false);
   const selected = options.find((option) => option.value === value);
 
+  function close() {
+    setOpen(false);
+    onBlur?.();
+  }
+
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, containerStyle]}>
       <Text style={[styles.label, { color: colors.foreground }]}>
         {label}
         {required ? <Text style={{ color: colors.destructive }}> *</Text> : null}
       </Text>
       <Pressable
+        accessible
+        accessibilityLabel={`${label}, ${selected?.label ?? placeholder}`}
         accessibilityRole="button"
+        accessibilityState={{ disabled: Boolean(disabled), expanded: open }}
         disabled={disabled}
         onPress={() => setOpen(true)}
         style={({ pressed }) => [
@@ -77,18 +91,18 @@ export function SelectField({
 
       <Modal
         animationType="slide"
-        onRequestClose={() => setOpen(false)}
+        onRequestClose={close}
         transparent
         visible={open}
       >
-        <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={close}>
           <Pressable
             style={[styles.sheet, { backgroundColor: colors.background }]}
             onPress={(event) => event.stopPropagation()}
           >
             <View style={[styles.sheetHeader, { borderBottomColor: colors.border }]}>
               <Text style={[styles.sheetTitle, { color: colors.foreground }]}>{label}</Text>
-              <Pressable accessibilityRole="button" onPress={() => setOpen(false)}>
+              <Pressable accessibilityRole="button" onPress={close}>
                 <Text style={[styles.done, { color: colors.primary }]}>Done</Text>
               </Pressable>
             </View>
@@ -101,7 +115,7 @@ export function SelectField({
                     accessibilityRole="button"
                     onPress={() => {
                       onValueChange(option.value);
-                      setOpen(false);
+                      close();
                     }}
                     style={({ pressed }) => [
                       styles.option,