🔇 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/Prompts/AdminSettings.tsx

@@ -208,7 +208,7 @@ const AdminSettings = () => {
                             className="inline-flex items-center text-blue-500 underline"
                           >
                             {localize('com_ui_more_info')}
-                            <ExternalLink size={16} className="ml-1" />
+                            <ExternalLink size={16} className="ml-1" aria-hidden="true" />
                           </a>
                         </div>
                       </>

client/src/components/Prompts/BackToChat.tsx

@@ -19,7 +19,7 @@ export default function BackToChat({ className }: { className?: string }) {
       href="/"
       onClick={clickHandler}
     >
-      <ArrowLeft className="icon-xs mr-2" />
+      <ArrowLeft className="icon-xs mr-2" aria-hidden="true" />
       {localize('com_ui_back_to_chat')}
     </a>
   );

client/src/components/Prompts/DeleteVersion.tsx

@@ -28,7 +28,7 @@ const DeleteConfirmDialog = ({
             e.stopPropagation();
           }}
         >
-          <Trash2 className="size-5 cursor-pointer text-white" />
+          <Trash2 className="size-5 cursor-pointer text-white" aria-hidden="true" />
         </Button>
       </OGDialogTrigger>
       <OGDialogTemplate

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

@@ -36,7 +36,7 @@ export default function List({
             onClick={() => navigate('/d/prompts/new')}
             aria-label={localize('com_ui_create_prompt')}
           >
-            <Plus className="size-4" aria-hidden />
+            <Plus className="size-4" aria-hidden="true" />
             {localize('com_ui_create_prompt')}
           </Button>
         </div>

client/src/components/Prompts/PromptForm.tsx

@@ -130,7 +130,7 @@ const RightPanel = React.memo(
                   !canEdit
                 }
               >
-                <Rocket className="size-5 cursor-pointer text-white" />
+                <Rocket className="size-5 cursor-pointer text-white" aria-hidden="true" />
               </Button>
             )}
             <DeleteVersion
@@ -422,7 +422,7 @@ const PromptForm = () => {
                         onClick={() => setShowSidePanel(true)}
                         aria-label={localize('com_endpoint_open_menu')}
                       >
-                        <Menu className="size-5" />
+                        <Menu className="size-5" aria-hidden="true" />
                       </Button>
                       <div className="hidden lg:block">
                         {editorMode === PromptsEditorMode.SIMPLE && (

client/src/components/Prompts/SharePrompt.tsx

@@ -60,7 +60,7 @@ const SharePrompt = React.memo(
           className="h-10 w-10 border border-transparent bg-blue-500/90 p-0.5 transition-all hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-800"
           disabled={disabled}
         >
-          <Share2Icon className="size-5 cursor-pointer text-white" />
+          <Share2Icon className="size-5 cursor-pointer text-white" aria-hidden="true" />
         </Button>
       </GenericGrantAccessDialog>
     );