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

packages/app/src/components/dialog-connect-provider.tsx

@@ -143,7 +143,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   }
 
   return (
-    <Dialog title={<IconButton tabIndex={-1} icon="arrow-left" variant="ghost" onClick={goBack} />}>
+    <Dialog title={<IconButton tabIndex={-1} icon="arrow-left" variant="ghost" onClick={goBack} aria-label="Go back" />}>
       <div class="flex flex-col gap-6 px-2.5 pb-3">
         <div class="px-2.5 flex gap-4 items-center">
           <ProviderIcon id={props.provider as IconName} class="size-5 shrink-0 icon-strong-base" />

packages/app/src/components/dialog-edit-project.tsx

@@ -193,6 +193,8 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   {(color) => (
                     <button
                       type="button"
+                      aria-label={`Select ${color} color`}
+                      aria-pressed={store.color === color}
                       classList={{
                         "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
                         "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":

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>

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

@@ -158,6 +158,7 @@ export function DialogSelectServer() {
                   icon="circle-x"
                   variant="ghost"
                   class="bg-transparent transition-opacity shrink-0 hover:scale-110"
+                  aria-label="Remove server"
                   onClick={(e) => {
                     e.stopPropagation()
                     handleRemove(i)

packages/app/src/components/prompt-input.tsx

@@ -1487,6 +1487,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     variant="ghost"
                     class="h-6 w-6"
                     onClick={() => prompt.context.removeActive()}
+                    aria-label="Remove active file from context"
                   />
                 </div>
               )}
@@ -1524,6 +1525,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     variant="ghost"
                     class="h-6 w-6"
                     onClick={() => prompt.context.remove(item.key)}
+                    aria-label="Remove file from context"
                   />
                 </div>
               )}
@@ -1556,6 +1558,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     type="button"
                     onClick={() => removeImageAttachment(attachment.id)}
                     class="absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
+                    aria-label="Remove attachment"
                   >
                     <Icon name="close" class="size-3 text-text-weak" />
                   </button>
@@ -1574,6 +1577,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               editorRef = el
               props.ref?.(el)
             }}
+            role="textbox"
+            aria-multiline="true"
+            aria-label={
+              store.mode === "shell"
+                ? language.t("prompt.placeholder.shell")
+                : language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })
+            }
             contenteditable="true"
             onInput={handleInput}
             onPaste={handlePaste}
@@ -1638,21 +1648,22 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     </TooltipKeybind>
                   }
                 >
-                  <ModelSelectorPopover>
-                    <TooltipKeybind
-                      placement="top"
-                      title={language.t("command.model.choose")}
-                      keybind={command.keybind("model.choose")}
+                  <TooltipKeybind
+                    placement="top"
+                    title={language.t("command.model.choose")}
+                    keybind={command.keybind("model.choose")}
+                  >
+                    <ModelSelectorPopover
+                      triggerAs={Button}
+                      triggerProps={{ variant: "ghost" }}
                     >
-                      <Button as="div" variant="ghost">
-                        <Show when={local.model.current()?.provider?.id}>
-                          <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                        </Show>
-                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                        <Icon name="chevron-down" size="small" />
-                      </Button>
-                    </TooltipKeybind>
-                  </ModelSelectorPopover>
+                      <Show when={local.model.current()?.provider?.id}>
+                        <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
+                      </Show>
+                      {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                      <Icon name="chevron-down" size="small" />
+                    </ModelSelectorPopover>
+                  </TooltipKeybind>
                 </Show>
                 <Show when={local.model.variant.list().length > 0}>
                   <TooltipKeybind
@@ -1683,6 +1694,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
                         "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
                       }}
+                      aria-label="Toggle auto-accept permissions"
+                      aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
                     >
                       <Icon
                         name="chevron-double-right"
@@ -1711,7 +1724,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               <SessionContextUsage />
               <Show when={store.mode === "normal"}>
                 <Tooltip placement="top" value={language.t("prompt.action.attachFile")}>
-                  <Button type="button" variant="ghost" class="size-6" onClick={() => fileInputRef.click()}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    class="size-6"
+                    onClick={() => fileInputRef.click()}
+                    aria-label="Attach file"
+                  >
                     <Icon name="photo" class="size-4.5" />
                   </Button>
                 </Tooltip>
@@ -1743,6 +1762,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
                 class="h-6 w-4.5"
+                aria-label={working() ? "Stop" : "Send message"}
               />
             </Tooltip>
           </div>

packages/app/src/components/session-context-usage.tsx

@@ -96,7 +96,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
         <Switch>
           <Match when={variant() === "indicator"}>{circle()}</Match>
           <Match when={true}>
-            <Button type="button" variant="ghost" class="size-6" onClick={openContext}>
+            <Button type="button" variant="ghost" class="size-6" onClick={openContext} aria-label="View context usage">
               {circle()}
             </Button>
           </Match>

packages/app/src/components/session/session-header.tsx

@@ -135,6 +135,7 @@ export function SessionHeader() {
               type="button"
               class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
+              aria-label="Search files"
             >
               <div class="flex min-w-0 flex-1 items-center gap-2 overflow-visible">
                 <Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" />
@@ -184,6 +185,10 @@ export function SessionHeader() {
                       variant="ghost"
                       class="group/review-toggle size-6 p-0"
                       onClick={() => view().reviewPanel.toggle()}
+                      aria-label="Toggle review panel"
+                      aria-expanded={view().reviewPanel.opened()}
+                      aria-controls="review-panel"
+                      tabIndex={showReview() ? 0 : -1}
                     >
                       <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
                         <Icon
@@ -214,6 +219,9 @@ export function SessionHeader() {
                     variant="ghost"
                     class="group/terminal-toggle size-6 p-0"
                     onClick={() => view().terminal.toggle()}
+                    aria-label="Toggle terminal"
+                    aria-expanded={view().terminal.opened()}
+                    aria-controls="terminal-panel"
                   >
                     <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
                       <Icon
@@ -235,32 +243,23 @@ export function SessionHeader() {
                   </Button>
                 </TooltipKeybind>
               </div>
-              <div
-                class="flex items-center"
-                classList={{
-                  "opacity-0 pointer-events-none": !showShare(),
-                }}
-                aria-hidden={!showShare()}
-              >
-                <Popover
-                  title={language.t("session.share.popover.title")}
-                  description={
-                    shareUrl()
-                      ? language.t("session.share.popover.description.shared")
-                      : language.t("session.share.popover.description.unshared")
-                  }
-                  trigger={
-                    <Tooltip class="shrink-0" value={language.t("command.session.share")}>
-                      <Button
-                        variant="secondary"
-                        classList={{ "rounded-r-none": shareUrl() !== undefined }}
-                        style={{ scale: 1 }}
-                      >
-                        {language.t("session.share.action.share")}
-                      </Button>
-                    </Tooltip>
-                  }
-                >
+              <Show when={showShare()}>
+                <div class="flex items-center">
+                  <Popover
+                    title={language.t("session.share.popover.title")}
+                    description={
+                      shareUrl()
+                        ? language.t("session.share.popover.description.shared")
+                        : language.t("session.share.popover.description.unshared")
+                    }
+                    triggerAs={Button}
+                    triggerProps={{
+                      variant: "secondary",
+                      classList: { "rounded-r-none": shareUrl() !== undefined },
+                      style: { scale: 1 },
+                    }}
+                    trigger={language.t("session.share.action.share")}
+                  >
                   <div class="flex flex-col gap-2">
                     <Show
                       when={shareUrl()}
@@ -322,10 +321,12 @@ export function SessionHeader() {
                       class="rounded-l-none"
                       onClick={copyLink}
                       disabled={state.unshare}
+                      aria-label="Copy share link"
                     />
                   </Tooltip>
                 </Show>
-              </div>
+                </div>
+              </Show>
             </div>
           </Portal>
         )}

packages/app/src/components/session/session-sortable-tab.tsx

@@ -37,7 +37,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
           value={props.tab}
           closeButton={
             <Tooltip value={language.t("common.closeTab")} placement="bottom">
-              <IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} />
+              <IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} aria-label="Close tab" />
             </Tooltip>
           }
           hideCloseButton

packages/app/src/components/session/session-sortable-terminal-tab.tsx

@@ -139,6 +139,7 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
                 e.stopPropagation()
                 close()
               }}
+              aria-label="Close terminal"
             />
           }
         >