a11y: silence miscellaneous icons that should not be read by screen reader (#5723, #5724)

Author: kangabell

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

@@ -18,7 +18,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
       <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
         <span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
           <div className="icon-md">
-            <MessageCircleDashed className="icon-md" />
+            <MessageCircleDashed className="icon-md" aria-hidden="true" />
           </div>
         </span>
         <span className="text-token-text-secondary line-clamp-3 flex-1 py-0.5 font-semibold">

client/src/components/Endpoints/MinimalIcon.tsx

@@ -69,6 +69,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
     <div
       data-testid="convo-icon"
       title={name}
+      aria-hidden="true"
       style={{
         width: size,
         height: size,

client/src/components/Input/ModelSelect/TemporaryChat.tsx

@@ -43,7 +43,7 @@ export const TemporaryChat = () => {
     <div className="sticky bottom-0 border-none bg-surface-tertiary px-6 py-4 ">
       <div className="flex items-center">
         <div className={cn('flex flex-1 items-center gap-2', isActiveConvo && 'opacity-40')}>
-          <MessageCircleDashed className="icon-sm" />
+          <MessageCircleDashed className="icon-sm" aria-hidden="true" />
           <span className="text-sm text-text-primary">{localize('com_ui_temporary_chat')}</span>
         </div>
         <div className="ml-auto flex items-center">

client/src/components/Nav/Bookmarks/BookmarkNav.tsx

@@ -35,9 +35,9 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
             <div className="h-7 w-7 flex-shrink-0">
               <div className="relative flex h-full items-center justify-center rounded-full border border-border-medium bg-surface-primary-alt text-text-primary">
                 {tags.length > 0 ? (
-                  <BookmarkFilledIcon className="h-4 w-4" />
+                  <BookmarkFilledIcon className="h-4 w-4" aria-hidden="true" />
                 ) : (
-                  <BookmarkIcon className="h-4 w-4" />
+                  <BookmarkIcon className="h-4 w-4" aria-hidden="true" />
                 )}
               </div>
             </div>

client/src/components/Prompts/AdminSettings.tsx

@@ -153,7 +153,7 @@ const AdminSettings = () => {
             variant="outline"
             className="mr-2 h-10 w-fit gap-1 border transition-all dark:bg-transparent dark:hover:bg-surface-tertiary sm:m-0"
           >
-            <ShieldEllipsis className="cursor-pointer" />
+            <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
             <span className="hidden sm:flex">{localize('com_ui_admin')}</span>
           </Button>
         </OGDialogTrigger>

client/src/components/Prompts/Command.tsx

@@ -46,7 +46,7 @@ const Command = ({
   return (
     <div className="rounded-xl border border-border-light">
       <h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
-        <SquareSlash className="icon-sm" />
+        <SquareSlash className="icon-sm" aria-hidden="true" />
         <Input
           type="text"
           tabIndex={tabIndex}

client/src/components/Prompts/Description.tsx

@@ -43,7 +43,7 @@ const Description = ({
   return (
     <div className="rounded-xl border border-border-light">
       <h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
-        <Info className="icon-sm" />
+        <Info className="icon-sm" aria-hidden="true" />
         <Input
           type="text"
           tabIndex={tabIndex}

client/src/components/Prompts/Groups/CategoryIcon.tsx

@@ -48,5 +48,5 @@ export default function CategoryIcon({
   if (!IconComponent) {
     return null;
   }
-  return <IconComponent className={cn(colorClass, className)} />;
+  return <IconComponent className={cn(colorClass, className)} aria-hidden="true" />;
 }

client/src/components/Prompts/PromptVariables.tsx

@@ -30,7 +30,7 @@ const PromptVariables = ({
   return (
     <div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md ">
       <h3 className="flex items-center gap-2 py-2 text-lg font-semibold text-text-primary">
-        <Variable className="icon-sm" />
+        <Variable className="icon-sm" aria-hidden="true" />
         {localize('com_ui_variables')}
       </h3>
       <div className="flex flex-col space-y-4">

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

@@ -144,7 +144,7 @@ const AdminSettings = () => {
           variant={'outline'}
           className="btn btn-neutral border-token-border-light relative mb-4 h-9 w-full gap-1 rounded-lg font-medium"
         >
-          <ShieldEllipsis className="cursor-pointer" />
+          <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
           {localize('com_ui_admin_settings')}
         </Button>
       </OGDialogTrigger>