fix: a11y fixes

frontend/app/globals.css

@@ -870,3 +870,14 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

frontend/app/onboarding/_components/model-selector.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import {
@@ -65,6 +65,7 @@ export function ModelSelector({
 }: ModelSelectorProps) {
   const [open, setOpen] = useState(defaultOpen);
   const [searchValue, setSearchValue] = useState("");
+  const listboxId = useId();
 
   // Flatten grouped options or use regular options
   const allOptions =
@@ -103,6 +104,7 @@ export function ModelSelector({
           role="combobox"
           disabled={disabled || allOptions.length === 0}
           aria-expanded={open}
+          aria-controls={listboxId}
           className={cn(
             "w-full gap-2 justify-between font-normal text-sm",
             hasError && "!border-destructive",
@@ -143,6 +145,7 @@ export function ModelSelector({
             onValueChange={setSearchValue}
           />
           <CommandList
+            id={listboxId}
             className="max-h-[300px] overflow-y-auto"
             onWheel={(e) => e.stopPropagation()}
           >

frontend/components/ui/multi-select.tsx

@@ -49,6 +49,7 @@ export function MultiSelect({
 }: MultiSelectProps) {
   const [open, setOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState("");
+  const listboxId = React.useId();
 
   // Normalize value to empty array if undefined/null to prevent crashes
   const safeValue = value ?? [];
@@ -109,6 +110,7 @@ export function MultiSelect({
           variant="outline"
           role="combobox"
           aria-expanded={open}
+          aria-controls={listboxId}
           className={cn("w-full justify-between h-8 py-0 text-left", className)}
         >
           <span className="text-foreground text-sm">{getDisplayText()}</span>
@@ -123,7 +125,7 @@ export function MultiSelect({
             onValueChange={setSearchValue}
           />
           <CommandEmpty>No items found.</CommandEmpty>
-          <CommandGroup>
+          <CommandGroup id={listboxId}>
             <ScrollArea className="max-h-64">
               {showAllOption && (
                 <CommandItem