🔇 a11y: Silence Unnecessary Icons for Screen Readers

.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -7,6 +7,13 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
+
+        Before submitting, please:
+        - Search existing [Issues and Discussions](https://github.com/danny-avila/LibreChat/discussions) to see if your bug has already been reported
+        - Use [Discussions](https://github.com/danny-avila/LibreChat/discussions) instead of Issues for:
+          - General inquiries
+          - Help with setup
+          - Questions about whether you're experiencing a bug
   - type: textarea
     id: what-happened
     attributes:
@@ -15,6 +22,23 @@ body:
       placeholder: Please give as many details as possible
     validations:
       required: true
+  - type: textarea
+    id: version-info
+    attributes:
+      label: Version Information
+      description: |
+        If using Docker, please run and provide the output of:
+        ```bash
+        docker images | grep librechat
+        ```
+
+        If running from source, please run and provide the output of:
+        ```bash
+        git rev-parse HEAD
+        ```
+      placeholder: Paste the output here
+    validations:
+      required: true
   - type: textarea
     id: steps-to-reproduce
     attributes:
@@ -39,7 +63,21 @@ body:
     id: logs
     attributes:
       label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      description: |
+        Please paste relevant logs that were created when reproducing the error.
+
+        Log locations:
+        - Docker: Project root directory ./logs
+        - npm: ./api/logs
+
+        There are two types of logs that can help diagnose the issue:
+        - debug logs (debug-YYYY-MM-DD.log)
+        - error logs (error-YYYY-MM-DD.log)
+
+        Error logs contain exact stack traces and are especially helpful, but both can provide valuable information.
+        Please only include the relevant portions of logs that correspond to when you reproduced the error.
+
+        For UI-related issues, browser console logs can be very helpful. You can provide these as screenshots or paste the text here.
       render: shell
   - type: textarea
     id: screenshots
@@ -53,4 +91,4 @@ body:
       description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/danny-avila/LibreChat/blob/main/.github/CODE_OF_CONDUCT.md)
       options:
         - label: I agree to follow this project's Code of Conduct
-          required: true
+          required: true

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>

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

@@ -221,7 +221,7 @@ export default function Parameters({
               onClick={handleResetParameters}
               className="btn btn-neutral flex w-full items-center justify-center gap-2 px-4 py-2 text-sm"
             >
-              <RotateCcw className="h-4 w-4" />
+              <RotateCcw className="h-4 w-4" aria-hidden="true" />
               {localize('com_ui_reset_var', localize('com_ui_model_parameters'))}
             </button>
           </div>

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

@@ -279,7 +279,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           onClick={() => setShowFiles(true)}
           aria-label={localize('com_sidepanel_manage_files')}
         >
-          <ArrowUpLeft className="h-4 w-4" />
+          <ArrowUpLeft className="h-4 w-4" aria-hidden="true" />
           <span className="ml-2">{localize('com_sidepanel_manage_files')}</span>
         </Button>
 

client/src/routes/Layouts/DashBreadcrumb.tsx

@@ -67,7 +67,7 @@ export default function DashBreadcrumb() {
               className="flex flex-row items-center gap-1"
               onClick={chatLinkHandler}
             >
-              <ArrowLeft className="icon-xs" />
+              <ArrowLeft className="icon-xs" aria-hidden="true" />
               <span className="hidden md:flex">{localize('com_ui_back_to_chat')}</span>
               <span className="flex md:hidden">{localize('com_ui_chat')}</span>
             </BreadcrumbLink>
@@ -98,7 +98,7 @@ export default function DashBreadcrumb() {
               className="flex flex-row items-center gap-1"
               onClick={promptsLinkHandler}
             >
-              <MessageSquareQuote className="h-4 w-4 dark:text-gray-300" />
+              <MessageSquareQuote className="h-4 w-4 dark:text-gray-300" aria-hidden="true" />
               {localize('com_ui_prompts')}
             </BreadcrumbLink>
           </BreadcrumbItem>