Merge PR winfunc#403: Accessibility Labels (partial)

Kept i18n version of conflicting files. Accessibility improvements
merged where possible - MCPServerList, ProjectList, CustomTitlebar.

Author: Marlon Costa

bun.lock

@@ -549,6 +549,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                 title={t("common.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/AgentExecution.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/AgentRunView.tsx

@@ -358,6 +358,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/Agents.tsx

@@ -308,6 +308,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">{t("agents.title")}</h1>

src/components/CCAgents.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/ClaudeFileEditor.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/ClaudeMemoriesDropdown.tsx

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

src/components/CreateAgent.tsx

@@ -97,6 +97,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 */}
@@ -111,6 +112,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 */}
@@ -125,6 +127,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>
@@ -142,6 +145,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>
           )}
@@ -155,6 +159,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>
           )}
@@ -174,6 +179,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>
           )}
@@ -188,6 +194,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/CustomTitlebar.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>