From beeb432e79bae071f2f0e36a9c99ddcfeb428e88 Mon Sep 17 00:00:00 2001
From: Shawn Jackson <shawn@resgrid.com>
Date: Mon, 19 Jan 2026 18:06:10 -0800
Subject: [PATCH 1/3] RD-T39 Bug fixes

---
 src/app/call/[id]/edit.web.tsx |  55 ++++++++--------
 src/app/call/new/index.web.tsx | 111 +++++++++++++++++----------------
 2 files changed, 88 insertions(+), 78 deletions(-)

diff --git a/src/app/call/[id]/edit.web.tsx b/src/app/call/[id]/edit.web.tsx
index b7f636c..c21f230 100644
--- a/src/app/call/[id]/edit.web.tsx
+++ b/src/app/call/[id]/edit.web.tsx
@@ -83,10 +83,10 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
   const isDark = colorScheme === 'dark';
 
   const inputStyles = StyleSheet.flatten([
-    styles.webInput,
+    webStyles.webInput as any,
     isDark ? styles.webInputDark : styles.webInputLight,
     error ? styles.webInputError : {},
-    disabled ? styles.webInputDisabled : {},
+    disabled ? webStyles.webInputDisabled as any : {},
     multiline ? { minHeight: rows * 24 + 16 } : {},
   ]);
 
@@ -152,7 +152,7 @@ const WebSelect: React.FC<WebSelectProps> = ({ label, placeholder, value, onChan
         {required ? <Text style={styles.required}> *</Text> : null}
       </Text>
       <select
-        style={StyleSheet.flatten([styles.webSelect, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]) as React.CSSProperties}
+        style={StyleSheet.flatten([webStyles.webSelect as any, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]) as React.CSSProperties}
         value={value}
         onChange={(e) => onChange(e.target.value)}
       >
@@ -315,6 +315,7 @@ export default function EditCallWeb() {
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showLocationPicker, showAddressSelection, showDispatchModal]);
 
   const onSubmit = async (data: FormValues) => {
@@ -919,15 +920,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  webInput: {
-    width: '100%',
-    padding: 10,
-    paddingRight: 40,
-    fontSize: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    outline: 'none',
-  } as const,
   webInputDark: {
     backgroundColor: '#262626',
     borderColor: '#404040',
@@ -941,23 +933,10 @@ const styles = StyleSheet.create({
   webInputError: {
     borderColor: '#ef4444',
   },
-  webInputDisabled: {
-    opacity: 0.6,
-    cursor: 'not-allowed',
-  },
   rightElement: {
     position: 'absolute',
     right: 8,
   },
-  webSelect: {
-    width: '100%',
-    padding: 10,
-    fontSize: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    outline: 'none',
-    cursor: 'pointer',
-  },
   webSelectDark: {
     backgroundColor: '#262626',
     borderColor: '#404040',
@@ -1211,3 +1190,29 @@ const styles = StyleSheet.create({
     color: '#374151',
   },
 });
+
+// Web-specific styles that use CSS-only properties
+const webStyles: { [key: string]: React.CSSProperties } = {
+  webInput: {
+    width: '100%',
+    padding: 10,
+    paddingRight: 40,
+    fontSize: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    outline: 'none',
+  },
+  webInputDisabled: {
+    opacity: 0.6,
+    cursor: 'not-allowed',
+  },
+  webSelect: {
+    width: '100%',
+    padding: 10,
+    fontSize: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    outline: 'none',
+    cursor: 'pointer',
+  },
+};
diff --git a/src/app/call/new/index.web.tsx b/src/app/call/new/index.web.tsx
index 1e46bd1..41597c4 100644
--- a/src/app/call/new/index.web.tsx
+++ b/src/app/call/new/index.web.tsx
@@ -109,10 +109,10 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
   const isDark = colorScheme === 'dark';
 
   const inputStyles = StyleSheet.flatten([
-    styles.webInput,
+    webStyles.webInput as any,
     isDark ? styles.webInputDark : styles.webInputLight,
     error ? styles.webInputError : {},
-    disabled ? styles.webInputDisabled : {},
+    disabled ? webStyles.webInputDisabled as any : {},
     multiline ? { minHeight: rows * 24 + 16 } : {},
   ]);
 
@@ -178,7 +178,7 @@ const WebSelect: React.FC<WebSelectProps> = ({ label, placeholder, value, onChan
         {required ? <Text style={styles.required}> *</Text> : null}
       </Text>
       <select
-        style={StyleSheet.flatten([styles.webSelect, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]) as React.CSSProperties}
+        style={StyleSheet.flatten([webStyles.webSelect as any, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]) as React.CSSProperties}
         value={value}
         onChange={(e) => onChange(e.target.value)}
       >
@@ -279,33 +279,7 @@ export default function NewCallWeb() {
     });
   }, [trackEvent, callPriorities.length, callTypes.length]);
 
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ctrl/Cmd + Enter to submit
-      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-        e.preventDefault();
-        handleSubmit(onSubmit)();
-      }
-      // Escape to cancel
-      if (e.key === 'Escape') {
-        if (showLocationPicker) {
-          setShowLocationPicker(false);
-        } else if (showAddressSelection) {
-          setShowAddressSelection(false);
-        } else if (showDispatchModal) {
-          setShowDispatchModal(false);
-        } else {
-          router.back();
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [showLocationPicker, showAddressSelection, showDispatchModal, handleSubmit, onSubmit, router]);
-
-  const onSubmit = async (data: FormValues) => {
+  const onSubmit = useCallback(async (data: FormValues) => {
     try {
       setIsSubmitting(true);
 
@@ -353,7 +327,34 @@ export default function NewCallWeb() {
     } finally {
       setIsSubmitting(false);
     }
-  };
+  }, [selectedLocation, callPriorities, callTypes, toast, t, router]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + Enter to submit
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        handleSubmit(onSubmit)();
+      }
+      // Escape to cancel
+      if (e.key === 'Escape') {
+        if (showLocationPicker) {
+          setShowLocationPicker(false);
+        } else if (showAddressSelection) {
+          setShowAddressSelection(false);
+        } else if (showDispatchModal) {
+          setShowDispatchModal(false);
+        } else {
+          router.back();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showLocationPicker, showAddressSelection, showDispatchModal, handleSubmit, onSubmit]);
 
   const handleLocationSelected = useCallback(
     (location: { latitude: number; longitude: number; address?: string }) => {
@@ -1019,15 +1020,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  webInput: {
-    width: '100%',
-    padding: 10,
-    paddingRight: 40,
-    fontSize: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    outline: 'none',
-  } as const,
   webInputDark: {
     backgroundColor: '#262626',
     borderColor: '#404040',
@@ -1041,23 +1033,10 @@ const styles = StyleSheet.create({
   webInputError: {
     borderColor: '#ef4444',
   },
-  webInputDisabled: {
-    opacity: 0.6,
-    cursor: 'not-allowed',
-  },
   rightElement: {
     position: 'absolute',
     right: 8,
   },
-  webSelect: {
-    width: '100%',
-    padding: 10,
-    fontSize: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    outline: 'none',
-    cursor: 'pointer',
-  },
   webSelectDark: {
     backgroundColor: '#262626',
     borderColor: '#404040',
@@ -1311,3 +1290,29 @@ const styles = StyleSheet.create({
     color: '#374151',
   },
 });
+
+// Web-specific styles that use CSS-only properties
+const webStyles: { [key: string]: React.CSSProperties } = {
+  webInput: {
+    width: '100%',
+    padding: 10,
+    paddingRight: 40,
+    fontSize: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    outline: 'none',
+  },
+  webInputDisabled: {
+    opacity: 0.6,
+    cursor: 'not-allowed',
+  },
+  webSelect: {
+    width: '100%',
+    padding: 10,
+    fontSize: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    outline: 'none',
+    cursor: 'pointer',
+  },
+};

From 029e51eb1286ae269efde87857fa5b76aad7fa08 Mon Sep 17 00:00:00 2001
From: Shawn Jackson <shawn@resgrid.com>
Date: Mon, 19 Jan 2026 18:26:46 -0800
Subject: [PATCH 2/3] RD-T39 PR#75 fixes

---
 global.css                     |   7 ++
 src/app/call/[id]/edit.web.tsx |   2 +-
 src/app/call/new/index.web.tsx | 123 ++++++++++++++++++---------------
 3 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/global.css b/global.css
index b5c61c9..8e5cbbc 100644
--- a/global.css
+++ b/global.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Accessible focus styles for keyboard navigation */
+.web-input-accessible:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
diff --git a/src/app/call/[id]/edit.web.tsx b/src/app/call/[id]/edit.web.tsx
index c21f230..4d30874 100644
--- a/src/app/call/[id]/edit.web.tsx
+++ b/src/app/call/[id]/edit.web.tsx
@@ -86,7 +86,7 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
     webStyles.webInput as any,
     isDark ? styles.webInputDark : styles.webInputLight,
     error ? styles.webInputError : {},
-    disabled ? webStyles.webInputDisabled as any : {},
+    disabled ? (webStyles.webInputDisabled as any) : {},
     multiline ? { minHeight: rows * 24 + 16 } : {},
   ]);
 
diff --git a/src/app/call/new/index.web.tsx b/src/app/call/new/index.web.tsx
index 41597c4..00e9e92 100644
--- a/src/app/call/new/index.web.tsx
+++ b/src/app/call/new/index.web.tsx
@@ -112,10 +112,18 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
     webStyles.webInput as any,
     isDark ? styles.webInputDark : styles.webInputLight,
     error ? styles.webInputError : {},
-    disabled ? webStyles.webInputDisabled as any : {},
+    disabled ? (webStyles.webInputDisabled as any) : {},
     multiline ? { minHeight: rows * 24 + 16 } : {},
   ]);
 
+  // Add accessible focus styles for keyboard navigation
+  const accessibleInputStyles = {
+    ...inputStyles,
+    outline: 'none',
+  } as React.CSSProperties & {
+    '&:focus-visible'?: React.CSSProperties;
+  };
+
   return (
     <View style={styles.webInputContainer}>
       <Text style={StyleSheet.flatten([styles.webLabel, isDark ? styles.webLabelDark : styles.webLabelLight])}>
@@ -125,7 +133,8 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
       <View style={styles.inputWrapper}>
         {multiline ? (
           <textarea
-            style={inputStyles as React.CSSProperties}
+            className="web-input-accessible"
+            style={accessibleInputStyles as React.CSSProperties}
             placeholder={placeholder}
             value={value}
             onChange={(e) => onChange(e.target.value)}
@@ -138,7 +147,8 @@ const WebInput: React.FC<WebInputProps> = ({ label, placeholder, value, onChange
         ) : (
           <input
             type="text"
-            style={inputStyles as React.CSSProperties}
+            className="web-input-accessible"
+            style={accessibleInputStyles as React.CSSProperties}
             placeholder={placeholder}
             value={value}
             onChange={(e) => onChange(e.target.value)}
@@ -171,17 +181,21 @@ const WebSelect: React.FC<WebSelectProps> = ({ label, placeholder, value, onChan
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === 'dark';
 
+  const selectStyles = StyleSheet.flatten([webStyles.webSelect as any, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]);
+
+  // Add accessible focus styles for keyboard navigation
+  const accessibleSelectStyles = {
+    ...selectStyles,
+    outline: 'none',
+  } as React.CSSProperties;
+
   return (
     <View style={styles.webInputContainer}>
       <Text style={StyleSheet.flatten([styles.webLabel, isDark ? styles.webLabelDark : styles.webLabelLight])}>
         {label}
         {required ? <Text style={styles.required}> *</Text> : null}
       </Text>
-      <select
-        style={StyleSheet.flatten([webStyles.webSelect as any, isDark ? styles.webSelectDark : styles.webSelectLight, error ? styles.webInputError : {}]) as React.CSSProperties}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      >
+      <select className="web-input-accessible" style={accessibleSelectStyles} value={value} onChange={(e) => onChange(e.target.value)}>
         <option value="">{placeholder}</option>
         {options.map((option) => (
           <option key={option.id} value={option.name}>
@@ -279,55 +293,58 @@ export default function NewCallWeb() {
     });
   }, [trackEvent, callPriorities.length, callTypes.length]);
 
-  const onSubmit = useCallback(async (data: FormValues) => {
-    try {
-      setIsSubmitting(true);
+  const onSubmit = useCallback(
+    async (data: FormValues) => {
+      try {
+        setIsSubmitting(true);
 
-      if (selectedLocation?.latitude && selectedLocation?.longitude) {
-        data.latitude = selectedLocation.latitude;
-        data.longitude = selectedLocation.longitude;
-      }
+        if (selectedLocation?.latitude && selectedLocation?.longitude) {
+          data.latitude = selectedLocation.latitude;
+          data.longitude = selectedLocation.longitude;
+        }
 
-      const priority = callPriorities.find((p) => p.Name === data.priority);
-      const type = callTypes.find((t) => t.Name === data.type);
+        const priority = callPriorities.find((p) => p.Name === data.priority);
+        const type = callTypes.find((t) => t.Name === data.type);
 
-      if (!priority) {
-        toast.error(t('calls.invalid_priority'));
-        return;
-      }
+        if (!priority) {
+          toast.error(t('calls.invalid_priority'));
+          return;
+        }
 
-      if (!type) {
-        toast.error(t('calls.invalid_type'));
-        return;
-      }
+        if (!type) {
+          toast.error(t('calls.invalid_type'));
+          return;
+        }
 
-      await createCall({
-        name: data.name,
-        nature: data.nature,
-        priority: priority.Id,
-        type: type.Id,
-        note: data.note,
-        address: data.address,
-        latitude: data.latitude,
-        longitude: data.longitude,
-        what3words: data.what3words,
-        plusCode: data.plusCode,
-        dispatchUsers: data.dispatchSelection?.users,
-        dispatchGroups: data.dispatchSelection?.groups,
-        dispatchRoles: data.dispatchSelection?.roles,
-        dispatchUnits: data.dispatchSelection?.units,
-        dispatchEveryone: data.dispatchSelection?.everyone,
-      });
-
-      toast.success(t('calls.create_success'));
-      router.push('/calls' as Href);
-    } catch (err) {
-      console.error('Error creating call:', err);
-      toast.error(t('calls.create_error'));
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [selectedLocation, callPriorities, callTypes, toast, t, router]);
+        await createCall({
+          name: data.name,
+          nature: data.nature,
+          priority: priority.Id,
+          type: type.Id,
+          note: data.note,
+          address: data.address,
+          latitude: data.latitude,
+          longitude: data.longitude,
+          what3words: data.what3words,
+          plusCode: data.plusCode,
+          dispatchUsers: data.dispatchSelection?.users,
+          dispatchGroups: data.dispatchSelection?.groups,
+          dispatchRoles: data.dispatchSelection?.roles,
+          dispatchUnits: data.dispatchSelection?.units,
+          dispatchEveryone: data.dispatchSelection?.everyone,
+        });
+
+        toast.success(t('calls.create_success'));
+        router.push('/calls' as Href);
+      } catch (err) {
+        console.error('Error creating call:', err);
+        toast.error(t('calls.create_error'));
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [selectedLocation, callPriorities, callTypes, toast, t, router]
+  );
 
   // Keyboard shortcuts
   useEffect(() => {
@@ -1300,7 +1317,6 @@ const webStyles: { [key: string]: React.CSSProperties } = {
     fontSize: 14,
     borderRadius: 8,
     borderWidth: 1,
-    outline: 'none',
   },
   webInputDisabled: {
     opacity: 0.6,
@@ -1312,7 +1328,6 @@ const webStyles: { [key: string]: React.CSSProperties } = {
     fontSize: 14,
     borderRadius: 8,
     borderWidth: 1,
-    outline: 'none',
     cursor: 'pointer',
   },
 };

From be778a27604af8cc6111a84de5663be3fe35391a Mon Sep 17 00:00:00 2001
From: Shawn Jackson <shawn@resgrid.com>
Date: Mon, 19 Jan 2026 18:48:13 -0800
Subject: [PATCH 3/3] RD-T39 PR#75 fixes

---
 src/app/call/new/index.web.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/call/new/index.web.tsx b/src/app/call/new/index.web.tsx
index 00e9e92..dd60f24 100644
--- a/src/app/call/new/index.web.tsx
+++ b/src/app/call/new/index.web.tsx
@@ -307,11 +307,13 @@ export default function NewCallWeb() {
         const type = callTypes.find((t) => t.Name === data.type);
 
         if (!priority) {
+          setIsSubmitting(false);
           toast.error(t('calls.invalid_priority'));
           return;
         }
 
         if (!type) {
+          setIsSubmitting(false);
           toast.error(t('calls.invalid_type'));
           return;
         }