Feature: add screen reader labels to icon-only buttons for accessibility

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "opcode",
@@ -58,6 +59,10 @@
         "typescript": "~5.6.2",
         "vite": "^6.0.3",
       },
+      "optionalDependencies": {
+        "@esbuild/linux-x64": "^0.25.6",
+        "@rollup/rollup-linux-x64-gnu": "^4.45.1",
+      },
     },
   },
   "trustedDependencies": [
@@ -139,7 +144,7 @@
 
     "@esbuild/linux-s390x": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "s390x" }, "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ=="],
 
-    "@esbuild/linux-x64": ["@esbuild/[email protected].5", "", { "os": "linux", "cpu": "x64" }, "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw=="],
+    "@esbuild/linux-x64": ["@esbuild/[email protected].12", "", { "os": "linux", "cpu": "x64" }, "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw=="],
 
     "@esbuild/netbsd-arm64": ["@esbuild/[email protected]", "", { "os": "none", "cpu": "arm64" }, "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw=="],
 
@@ -357,7 +362,7 @@
 
     "@rollup/rollup-linux-s390x-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "s390x" }, "sha512-QmNIAqDiEMEvFV15rsSnjoSmO0+eJLoKRD9EAa9rrYNwO/XRCtOGM3A5A0X+wmG+XRrw9Fxdsw+LnyYiZWWcVw=="],
 
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.43.0", "", { "os": "linux", "cpu": "x64" }, "sha512-jAHr/S0iiBtFyzjhOkAics/2SrXE092qyqEg96e90L3t9Op8OTzS6+IX0Fy5wCt2+KqeHAkti+eitV0wvblEoQ=="],
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.53.3", "", { "os": "linux", "cpu": "x64" }, "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w=="],
 
     "@rollup/rollup-linux-x64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-3yATWgdeXyuHtBhrLt98w+5fKurdqvs8B53LaoKD7P7H7FKOONLsBVMNl9ghPQZQuYcceV5CDyPfyfGpMWD9mQ=="],
 
@@ -1061,6 +1066,8 @@
 
     "decode-named-character-reference/character-entities": ["[email protected]", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
+    "esbuild/@esbuild/linux-x64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw=="],
+
     "hast-util-from-parse5/hastscript": ["[email protected]", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w=="],
 
     "hast-util-to-parse5/property-information": ["[email protected]", "", {}, "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig=="],
@@ -1087,6 +1094,8 @@
 
     "rehype-prism-plus/refractor": ["[email protected]", "", { "dependencies": { "@types/hast": "^2.0.0", "@types/prismjs": "^1.0.0", "hastscript": "^7.0.0", "parse-entities": "^4.0.0" } }, "sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og=="],
 
+    "rollup/@rollup/rollup-linux-x64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-jAHr/S0iiBtFyzjhOkAics/2SrXE092qyqEg96e90L3t9Op8OTzS6+IX0Fy5wCt2+KqeHAkti+eitV0wvblEoQ=="],
+
     "stringify-entities/character-entities-legacy": ["[email protected]", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
 
     "@uiw/react-markdown-preview/rehype-prism-plus/refractor": ["[email protected]", "", { "dependencies": { "@types/hast": "^2.0.0", "@types/prismjs": "^1.0.0", "hastscript": "^7.0.0", "parse-entities": "^4.0.0" } }, "sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og=="],

src/components/AgentExecution.tsx

@@ -549,6 +549,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                 title="Back"
               >
                 <ArrowLeft className="h-4 w-4" />
+                <span className="sr-only">Back</span>
               </Button>
               <div>
                 <h1 className="text-heading-1">{agent.name}</h1>

src/components/AgentRunView.tsx

@@ -257,6 +257,7 @@ export const AgentRunView: React.FC<AgentRunViewProps> = ({
               className="h-8 w-8"
             >
               <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">Back</span>
             </Button>
             <div className="flex items-center gap-2">
               {renderIcon(run.agent_icon)}

src/components/Agents.tsx

@@ -356,6 +356,7 @@ export const Agents: React.FC = () => {
                           <DropdownMenuTrigger asChild>
                             <Button variant="ghost" size="icon" className="h-8 w-8">
                               <ChevronDown className="w-4 h-4" />
+                              <span className="sr-only">Agent options</span>
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">

src/components/CCAgents.tsx

@@ -306,6 +306,7 @@ export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
                 className="h-8 w-8"
               >
                 <ArrowLeft className="h-4 w-4" />
+                <span className="sr-only">Back</span>
               </Button>
               <div>
                 <h1 className="text-heading-1">CC Agents</h1>

src/components/ClaudeCodeSession.tsx

@@ -1389,7 +1389,17 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                         transition={{ duration: 0.15 }}
                       >
                         <Button variant="ghost" size="icon" onClick={() => setQueuedPromptsCollapsed(prev => !prev)}>
-                          {queuedPromptsCollapsed ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+                          {queuedPromptsCollapsed ? (
+                            <>
+                              <ChevronUp className="h-3 w-3" />
+                              <span className="sr-only">Expand queue</span>
+                            </>
+                          ) : (
+                            <>
+                              <ChevronDown className="h-3 w-3" />
+                              <span className="sr-only">Collapse queue</span>
+                            </>
+                          )}
                         </Button>
                       </motion.div>
                     </TooltipSimple>
@@ -1423,6 +1433,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                           onClick={() => setQueuedPrompts(prev => prev.filter(p => p.id !== queuedPrompt.id))}
                         >
                           <X className="h-3 w-3" />
+                          <span className="sr-only">Remove from queue</span>
                         </Button>
                       </motion.div>
                     </motion.div>
@@ -1458,7 +1469,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                           top: 0,
                           behavior: 'smooth'
                         });
-                        
+
                         // After smooth scroll completes, trigger a small scroll to ensure rendering
                         setTimeout(() => {
                           if (parentRef.current) {
@@ -1476,6 +1487,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                       className="px-3 py-2 hover:bg-accent rounded-none"
                     >
                       <ChevronUp className="h-4 w-4" />
+                      <span className="sr-only">Scroll to top</span>
                     </Button>
                   </motion.div>
                 </TooltipSimple>
@@ -1509,6 +1521,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                       className="px-3 py-2 hover:bg-accent rounded-none"
                     >
                       <ChevronDown className="h-4 w-4" />
+                      <span className="sr-only">Scroll to bottom</span>
                     </Button>
                   </motion.div>
                 </TooltipSimple>
@@ -1542,6 +1555,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                           className="h-9 w-9 text-muted-foreground hover:text-foreground"
                         >
                           <GitBranch className={cn("h-3.5 w-3.5", showTimeline && "text-primary")} />
+                          <span className="sr-only">Session Timeline</span>
                         </Button>
                       </motion.div>
                     </TooltipSimple>
@@ -1560,6 +1574,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                               className="h-9 w-9 text-muted-foreground hover:text-foreground"
                             >
                               <Copy className="h-3.5 w-3.5" />
+                              <span className="sr-only">Copy conversation</span>
                             </Button>
                           </motion.div>
                         </TooltipSimple>
@@ -1602,6 +1617,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                         className="h-8 w-8 text-muted-foreground hover:text-foreground"
                       >
                         <Wrench className={cn("h-3.5 w-3.5", showSettings && "text-primary")} />
+                        <span className="sr-only">Checkpoint Settings</span>
                       </Button>
                     </motion.div>
                   </TooltipSimple>
@@ -1654,6 +1670,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                     className="h-8 w-8"
                   >
                     <X className="h-4 w-4" />
+                    <span className="sr-only">Close timeline</span>
                   </Button>
                 </div>
 

src/components/ClaudeFileEditor.tsx

@@ -110,6 +110,7 @@ export const ClaudeFileEditor: React.FC<ClaudeFileEditorProps> = ({
               className="h-8 w-8"
             >
               <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">Back</span>
             </Button>
             <div className="min-w-0 flex-1">
               <h2 className="text-lg font-semibold truncate">{file.relative_path}</h2>

src/components/ClaudeMemoriesDropdown.tsx

@@ -143,6 +143,7 @@ export const ClaudeMemoriesDropdown: React.FC<ClaudeMemoriesDropdownProps> = ({
                           }}
                         >
                           <Edit2 className="h-3 w-3" />
+                          <span className="sr-only">Edit file</span>
                         </Button>
                       </motion.div>
                     ))}

src/components/CreateAgent.tsx

@@ -139,6 +139,7 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
                   title="Back to Agents"
                 >
                   <ArrowLeft className="h-4 w-4" />
+                  <span className="sr-only">Back to Agents</span>
                 </Button>
               </motion.div>
               <div>

src/components/CustomTitlebar.tsx

@@ -95,6 +95,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
             {isHovered && (
               <X size={8} className="text-red-900 opacity-60 group-hover:opacity-100" />
             )}
+            <span className="sr-only">Close window</span>
           </button>
 
           {/* Minimize button */}
@@ -109,6 +110,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
             {isHovered && (
               <Minus size={8} className="text-yellow-900 opacity-60 group-hover:opacity-100" />
             )}
+            <span className="sr-only">Minimize window</span>
           </button>
 
           {/* Maximize button */}
@@ -123,6 +125,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
             {isHovered && (
               <Square size={6} className="text-green-900 opacity-60 group-hover:opacity-100" />
             )}
+            <span className="sr-only">Maximize window</span>
           </button>
         </div>
       </div>
@@ -148,6 +151,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <Bot size={16} />
+                <span className="sr-only">Agents</span>
               </motion.button>
             </TooltipSimple>
           )}
@@ -161,6 +165,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <BarChart3 size={16} />
+                <span className="sr-only">Usage Dashboard</span>
               </motion.button>
             </TooltipSimple>
           )}
@@ -180,6 +185,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <Settings size={16} />
+                <span className="sr-only">Settings</span>
               </motion.button>
             </TooltipSimple>
           )}
@@ -194,6 +200,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1"
               >
                 <MoreVertical size={16} />
+                <span className="sr-only">More options</span>
               </motion.button>
             </TooltipSimple>
 

src/components/FilePicker.tsx

@@ -381,6 +381,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({
               className="h-8 w-8"
             >
               <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">Navigate up</span>
             </Button>
             <span className="text-sm font-mono text-muted-foreground truncate max-w-[300px]">
               {relativePath}
@@ -393,6 +394,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({
             className="h-8 w-8"
           >
             <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
           </Button>
         </div>
       </div>

src/components/FloatingPromptInput.tsx

@@ -881,6 +881,7 @@ const FloatingPromptInputInner = (
                       className="h-8 w-8"
                     >
                       <Minimize2 className="h-4 w-4" />
+                      <span className="sr-only">Minimize</span>
                     </Button>
                   </motion.div>
                 </TooltipSimple>
@@ -1259,6 +1260,7 @@ const FloatingPromptInputInner = (
                         className="h-8 w-8 hover:bg-accent/50 transition-colors"
                       >
                         <Maximize2 className="h-3.5 w-3.5" />
+                        <span className="sr-only">Expand</span>
                       </Button>
                     </motion.div>
                   </TooltipSimple>
@@ -1279,9 +1281,15 @@ const FloatingPromptInputInner = (
                         )}
                       >
                         {isLoading ? (
-                          <Square className="h-4 w-4" />
+                          <>
+                            <Square className="h-4 w-4" />
+                            <span className="sr-only">Stop generation</span>
+                          </>
                         ) : (
-                          <Send className="h-4 w-4" />
+                          <>
+                            <Send className="h-4 w-4" />
+                            <span className="sr-only">Send message</span>
+                          </>
                         )}
                       </Button>
                     </motion.div>

src/components/MCPServerList.tsx

@@ -266,9 +266,15 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                 className="hover:bg-green-500/10 hover:text-green-600"
               >
                 {testingServer === server.name ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="sr-only">Testing connection</span>
+                  </>
                 ) : (
-                  <Play className="h-4 w-4" />
+                  <>
+                    <Play className="h-4 w-4" />
+                    <span className="sr-only">Test connection</span>
+                  </>
                 )}
               </Button>
               <Button
@@ -279,9 +285,15 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                 className="hover:bg-destructive/10 hover:text-destructive"
               >
                 {removingServer === server.name ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="sr-only">Removing server</span>
+                  </>
                 ) : (
-                  <Trash2 className="h-4 w-4" />
+                  <>
+                    <Trash2 className="h-4 w-4" />
+                    <span className="sr-only">Remove server</span>
+                  </>
                 )}
               </Button>
             </div>

src/components/ProjectList.tsx

@@ -206,6 +206,7 @@ export const ProjectList: React.FC<ProjectListProps> = ({
                   disabled={currentPage === 1}
                 >
                   <ChevronLeft className="h-4 w-4" />
+                  <span className="sr-only">Previous page</span>
                 </Button>
               </motion.div>
 
@@ -234,6 +235,7 @@ export const ProjectList: React.FC<ProjectListProps> = ({
                   disabled={currentPage === totalPages}
                 >
                   <ChevronRight className="h-4 w-4" />
+                  <span className="sr-only">Next page</span>
                 </Button>
               </motion.div>
             </div>

src/components/SessionOutputViewer.tsx

@@ -412,7 +412,17 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
                       onClick={() => setIsFullscreen(!isFullscreen)}
                       title="Fullscreen"
                     >
-                      {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+                      {isFullscreen ? (
+                        <>
+                          <Minimize2 className="h-4 w-4" />
+                          <span className="sr-only">Exit fullscreen</span>
+                        </>
+                      ) : (
+                        <>
+                          <Maximize2 className="h-4 w-4" />
+                          <span className="sr-only">Enter fullscreen</span>
+                        </>
+                      )}
                     </Button>
                     <Popover
                       trigger={
@@ -460,9 +470,11 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
                   title="Refresh output"
                 >
                   <RotateCcw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+                  <span className="sr-only">Refresh output</span>
                 </Button>
                 <Button variant="outline" size="sm" onClick={onClose}>
                   <X className="h-4 w-4" />
+                  <span className="sr-only">Close output viewer</span>
                 </Button>
               </div>
             </div>