Small nit pick fixes from code rabbit

Author: samejr

apps/webapp/app/components/onboarding/TechnologyPicker.tsx

@@ -186,6 +186,7 @@ export function TechnologyPicker({
               <button
                 type="button"
                 onClick={() => removeItem(item)}
+                aria-label={`Remove ${item}`}
                 className="ml-0.5 flex items-center hover:text-white/70"
               >
                 <XMarkIcon className="size-3.5" />
@@ -214,7 +215,6 @@ export function TechnologyPicker({
         >
           <Ariakit.Select
             className="group flex h-8 w-full items-center rounded bg-charcoal-750 pl-2 pr-2.5 text-sm text-text-dimmed ring-charcoal-600 transition focus-custom hover:bg-charcoal-650 hover:ring-1"
-            onClick={() => setOpen(true)}
           >
             <div className="flex grow items-center">
               <CubeIcon className="mr-1.5 size-4 flex-none text-text-dimmed" />
@@ -280,7 +280,7 @@ export function TechnologyPicker({
                     onChange={(e) => setOtherInputValue(e.target.value)}
                     onKeyDown={handleOtherKeyDown}
                     placeholder="Type and press Enter to add"
-                    className="pl-0.5can flex-1 border-none bg-transparent text-2sm text-text-bright shadow-none outline-none ring-0 placeholder:text-text-dimmed focus:border-none focus:outline-none focus:ring-0"
+                    className="pl-0.5 flex-1 border-none bg-transparent text-2sm text-text-bright shadow-none outline-none ring-0 placeholder:text-text-dimmed focus:border-none focus:outline-none focus:ring-0"
                     autoFocus
                   />
                   <ShortcutKey

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -37,14 +37,16 @@ import {
 } from "~/utils/pathBuilder";
 import { generateVercelOAuthState } from "~/v3/vercel/vercelOAuthState.server";
 
+const WORKING_ON_OTHER = "Other/not sure yet";
+
 const workingOnOptions = [
   "AI agent",
   "Media processing pipeline",
   "Media generation with AI",
   "Event-driven workflow",
   "Realtime streaming",
   "Internal tool or background job",
-  "Other/not sure yet",
+  WORKING_ON_OTHER,
 ] as const;
 
 const goalOptions = [
@@ -183,37 +185,40 @@ export const action: ActionFunction = async ({ request, params }) => {
   const configurationId = url.searchParams.get("configurationId");
   const next = url.searchParams.get("next");
 
-  const onboardingData: Record<string, Prisma.InputJsonValue> = {};
+  try {
+    const stringArraySchema = z.array(z.string());
+
+    const onboardingData: Record<string, Prisma.InputJsonValue> = {};
 
-  if (submission.value.workingOn) {
-    const workingOn = JSON.parse(submission.value.workingOn) as string[];
-    if (workingOn.length > 0) {
-      onboardingData.workingOn = workingOn;
+    if (submission.value.workingOn) {
+      const workingOn = stringArraySchema.parse(JSON.parse(submission.value.workingOn));
+      if (workingOn.length > 0) {
+        onboardingData.workingOn = workingOn;
+      }
     }
-  }
-  if (submission.value.workingOnOther) {
-    onboardingData.workingOnOther = submission.value.workingOnOther;
-  }
-  if (submission.value.technologies) {
-    const technologies = JSON.parse(submission.value.technologies) as string[];
-    if (technologies.length > 0) {
-      onboardingData.technologies = technologies;
+    if (submission.value.workingOnOther) {
+      onboardingData.workingOnOther = submission.value.workingOnOther;
     }
-  }
-  if (submission.value.technologiesOther) {
-    const technologiesOther = JSON.parse(submission.value.technologiesOther) as string[];
-    if (technologiesOther.length > 0) {
-      onboardingData.technologiesOther = technologiesOther;
+    if (submission.value.technologies) {
+      const technologies = stringArraySchema.parse(JSON.parse(submission.value.technologies));
+      if (technologies.length > 0) {
+        onboardingData.technologies = technologies;
+      }
     }
-  }
-  if (submission.value.goals) {
-    const goals = JSON.parse(submission.value.goals) as string[];
-    if (goals.length > 0) {
-      onboardingData.goals = goals;
+    if (submission.value.technologiesOther) {
+      const technologiesOther = stringArraySchema.parse(
+        JSON.parse(submission.value.technologiesOther)
+      );
+      if (technologiesOther.length > 0) {
+        onboardingData.technologiesOther = technologiesOther;
+      }
+    }
+    if (submission.value.goals) {
+      const goals = stringArraySchema.parse(JSON.parse(submission.value.goals));
+      if (goals.length > 0) {
+        onboardingData.goals = goals;
+      }
     }
-  }
-
-  try {
     const project = await createProject({
       organizationSlug: organizationSlug,
       name: submission.value.projectName,
@@ -316,11 +321,11 @@ export default function Page() {
   const [shuffledWorkingOn, setShuffledWorkingOn] = useState<string[]>([...workingOnOptions]);
 
   useEffect(() => {
-    const nonOther = workingOnOptions.filter((o) => o !== "Other/not sure yet");
-    setShuffledWorkingOn([...shuffleArray(nonOther), "Other/not sure yet"]);
+    const nonOther = workingOnOptions.filter((o) => o !== WORKING_ON_OTHER);
+    setShuffledWorkingOn([...shuffleArray(nonOther), WORKING_ON_OTHER]);
   }, []);
 
-  const showWorkingOnOther = selectedWorkingOn.includes("Other/not sure yet");
+  const showWorkingOnOther = selectedWorkingOn.includes(WORKING_ON_OTHER);
 
   return (
     <AppContainer className="bg-charcoal-900">

apps/webapp/app/routes/confirm-basic-details.tsx

@@ -309,7 +309,9 @@ export default function Page() {
                 <>
                   <div className="border-t border-charcoal-700" />
                   <InputGroup>
-                    <Label className="mb-0.5">How did you hear about us?</Label>
+                    <Label className="mb-0.5" id="referral-label">
+                      How did you hear about us?
+                    </Label>
                     <input
                       type="hidden"
                       name="referralSource"
@@ -319,6 +321,7 @@ export default function Page() {
                       value={selectedReferralSource}
                       onValueChange={setSelectedReferralSource}
                       className="flex flex-wrap gap-2"
+                      aria-labelledby="referral-label"
                     >
                       {shuffledReferralSources.map((option) => (
                         <RadioGroupItem
@@ -343,12 +346,13 @@ export default function Page() {
                   </InputGroup>
 
                   <InputGroup className="mt-1">
-                    <Label>What role fits you best?</Label>
+                    <Label id="role-label">What role fits you best?</Label>
                     <input type="hidden" name="role" value={selectedRole} />
                     <Select<string, string>
                       value={selectedRole}
                       setValue={setSelectedRole}
                       placeholder="Select an option"
+                      aria-labelledby="role-label"
                       variant="secondary/small"
                       dropdownIcon
                       icon={<UserGroupIcon className="mr-1 size-4.5 text-text-dimmed" />}