🔇 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>

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -115,7 +115,7 @@ const BookmarkTable = () => {
                   aria-label={localize('com_ui_bookmarks_new')}
                   onClick={() => setOpen(!open)}
                 >
-                  <BookmarkPlusIcon className="size-4" />
+                  <BookmarkPlusIcon className="size-4" aria-hidden="true" />
                   <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
                 </Button>
               </OGDialogTrigger>

client/src/components/SidePanel/Builder/ActionCallback.tsx

@@ -52,7 +52,11 @@ export default function ActionCallback({ action_id }: { action_id?: string }) {
               className={cn('h-8 rounded-md px-2', isCopying ? 'cursor-default' : '')}
               aria-label={localize('com_ui_copy_link')}
             >
-              {isCopying ? <CopyCheck className="size-4" /> : <Copy className="size-4" />}
+              {isCopying ? (
+                <CopyCheck className="size-4" aria-hidden="true" />
+              ) : (
+                <Copy className="size-4" aria-hidden="true" />
+              )}
             </Button>
           </div>
         </div>

client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx

@@ -118,7 +118,7 @@ const AssistantConversationStarters: React.FC<AssistantConversationStartersProps
                   onClick={handleAddStarter}
                   disabled={hasReachedMax}
                 >
-                  <Plus className="size-4" />
+                  <Plus className="size-4" aria-hidden="true" />
                 </TooltipAnchor>
               </div>
             )}
@@ -145,7 +145,7 @@ const AssistantConversationStarters: React.FC<AssistantConversationStartersProps
               className="absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
               onClick={() => handleDeleteStarter(index)}
             >
-              <X className="size-4" />
+              <X className="size-4" aria-hidden="true" />
             </TooltipAnchor>
           </div>
         ))}

client/src/components/SidePanel/Files/PanelColumns.tsx

@@ -20,7 +20,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
           aria-label={localize('com_ui_name')}
         >
           {localize('com_ui_name')}
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <ArrowUpDown className="ml-2 h-4 w-4" aria-hidden="true" />
         </Button>
       );
     },

client/src/components/SidePanel/MCP/MCPPanel.tsx

@@ -133,7 +133,7 @@ function MCPPanelContent() {
           size="sm"
           aria-label={localize('com_ui_back')}
         >
-          <ChevronLeft className="mr-1 h-4 w-4" />
+          <ChevronLeft className="mr-1 h-4 w-4" aria-hidden="true" />
           {localize('com_ui_back')}
         </Button>
 
@@ -173,7 +173,7 @@ function MCPPanelContent() {
             onClick={() => handleConfigRevoke(selectedServerNameForEditing)}
             aria-label={localize('com_ui_oauth_revoke')}
           >
-            <Trash2 className="h-4 w-4" />
+            <Trash2 className="h-4 w-4" aria-hidden="true" />
             {localize('com_ui_oauth_revoke')}
           </Button>
         )}

client/src/components/SidePanel/Memories/MemoryViewer.tsx

@@ -310,7 +310,7 @@ export default function MemoryViewer() {
                   className="w-full bg-transparent"
                   aria-label={localize('com_ui_create_memory')}
                 >
-                  <Plus className="size-4" aria-hidden />
+                  <Plus className="size-4" aria-hidden="true" />
                   {localize('com_ui_create_memory')}
                 </Button>
               </OGDialogTrigger>

client/src/components/SidePanel/Nav.tsx

@@ -74,7 +74,7 @@ function NavContent({ links, isCollapsed, resize }: Omit<NavProps, 'defaultActiv
                                 }
                               }}
                             >
-                              <link.icon className="mr-2 h-4 w-4" />
+                              <link.icon className="mr-2 h-4 w-4" aria-hidden="true" />
                               {localize(link.title)}
                               {link.label != null && link.label && (
                                 <span