🔇 fix: Hide Button Icons from Screen Readers (#10776)

If you've got a screen reader that is reading out the whole page,
each icon button (i.e., `<button><SVG></button>`) will have both
the button's aria-label read out as well as the title from the
SVG (which is usually just "image").

Since we are pretty good about setting aria-labels, we should instead
use `aria-hidden="true"` on these images, since they are not useful
to be read out.

I don't consider this a comprehensive review of all icons in the app,
but I knocked out all the low hanging fruit in this commit.

client/src/components/SidePanel/Agents/Advanced/AdvancedPanel.tsx

@@ -35,7 +35,7 @@ export default function AdvancedPanel() {
             aria-label={localize('com_ui_back_to_builder')}
           >
             <div className="advanced-panel-content flex w-full items-center justify-center gap-2">
-              <ChevronLeft />
+              <ChevronLeft aria-hidden="true" />
             </div>
           </button>
         </div>

client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx

@@ -150,7 +150,7 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
                   0: getAgentDetails(agentId)?.name || localize('com_ui_agent'),
                 })}
               >
-                <X size={18} className="text-text-secondary" />
+                <X size={18} className="text-text-secondary" aria-hidden="true" />
               </button>
             </div>
             {idx < agentIds.length - 1 && (

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -512,7 +512,7 @@ export default function AgentPanel() {
                   localize('com_ui_agent')
                 }
               >
-                <Plus className="mr-1 h-4 w-4" />
+                <Plus className="mr-1 h-4 w-4" aria-hidden="true" />
                 {localize('com_ui_create') +
                   ' ' +
                   localize('com_ui_new') +

client/src/components/SidePanel/Agents/Code/Action.tsx

@@ -87,7 +87,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
                 onClick={() => setIsDialogOpen(true)}
                 aria-label={localize('com_ui_add_api_key')}
               >
-                <KeyRoundIcon className="h-5 w-5 text-text-primary" />
+                <KeyRoundIcon className="h-5 w-5 text-text-primary" aria-hidden="true" />
               </button>
             )}
             <HoverCardTrigger>

client/src/components/SidePanel/Agents/MCPTool.tsx

@@ -291,7 +291,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
                           <Ariakit.VisuallyHidden>
                             {localize('com_ui_tool_more_info')}
                           </Ariakit.VisuallyHidden>
-                          <ChevronDown className="h-4 w-4" />
+                          <ChevronDown className="h-4 w-4" aria-hidden="true" />
                         </Ariakit.HovercardDisclosure>
                       </div>
                       <Ariakit.Hovercard

client/src/components/SidePanel/Agents/Search/InputSection.tsx

@@ -114,9 +114,15 @@ export default function InputSection({
                 >
                   <div className="relative h-4 w-4">
                     {passwordVisibility[name] ? (
-                      <EyeOff className="absolute inset-0 h-4 w-4 duration-200 animate-in fade-in" />
+                      <EyeOff
+                        className="absolute inset-0 h-4 w-4 duration-200 animate-in fade-in"
+                        aria-hidden="true"
+                      />
                     ) : (
-                      <Eye className="absolute inset-0 h-4 w-4 duration-200 animate-in fade-in" />
+                      <Eye
+                        className="absolute inset-0 h-4 w-4 duration-200 animate-in fade-in"
+                        aria-hidden="true"
+                      />
                     )}
                   </div>
                 </button>