fix(app): session screen accessibility improvements (#9907)

packages/app/src/components/dialog-select-model.tsx

@@ -1,5 +1,5 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
-import { Component, createMemo, createSignal, JSX, Show } from "solid-js"
+import { Component, ComponentProps, createMemo, createSignal, JSX, Show, ValidComponent } from "solid-js"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { popularProviders } from "@/hooks/use-providers"
@@ -86,10 +86,12 @@ const ModelList: Component<{
   )
 }
 
-export const ModelSelectorPopover: Component<{
+export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
   provider?: string
-  children: JSX.Element
-}> = (props) => {
+  children?: JSX.Element
+  triggerAs?: T
+  triggerProps?: ComponentProps<T>
+}) {
   const [open, setOpen] = createSignal(false)
   const dialog = useDialog()
 
@@ -101,7 +103,9 @@ export const ModelSelectorPopover: Component<{
 
   return (
     <Kobalte open={open()} onOpenChange={setOpen} placement="top-start" gutter={8}>
-      <Kobalte.Trigger as="div">{props.children}</Kobalte.Trigger>
+      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...(props.triggerProps as any)}>
+        {props.children}
+      </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden">
           <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>