fix(app): add aria-labels to titlebar and sidebar buttons (#9843)

2 files changed, 18 insertions, 7 deletions

diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 7e50687d5..67c012651 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -89,12 +89,12 @@ export function Titlebar() {
         <Show when={mac()}>
           <div class="w-[72px] h-full shrink-0" data-tauri-drag-region />
           <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
-            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} />
+            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} aria-label="Toggle menu" />
           </div>
         </Show>
         <Show when={!mac()}>
           <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
-            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} />
+            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} aria-label="Toggle menu" />
           </div>
         </Show>
         <TooltipKeybind
@@ -103,7 +103,13 @@ export function Titlebar() {
           title={language.t("command.sidebar.toggle")}
           keybind={command.keybind("sidebar.toggle")}
         >
-          <Button variant="ghost" class="group/sidebar-toggle size-6 p-0" onClick={layout.sidebar.toggle}>
+          <Button
+            variant="ghost"
+            class="group/sidebar-toggle size-6 p-0"
+            onClick={layout.sidebar.toggle}
+            aria-label="Toggle sidebar"
+            aria-expanded={layout.sidebar.opened()}
+          >
             <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
               <Icon
                 size="small"
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index d8e0d55f3..9d7cc9c71 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1573,7 +1573,7 @@ export default function Layout(props: ParentProps) {
             keybind={command.keybind("session.archive")}
             gutter={8}
           >
-            <IconButton icon="archive" variant="ghost" onClick={() => archiveSession(props.session)} />
+            <IconButton icon="archive" variant="ghost" onClick={() => archiveSession(props.session)} aria-label="Archive session" />
           </TooltipKeybind>
         </div>
       </div>
@@ -1749,7 +1749,7 @@ export default function Layout(props: ParentProps) {
                 >
                   <DropdownMenu open={menuOpen()} onOpenChange={setMenuOpen}>
                     <Tooltip value={language.t("common.moreOptions")} placement="top">
-                      <DropdownMenu.Trigger as={IconButton} icon="dot-grid" variant="ghost" class="size-6 rounded-md" />
+                      <DropdownMenu.Trigger as={IconButton} icon="dot-grid" variant="ghost" class="size-6 rounded-md" aria-label="More options" />
                     </Tooltip>
                     <DropdownMenu.Portal>
                       <DropdownMenu.Content
@@ -1797,6 +1797,7 @@ export default function Layout(props: ParentProps) {
                       variant="ghost"
                       class="size-6 rounded-md"
                       onClick={() => navigate(`/${slug()}/session`)}
+                      aria-label="New session"
                     />
                   </TooltipKeybind>
                 </div>
@@ -1881,9 +1882,11 @@ export default function Layout(props: ParentProps) {
         .slice(0, 2)
     }
 
+    const projectName = () => props.project.name || getFilename(props.project.worktree)
     const trigger = (
       <button
         type="button"
+        aria-label={projectName()}
         classList={{
           "flex items-center justify-center size-10 p-1 rounded-lg overflow-hidden transition-colors cursor-default": true,
           "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover": selected(),
@@ -2103,7 +2106,7 @@ export default function Layout(props: ParentProps) {
                     </div>
                   }
                 >
-                  <IconButton icon="plus" variant="ghost" size="large" onClick={chooseProject} />
+                  <IconButton icon="plus" variant="ghost" size="large" onClick={chooseProject} aria-label="Open project" />
                 </Tooltip>
               </div>
               <DragOverlay>
@@ -2117,7 +2120,7 @@ export default function Layout(props: ParentProps) {
               title={language.t("sidebar.settings")}
               keybind={command.keybind("settings.open")}
             >
-              <IconButton icon="settings-gear" variant="ghost" size="large" onClick={openSettings} />
+              <IconButton icon="settings-gear" variant="ghost" size="large" onClick={openSettings} aria-label="Settings" />
             </TooltipKeybind>
             <Tooltip placement={sidebarProps.mobile ? "bottom" : "right"} value={language.t("sidebar.help")}>
               <IconButton
@@ -2125,6 +2128,7 @@ export default function Layout(props: ParentProps) {
                 variant="ghost"
                 size="large"
                 onClick={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+                aria-label="Help"
               />
             </Tooltip>
           </div>
@@ -2175,6 +2179,7 @@ export default function Layout(props: ParentProps) {
                           icon="dot-grid"
                           variant="ghost"
                           class="shrink-0 size-6 rounded-md opacity-0 group-hover/project:opacity-100 data-[expanded]:opacity-100 data-[expanded]:bg-surface-base-active"
+                          aria-label="Project options"
                         />
                         <DropdownMenu.Portal>
                           <DropdownMenu.Content class="mt-1">