[Improvement]: A11y — associate labels with inputs across Settings, Agent, Git, Marketplace, and AI chat

apps/desktop/src/addons/builtin.agent-support/AgentSettings.tsx

@@ -134,10 +134,10 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
           <div className="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
             <div className="flex items-center justify-between mb-2">
               <div>
-                <h4 className="text-sm font-semibold text-white">AGENTS.md</h4>
-                <p className="text-[11px] text-[#555]">{t('agent.manual.desc')}</p>
+                <h4 id="agent-manual-title" className="text-sm font-semibold text-white">AGENTS.md</h4>
+                <p id="agent-manual-desc" className="text-[11px] text-[#555]">{t('agent.manual.desc')}</p>
               </div>
-              <button 
+              <button
                 onClick={() => handleSave('AGENTS.md')}
                 disabled={isSaving}
                 className="flex items-center gap-2 px-4 py-1.5 bg-white text-black text-[11px] font-bold rounded-lg hover:bg-white/90 transition-all disabled:opacity-50"
@@ -147,6 +147,8 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
               </button>
             </div>
             <textarea
+              aria-labelledby="agent-manual-title"
+              aria-describedby="agent-manual-desc"
               value={localContent}
               onChange={(e) => setLocalContent(e.target.value)}
               className="w-full h-[400px] bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl p-4 text-[13px] text-[#ccc] font-mono focus:border-blue-500/50 outline-none scrollbar-thin resize-none"
@@ -159,10 +161,10 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
           <div className="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
             <div className="flex items-center justify-between mb-2">
               <div>
-                <h4 className="text-sm font-semibold text-white">DESIGN.md</h4>
-                <p className="text-[11px] text-[#555]">{t('agent.design.desc')}</p>
+                <h4 id="agent-design-title" className="text-sm font-semibold text-white">DESIGN.md</h4>
+                <p id="agent-design-desc" className="text-[11px] text-[#555]">{t('agent.design.desc')}</p>
               </div>
-              <button 
+              <button
                 onClick={() => handleSave('DESIGN.md')}
                 disabled={isSaving}
                 className="flex items-center gap-2 px-4 py-1.5 bg-white text-black text-[11px] font-bold rounded-lg hover:bg-white/90 transition-all disabled:opacity-50"
@@ -172,6 +174,8 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
               </button>
             </div>
             <textarea
+              aria-labelledby="agent-design-title"
+              aria-describedby="agent-design-desc"
               value={localContent}
               onChange={(e) => setLocalContent(e.target.value)}
               className="w-full h-[400px] bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl p-4 text-[13px] text-[#ccc] font-mono focus:border-blue-500/50 outline-none scrollbar-thin resize-none"
@@ -184,10 +188,10 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
           <div className="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
             <div className="flex items-center justify-between mb-2">
               <div>
-                <h4 className="text-sm font-semibold text-white">USER.md</h4>
-                <p className="text-[11px] text-[#555]">{t('agent.user.desc')}</p>
+                <h4 id="agent-user-title" className="text-sm font-semibold text-white">USER.md</h4>
+                <p id="agent-user-desc" className="text-[11px] text-[#555]">{t('agent.user.desc')}</p>
               </div>
-              <button 
+              <button
                 onClick={() => handleSave('USER.md')}
                 disabled={isSaving}
                 className="flex items-center gap-2 px-4 py-1.5 bg-white text-black text-[11px] font-bold rounded-lg hover:bg-white/90 transition-all disabled:opacity-50"
@@ -197,6 +201,8 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
               </button>
             </div>
             <textarea
+              aria-labelledby="agent-user-title"
+              aria-describedby="agent-user-desc"
               value={localContent}
               onChange={(e) => setLocalContent(e.target.value)}
               className="w-full h-[400px] bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl p-4 text-[13px] text-[#ccc] font-mono focus:border-blue-500/50 outline-none scrollbar-thin resize-none"
@@ -301,26 +307,29 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
               {/* Keep Alive Setting */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <label className="text-[11px] font-bold text-[#888] uppercase tracking-wider">{t('agent.configuration.keepalive_label')}</label>
+                  <label htmlFor="agent-config-keepalive" className="text-[11px] font-bold text-[#888] uppercase tracking-wider">{t('agent.configuration.keepalive_label')}</label>
                   <span className="text-[11px] font-mono text-blue-400 font-bold bg-blue-500/10 px-2 py-0.5 rounded-full border border-blue-500/20">
                     {aiSettings.keepAlive || 5} {t('agent.configuration.keepalive_unit')}
                   </span>
                 </div>
                 <input
+                  id="agent-config-keepalive"
                   type="range"
                   min="5"
                   max="1440"
                   step="5"
                   value={aiSettings.keepAlive || 5}
                   onChange={(e) => updateAISettings({ keepAlive: parseInt(e.target.value) })}
+                  aria-describedby="agent-config-keepalive-desc"
+                  aria-valuetext={`${aiSettings.keepAlive || 5} ${t('agent.configuration.keepalive_unit')}`}
                   className="w-full h-1.5 bg-[#1a1a1a] rounded-lg appearance-none cursor-pointer accent-blue-500"
                 />
-                <div className="flex justify-between text-[10px] text-[#444] font-mono">
+                <div aria-hidden="true" className="flex justify-between text-[10px] text-[#444] font-mono">
                   <span>5m</span>
                   <span>12h</span>
                   <span>24h</span>
                 </div>
-                <p className="text-[11px] text-[#666]">{t('agent.configuration.keepalive_desc')}</p>
+                <p id="agent-config-keepalive-desc" className="text-[11px] text-[#666]">{t('agent.configuration.keepalive_desc')}</p>
 
                 <div className="p-3 bg-amber-500/5 border border-amber-500/20 rounded-xl flex gap-3">
                    <AlertCircle size={16} strokeWidth={1.5} className="text-amber-500 shrink-0 mt-0.5" />
@@ -371,11 +380,13 @@ const AgentSettings: React.FC<AgentSettingsProps> = ({ activeTab }) => {
           <div className="space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
             <div className="flex items-center justify-between mb-2">
               <div>
-                <h4 className="text-sm font-semibold text-white">MEMORY.md</h4>
-                <p className="text-[11px] text-[#555]">{t('agent.memory.desc')}</p>
+                <h4 id="agent-memory-title" className="text-sm font-semibold text-white">MEMORY.md</h4>
+                <p id="agent-memory-desc" className="text-[11px] text-[#555]">{t('agent.memory.desc')}</p>
               </div>
             </div>
-            <textarea 
+            <textarea
+              aria-labelledby="agent-memory-title"
+              aria-describedby="agent-memory-desc"
               value={memory || ""}
               readOnly
               className="w-full h-[400px] bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl p-4 text-[13px] text-[#555] font-mono focus:border-blue-500/50 outline-none scrollbar-thin resize-none cursor-default"

apps/desktop/src/addons/builtin.ai-assistant/AiChatComponent.tsx

@@ -906,6 +906,7 @@ const AiChatComponent: React.FC = () => {
               }
             }}
             disabled={isTyping}
+            aria-label={t('ai.input_placeholder')}
             placeholder={isTyping ? t('ai.waiting_ollama') : t('ai.input_placeholder')}
             className="w-full bg-[#111] text-white text-[13px] rounded-xl p-3 pb-12 border border-[#222] focus:outline-none focus:border-[#444] resize-none min-h-[100px] transition-all hover:border-[#333]"
           />

apps/desktop/src/addons/builtin.git-explorer/GitExplorerComponent.tsx

@@ -634,6 +634,7 @@ const GitExplorerComponent: React.FC = () => {
                                 if (ev.key === "Escape") setNewEntry(null);
                               }}
                               onBlur={handleCreateEntry}
+                              aria-label={newEntry.type === "file" ? t('git.explorer.new_file') : t('git.explorer.new_folder')}
                               className="bg-[#111] border border-white/10 rounded px-1.5 py-0.5 text-[11px] text-white focus:outline-none focus:border-white/20 w-full mr-2"
                             />
                           </div>
@@ -657,6 +658,7 @@ const GitExplorerComponent: React.FC = () => {
                           if (ev.key === "Escape") setNewEntry(null);
                         }}
                         onBlur={handleCreateEntry}
+                        aria-label={newEntry.type === "file" ? t('git.explorer.new_file') : t('git.explorer.new_folder')}
                         className="bg-[#111] border border-white/10 rounded px-1.5 py-0.5 text-[11px] text-white focus:outline-none focus:border-white/20 w-32"
                       />
                     </div>
@@ -714,6 +716,7 @@ const GitExplorerComponent: React.FC = () => {
             <div className="p-3 border-b border-[#1a1a1a]">
               <div className="relative">
                 <input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                  aria-label={t('search.title')}
                   className="w-full bg-[#141414] border border-[#222] rounded-lg h-8 pl-8 pr-3 text-[12px] text-white placeholder-[#444] focus:border-[#444] focus:outline-none transition-colors" placeholder={t('search.placeholder')} />
                 <Search size={13} className="absolute left-2.5 top-[9px] text-[#444]" />
               </div>
@@ -798,6 +801,7 @@ const GitExplorerComponent: React.FC = () => {
                   {branches.length > 6 && (
                     <div className="px-2 pt-2">
                       <input value={branchFilter} onChange={(e) => setBranchFilter(e.target.value)}
+                        aria-label={t('git.filter.branches')}
                         placeholder={t('git.filter.branches')}
                         className="w-full bg-[#0e0e0e] border border-[#222] rounded-md px-2 py-1 text-[11px] text-white placeholder-[#444] focus:outline-none focus:border-[#444]" />
                     </div>
@@ -826,6 +830,7 @@ const GitExplorerComponent: React.FC = () => {
                   <div className="border-t border-[#222] p-2 flex gap-1">
                     <input value={newBranchName} onChange={(e) => setNewBranchName(e.target.value)}
                       onKeyDown={(e) => { if (e.key === "Enter") handleCreateBranch(); }}
+                      aria-label={t('git.new_branch_aria_label')}
                       placeholder={t('git.new_branch')}
                       className="flex-1 bg-[#0e0e0e] border border-[#222] rounded-md px-2 py-1 text-[11px] text-white placeholder-[#444] focus:outline-none focus:border-[#444]" />
                     <button onClick={handleCreateBranch} disabled={!newBranchName.trim() || gitLoading}
@@ -839,6 +844,7 @@ const GitExplorerComponent: React.FC = () => {
             {/* Commit */}
             <div className="px-3 py-3 border-b border-[#1a1a1a]">
               <textarea value={commitMessage} onChange={(e) => setCommitMessage(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && e.ctrlKey) handleCommit(); }}
+                aria-label={t('git.commit_message_aria_label')}
                 placeholder={amendMode ? `${t('git.commit_placeholder')} (${t('git.action.amend')})` : t('git.commit_placeholder')}
                 className="w-full bg-[#141414] border border-[#222] rounded-xl p-2.5 text-[12px] text-white placeholder-[#444] focus:outline-none focus:border-[#444] resize-y min-h-[80px] max-h-[240px] transition-colors" />
               <div className="flex gap-1.5 mt-2">
@@ -953,6 +959,7 @@ const GitExplorerComponent: React.FC = () => {
                     <div className="px-3 pb-2 flex gap-1">
                       <input value={stashMessage} onChange={(e) => setStashMessage(e.target.value)}
                         onKeyDown={(e) => { if (e.key === "Enter") handleStash(); }}
+                        aria-label={t('git.stash_message_aria_label')}
                         placeholder={t('git.stash.placeholder')}
                         className="flex-1 bg-[#141414] border border-[#222] rounded-md px-2 py-1 text-[11px] text-white placeholder-[#444] focus:outline-none focus:border-[#444]" />
                       <button onClick={handleStash} disabled={gitLoading} title={t('git.action.stash')}

apps/desktop/src/api/builtin.l10n.ts

@@ -17,6 +17,7 @@ export function registerBuiltinTranslations() {
         'settings.general.exclude_desc': 'Configure glob patterns for excluding files and folders. For example, the File Explorer decides which files and folders to show or hide based on this setting.',
         'settings.general.exclude_add_pattern': 'Add Pattern',
         'settings.general.exclude_placeholder': 'e.g. **/node_modules',
+        'settings.general.exclude_aria_label': 'Add exclude pattern',
         'settings.ai': 'AI Assistant',
         'settings.application': 'Application',
         'settings.about': 'About',
@@ -76,6 +77,7 @@ export function registerBuiltinTranslations() {
         'marketplace.search_placeholder': 'Search by name...',
         'marketplace.filter_all': 'All ({count})',
         'marketplace.filter_installed': 'Installed ({count})',
+        'marketplace.filter_aria_label': 'Filter extensions',
         'marketplace.loading_catalog': 'Loading catalog...',
         'marketplace.no_extensions': 'No extensions found.',
         'marketplace.view_install': 'View & Install',
@@ -86,6 +88,9 @@ export function registerBuiltinTranslations() {
         'git.init_button': 'git init',
         'git.commit_placeholder': 'Commit message...',
         'git.commit_button': 'Commit',
+        'git.commit_message_aria_label': 'Commit message',
+        'git.new_branch_aria_label': 'New branch name',
+        'git.stash_message_aria_label': 'Stash message',
         'git.suggest_ai': 'Suggest with AI',
         'git.staged': 'Staged ({count})',
         'git.changes': 'Changes ({count})',
@@ -395,6 +400,7 @@ export function registerBuiltinTranslations() {
         'settings.general.exclude_desc': 'Configura patrones de glob para excluir archivos y carpetas. Por ejemplo, el Explorador de archivos decide qué archivos y carpetas mostrar u ocultar basándose en este ajuste.',
         'settings.general.exclude_add_pattern': 'Añadir Patrón',
         'settings.general.exclude_placeholder': 'ej. **/node_modules',
+        'settings.general.exclude_aria_label': 'Añadir patrón de exclusión',
         'settings.ai': 'Asistente IA',
         'settings.application': 'Aplicación',
         'settings.about': 'Acerca de',
@@ -454,6 +460,7 @@ export function registerBuiltinTranslations() {
         'marketplace.search_placeholder': 'Buscar por nombre...',
         'marketplace.filter_all': 'Todas ({count})',
         'marketplace.filter_installed': 'Instaladas ({count})',
+        'marketplace.filter_aria_label': 'Filtrar extensiones',
         'marketplace.loading_catalog': 'Cargando catálogo...',
         'marketplace.no_extensions': 'No se encontraron extensiones.',
         'marketplace.view_install': 'Ver e Instalar',
@@ -464,6 +471,9 @@ export function registerBuiltinTranslations() {
         'git.init_button': 'git init',
         'git.commit_placeholder': 'Mensaje de commit...',
         'git.commit_button': 'Commit',
+        'git.commit_message_aria_label': 'Mensaje de commit',
+        'git.new_branch_aria_label': 'Nombre de la nueva rama',
+        'git.stash_message_aria_label': 'Mensaje del stash',
         'git.suggest_ai': 'Sugerir con IA',
         'git.staged': 'Preparados ({count})',
         'git.changes': 'Cambios ({count})',

apps/desktop/src/components/MarketplaceView.tsx

@@ -291,13 +291,15 @@ const MarketplaceView: React.FC = () => {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder={t('marketplace.search_placeholder')}
+              aria-label={t('marketplace.search_placeholder')}
               className="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg py-2 pl-9 pr-4 text-[13px] text-white placeholder-[#555] focus:outline-none focus:border-[#555] transition-colors"
             />
             <Search size={14} className="absolute left-3 top-[10px] text-[#555]" />
           </div>
           <select
             value={filter}
             onChange={e => setFilter(e.target.value)}
+            aria-label={t('marketplace.filter_aria_label')}
             className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg px-4 text-[12px] text-[#aaa] focus:outline-none cursor-pointer"
           >
             <option value="all">{t('marketplace.filter_all', { count: catalog.length.toString() })}</option>