🔇 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/Chat/AddMultiConvo.tsx

@@ -43,7 +43,7 @@ function AddMultiConvo() {
       data-testid="parameters-button"
       className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
     >
-      <PlusCircle size={16} aria-label="Plus Icon" />
+      <PlusCircle size={16} aria-hidden="true" />
     </TooltipAnchor>
   );
 }

client/src/components/Chat/Input/Artifacts.tsx

@@ -66,7 +66,7 @@ function Artifacts() {
         setValue={handleToggle}
         label={localize('com_ui_artifacts')}
         isCheckedClassName="border-amber-600/40 bg-amber-500/10 hover:bg-amber-700/10"
-        icon={<WandSparkles className="icon-md" />}
+        icon={<WandSparkles className="icon-md" aria-hidden="true" />}
       />
 
       {isEnabled && (
@@ -79,7 +79,7 @@ function Artifacts() {
             )}
             onClick={(e) => e.stopPropagation()}
           >
-            <ChevronDown className="ml-1 h-4 w-4 text-text-secondary md:ml-0" />
+            <ChevronDown className="ml-1 h-4 w-4 text-text-secondary md:ml-0" aria-hidden="true" />
           </Ariakit.MenuButton>
 
           <Ariakit.Menu

client/src/components/Chat/Input/ArtifactsSubMenu.tsx

@@ -62,9 +62,9 @@ const ArtifactsSubMenu = React.forwardRef<HTMLDivElement, ArtifactsSubMenuProps>
             }
           >
             <div className="flex items-center gap-2">
-              <WandSparkles className="icon-md" />
+              <WandSparkles className="icon-md" aria-hidden="true" />
               <span>{localize('com_ui_artifacts')}</span>
-              {isEnabled && <ChevronRight className="ml-auto h-3 w-3" />}
+              {isEnabled && <ChevronRight className="ml-auto h-3 w-3" aria-hidden="true" />}
             </div>
             <button
               type="button"

client/src/components/Chat/Input/CodeInterpreter.tsx

@@ -29,7 +29,7 @@ function CodeInterpreter() {
         setValue={debouncedChange}
         label={localize('com_assistants_code_interpreter')}
         isCheckedClassName="border-purple-600/40 bg-purple-500/10 hover:bg-purple-700/10"
-        icon={<TerminalSquareIcon className="icon-md" />}
+        icon={<TerminalSquareIcon className="icon-md" aria-hidden="true" />}
       />
     )
   );

client/src/components/Chat/Input/CollapseChat.tsx

@@ -41,9 +41,9 @@ const CollapseChat = ({
             )}
           >
             {isCollapsed ? (
-              <ChevronUp className="h-full w-full" />
+              <ChevronUp className="h-full w-full" aria-hidden="true" />
             ) : (
-              <ChevronDown className="h-full w-full" />
+              <ChevronDown className="h-full w-full" aria-hidden="true" />
             )}
           </button>
         }

client/src/components/Chat/Input/Files/SourceIcon.tsx

@@ -33,7 +33,7 @@ export default function SourceIcon({
     return (
       <div className={cn(className, sourceToClassname[FileSources.execute_code] ?? '')}>
         <span className="flex items-center justify-center">
-          <Terminal className="h-3 w-3" />
+          <Terminal className="h-3 w-3" aria-hidden="true" />
         </span>
       </div>
     );
@@ -43,7 +43,7 @@ export default function SourceIcon({
     return (
       <div className={cn(className, sourceToClassname[source] ?? '')}>
         <span className="flex items-center justify-center">
-          <Type className="h-3 w-3" />
+          <Type className="h-3 w-3" aria-hidden="true" />
         </span>
       </div>
     );
@@ -53,7 +53,7 @@ export default function SourceIcon({
     return (
       <div className={cn(className, sourceToClassname[source] ?? '')}>
         <span className="flex items-center justify-center">
-          <Database className="h-3 w-3" />
+          <Database className="h-3 w-3" aria-hidden="true" />
         </span>
       </div>
     );

client/src/components/Chat/Input/Files/Table/Columns.tsx

@@ -68,7 +68,7 @@ export const columns: ColumnDef<TFile>[] = [
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           {localize('com_ui_name')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" aria-hidden="true" />
         </Button>
       );
     },
@@ -107,7 +107,7 @@ export const columns: ColumnDef<TFile>[] = [
           className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
         >
           {localize('com_ui_date')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" aria-hidden="true" />
         </Button>
       );
     },
@@ -160,7 +160,7 @@ export const columns: ColumnDef<TFile>[] = [
       }
       return (
         <div className="flex flex-wrap items-center gap-2">
-          <Database className="icon-sm text-cyan-700" />
+          <Database className="icon-sm text-cyan-700" aria-hidden="true" />
           {localize('com_ui_host')}
         </div>
       );
@@ -204,7 +204,7 @@ export const columns: ColumnDef<TFile>[] = [
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           {localize('com_ui_size')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" aria-hidden="true" />
         </Button>
       );
     },

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -127,7 +127,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
               aria-label={localize('com_files_filter_by')}
               className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}
             >
-              <ListFilter className="size-3.5 sm:size-4" />
+              <ListFilter className="size-3.5 sm:size-4" aria-hidden="true" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent

client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx

@@ -41,9 +41,9 @@ export function SortFilterHeader<TData, TValue>({
           >
             <span>{title}</span>
             {column.getIsFiltered() ? (
-              <ListFilter className="icon-sm ml-2 text-muted-foreground/70" />
+              <ListFilter className="icon-sm ml-2 text-muted-foreground/70" aria-hidden="true" />
             ) : (
-              <ListFilter className="icon-sm ml-2 opacity-30" />
+              <ListFilter className="icon-sm ml-2 opacity-30" aria-hidden="true" />
             )}
             {(() => {
               const sortState = column.getIsSorted();
@@ -95,7 +95,10 @@ export function SortFilterHeader<TData, TValue>({
                       column.setFilterValue(value);
                     }}
                   >
-                    <ListFilter className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+                    <ListFilter
+                      className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+                      aria-hidden="true"
+                    />
                     {filterValue}
                   </DropdownMenuItem>
                 );
@@ -112,7 +115,7 @@ export function SortFilterHeader<TData, TValue>({
                 column.setFilterValue(undefined);
               }}
             >
-              <FilterX className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              <FilterX className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
               {localize('com_ui_show_all')}
             </DropdownMenuItem>
           )}

client/src/components/Chat/Input/HeaderOptions.tsx

@@ -58,7 +58,7 @@ export default function HeaderOptions({
                   data-testid="parameters-button"
                   className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
                 >
-                  <Settings2 size={16} aria-label="Settings/Parameters Icon" />
+                  <Settings2 size={16} aria-hidden="true" />
                 </TooltipAnchor>
               )}
             </div>

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -168,7 +168,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
       render: (props) => (
         <div {...props}>
           <div className="flex items-center gap-2">
-            <Globe className="icon-md" />
+            <Globe className="icon-md" aria-hidden="true" />
             <span>{localize('com_ui_web_search')}</span>
           </div>
           <div className="flex items-center gap-1">
@@ -188,7 +188,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
                 ref={searchMenuTriggerRef}
               >
                 <div className="h-4 w-4">
-                  <Settings className="h-4 w-4" />
+                  <Settings className="h-4 w-4" aria-hidden="true" />
                 </div>
               </button>
             )}
@@ -222,7 +222,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
       render: (props) => (
         <div {...props}>
           <div className="flex items-center gap-2">
-            <TerminalSquareIcon className="icon-md" />
+            <TerminalSquareIcon className="icon-md" aria-hidden="true" />
             <span>{localize('com_assistants_code_interpreter')}</span>
           </div>
           <div className="flex items-center gap-1">
@@ -242,7 +242,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
                 aria-label="Configure code interpreter"
               >
                 <div className="h-4 w-4">
-                  <Settings className="h-4 w-4" />
+                  <Settings className="h-4 w-4" aria-hidden="true" />
                 </div>
               </button>
             )}
@@ -310,7 +310,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
           )}
         >
           <div className="flex w-full items-center justify-center gap-2">
-            <Settings2 className="icon-md" />
+            <Settings2 className="icon-md" aria-hidden="true" />
           </div>
         </Ariakit.MenuButton>
       }

client/src/components/Chat/Input/WebSearch.tsx

@@ -29,7 +29,7 @@ function WebSearch() {
         setValue={debouncedChange}
         label={localize('com_ui_search')}
         isCheckedClassName="border-blue-600/40 bg-blue-500/10 hover:bg-blue-700/10"
-        icon={<Globe className="icon-md" />}
+        icon={<Globe className="icon-md" aria-hidden="true" />}
       />
     )
   );

client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx

@@ -45,7 +45,7 @@ const SettingsButton = ({
       aria-label={`${text} ${endpoint.label}`}
     >
       <div className="flex w-[28px] items-center gap-1 whitespace-nowrap transition-all duration-300 ease-in-out group-hover:w-auto group-focus/button:w-auto">
-        <SettingsIcon className="h-4 w-4 flex-shrink-0" />
+        <SettingsIcon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
         <span className="max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 ease-in-out group-hover:max-w-[100px] group-hover:opacity-100 group-focus/button:max-w-[100px] group-focus/button:opacity-100">
           {text}
         </span>

client/src/components/Chat/Menus/Endpoints/components/EndpointModelItem.tsx

@@ -51,7 +51,10 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
         ) : null}
         <span className="truncate text-left">{modelName}</span>
         {isGlobal && (
-          <EarthIcon className="ml-auto size-4 flex-shrink-0 self-center text-green-400" />
+          <EarthIcon
+            className="ml-auto size-4 flex-shrink-0 self-center text-green-400"
+            aria-hidden="true"
+          />
         )}
       </div>
       {isSelected && (

client/src/components/Chat/Menus/Endpoints/components/SearchResults.tsx

@@ -172,7 +172,9 @@ export function SearchResults({ results, localize, searchValue }: SearchResultsP
                         )}
                         <span>{modelName}</span>
                       </div>
-                      {isGlobal && <EarthIcon className="ml-auto size-4 text-green-400" />}
+                      {isGlobal && (
+                        <EarthIcon className="ml-auto size-4 text-green-400" aria-hidden="true" />
+                      )}
                       {selectedEndpoint === endpoint.value && selectedModel === modelId && (
                         <svg
                           width="16"

client/src/components/Chat/Menus/PresetsMenu.tsx

@@ -32,7 +32,7 @@ const PresetsMenu: FC = () => {
           data-testid="presets-button"
           className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
         >
-          <BookCopy size={16} aria-label="Preset Icon" />
+          <BookCopy size={16} aria-hidden="true" />
         </TooltipAnchor>
       </Trigger>
       <Portal>

client/src/components/Chat/Menus/UI/TitleButton.tsx

@@ -22,7 +22,7 @@ export default function TitleButton({ primaryText = '', secondaryText = '' }) {
           <span className="text-text-primary"> {primaryText} </span>
           {!!secondaryText && <span className="text-token-text-secondary">{secondaryText}</span>}
         </div>
-        <ChevronDown className="text-token-text-secondary size-4" />
+        <ChevronDown className="text-token-text-secondary size-4" aria-hidden="true" />
       </button>
     </Trigger>
   );

client/src/components/Chat/Messages/Content/AgentHandoff.tsx

@@ -74,6 +74,7 @@ const AgentHandoff: React.FC<AgentHandoffProps> = ({ name, args: _args = '' }) =
         {hasInfo && (
           <ChevronDown
             className={cn('ml-1 h-3 w-3 transition-transform', showInfo && 'rotate-180')}
+            aria-hidden="true"
           />
         )}
       </div>

client/src/components/Chat/Messages/Content/CancelledIcon.tsx

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 export default function CancelledIcon() {
   return (
     <div className="flex h-full w-full items-center justify-center rounded-full bg-transparent text-text-secondary">
-      <X className="size-4" />
+      <X className="size-4" aria-hidden="true" />
     </div>
   );
 }

client/src/components/Chat/Messages/Content/DialogImage.tsx

@@ -204,7 +204,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                 className="h-10 w-10 p-0 hover:bg-surface-hover"
                 aria-label={localize('com_ui_close')}
               >
-                <X className="size-7 sm:size-6" />
+                <X className="size-7 sm:size-6" aria-hidden="true" />
               </Button>
             }
           />
@@ -219,7 +219,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                     className="h-10 w-10 p-0"
                     aria-label={localize('com_ui_reset_zoom')}
                   >
-                    <RotateCcw className="size-6" />
+                    <RotateCcw className="size-6" aria-hidden="true" />
                   </Button>
                 }
               />
@@ -233,7 +233,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                   className="h-10 w-10 p-0"
                   aria-label={localize('com_ui_download')}
                 >
-                  <ArrowDownToLine className="size-6" />
+                  <ArrowDownToLine className="size-6" aria-hidden="true" />
                 </Button>
               }
             />
@@ -247,9 +247,9 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                   aria-label={imageDetailsLabel}
                 >
                   {isPromptOpen ? (
-                    <PanelLeftOpen className="size-7 sm:size-6" />
+                    <PanelLeftOpen className="size-7 sm:size-6" aria-hidden="true" />
                   ) : (
-                    <PanelLeftClose className="size-7 sm:size-6" />
+                    <PanelLeftClose className="size-7 sm:size-6" aria-hidden="true" />
                   )}
                 </Button>
               }
@@ -322,7 +322,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                 variant="ghost"
                 className="h-12 w-12 p-0"
               >
-                <X className="size-6" />
+                <X className="size-6" aria-hidden="true" />
               </Button>
             </div>
 

client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx

@@ -157,7 +157,7 @@ const EditTextPart = ({
       {part.type === ContentTypes.THINK && (
         <div className="mt-2 flex items-center gap-1.5 text-xs text-text-secondary">
           <span className="flex gap-2 rounded-lg bg-surface-tertiary px-1.5 py-1 font-medium">
-            <Lightbulb className="size-3.5" />
+            <Lightbulb className="size-3.5" aria-hidden="true" />
             {localize('com_ui_thoughts')}
           </span>
         </div>
@@ -165,7 +165,7 @@ const EditTextPart = ({
       {part.type !== ContentTypes.THINK && (
         <div className="mt-2 flex items-center gap-1.5 text-xs text-text-secondary">
           <span className="flex gap-2 rounded-lg bg-surface-tertiary px-1.5 py-1 font-medium">
-            <MessageSquare className="size-3.5" />
+            <MessageSquare className="size-3.5" aria-hidden="true" />
             {localize('com_ui_response')}
           </span>
         </div>

client/src/components/Chat/Messages/Content/Parts/Thinking.tsx

@@ -71,12 +71,16 @@ export const ThinkingButton = memo(
           )}
         >
           <span className="relative mr-1.5 inline-flex h-[18px] w-[18px] items-center justify-center">
-            <Lightbulb className="icon-sm absolute text-text-secondary opacity-100 transition-opacity group-hover/button:opacity-0" />
+            <Lightbulb
+              className="icon-sm absolute text-text-secondary opacity-100 transition-opacity group-hover/button:opacity-0"
+              aria-hidden="true"
+            />
             <ChevronDown
               className={cn(
                 'icon-sm absolute transform-gpu text-text-primary opacity-0 transition-all duration-300 group-hover/button:opacity-100',
                 isExpanded && 'rotate-180',
               )}
+              aria-hidden="true"
             />
           </span>
           {label}

client/src/components/Chat/Messages/Content/ProgressText.tsx

@@ -98,9 +98,9 @@ export default function ProgressText({
         <span className={showShimmer ? 'shimmer' : ''}>{text}</span>
         {hasInput &&
           (isExpanded ? (
-            <ChevronUp className="size-4 shrink-0 translate-y-[1px]" />
+            <ChevronUp className="size-4 shrink-0 translate-y-[1px]" aria-hidden="true" />
           ) : (
-            <ChevronDown className="size-4 shrink-0 translate-y-[1px]" />
+            <ChevronDown className="size-4 shrink-0 translate-y-[1px]" aria-hidden="true" />
           ))}
       </button>
     </Wrapper>

client/src/components/Chat/Messages/Content/ToolCall.tsx

@@ -236,7 +236,7 @@ export default function ToolCall({
             </Button>
           </div>
           <p className="flex items-center text-xs text-text-warning">
-            <TriangleAlert className="mr-1.5 inline-block h-4 w-4" />
+            <TriangleAlert className="mr-1.5 inline-block h-4 w-4" aria-hidden="true" />
             {localize('com_assistants_allow_sites_you_trust')}
           </p>
         </div>

client/src/components/Chat/Messages/Feedback.tsx

@@ -65,7 +65,7 @@ function FeedbackOptionButton({
       aria-label={label}
       aria-pressed={active}
     >
-      <Icon size="19" bold={active} />
+      <Icon size="19" bold={active} aria-hidden="true" />
       <span>{label}</span>
     </button>
   );

client/src/components/Chat/Messages/Fork.tsx

@@ -273,10 +273,10 @@ export default function Fork({
     {
       setting: ForkOptions.DIRECT_PATH,
       label: localize(optionLabels[ForkOptions.DIRECT_PATH]),
-      icon: <GitCommit className="h-full w-full rotate-90 p-2" />,
+      icon: <GitCommit className="h-full w-full rotate-90 p-2" aria-hidden="true" />,
       hoverTitle: (
         <>
-          <GitCommit className="h-5 w-5 rotate-90" />
+          <GitCommit className="h-5 w-5 rotate-90" aria-hidden="true" />
           {localize(optionLabels[ForkOptions.DIRECT_PATH])}
         </>
       ),
@@ -285,10 +285,10 @@ export default function Fork({
     {
       setting: ForkOptions.INCLUDE_BRANCHES,
       label: localize(optionLabels[ForkOptions.INCLUDE_BRANCHES]),
-      icon: <GitBranchPlus className="h-full w-full rotate-180 p-2" />,
+      icon: <GitBranchPlus className="h-full w-full rotate-180 p-2" aria-hidden="true" />,
       hoverTitle: (
         <>
-          <GitBranchPlus className="h-4 w-4 rotate-180" />
+          <GitBranchPlus className="h-4 w-4 rotate-180" aria-hidden="true" />
           {localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
         </>
       ),
@@ -297,10 +297,10 @@ export default function Fork({
     {
       setting: ForkOptions.TARGET_LEVEL,
       label: localize(optionLabels[ForkOptions.TARGET_LEVEL]),
-      icon: <ListTree className="h-full w-full p-2" />,
+      icon: <ListTree className="h-full w-full p-2" aria-hidden="true" />,
       hoverTitle: (
         <>
-          <ListTree className="h-5 w-5" />
+          <ListTree className="h-5 w-5" aria-hidden="true" />
           {`${localize(optionLabels[ForkOptions.TARGET_LEVEL])} (${localize('com_endpoint_default')})`}
         </>
       ),
@@ -333,7 +333,7 @@ export default function Fork({
             type="button"
             aria-label={localize('com_ui_fork')}
           >
-            <GitFork size="19" />
+            <GitFork size="19" aria-hidden="true" />
           </button>
         }
       />
@@ -360,7 +360,7 @@ export default function Fork({
                     className="flex h-5 w-5 cursor-help items-center rounded-full text-text-secondary"
                     aria-label={localize('com_ui_fork_info_button_label')}
                   >
-                    <InfoIcon />
+                    <InfoIcon aria-hidden="true" />
                   </button>
                 }
               />

client/src/components/Chat/Messages/SearchButtons.tsx

@@ -61,7 +61,7 @@ export default function SearchButtons({ message }: { message: TMessage }) {
         onClick={clickHandler}
         title={localize('com_ui_go_to_conversation')}
       >
-        <Link className="icon-sm" />
+        <Link className="icon-sm" aria-hidden="true" />
         {message.title}
       </button>
     </div>

client/src/components/Chat/TemporaryChat.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 import { TooltipAnchor } from '@librechat/client';
 import { MessageCircleDashed } from 'lucide-react';
 import { useRecoilState, useRecoilCallback } from 'recoil';
@@ -54,6 +53,7 @@ export function TemporaryChat() {
             {temporaryBadge.icon && (
               <temporaryBadge.icon
                 className={cn('relative h-5 w-5 md:h-4 md:w-4', !temporaryBadge.label && 'mx-auto')}
+                aria-hidden="true"
               />
             )}
           </button>