🛂 fix: Address Accessibility Issues - Axe Rating: Serious (#10607)

* feat: wrap main content of page in <main> tag for screen reader landmarks (439)

* feat: add italic on active convo when selected so that selection state does not rely on bg contrast ratio (562)

* feat: add border ring around SearchBar so that it passes focus contrast minimums (577)

* fix: hide decorative SVGs from screen readers (578)

* fix: stop clipping of focus outlines in My Files modal (593)

* feat: programmatically declare state of Temporary Chat toggle for screen readers (606)

* feat: add sr-only components to warn screen readers that footer links open in new tab (611)

* feat: add aria-labels to archived chat table buttons

* feat: add screen reader heading for prompt edit page (776)

* feat: increase contrast to threshold minimum for production tag in prompts advanced view (773)

* feat: increase contrast to thehold minimums for production tag and version card border highlights (770)

* fix: h2 now reads as 'control bar' to screen readers in edit prompt page (768)

* feat: add selected state tracking for simple / advanced toggle for screen readers (765)

* feat: add left padding to theme selector in prompts side nav panel so that focus outline doesnt clip

* feat: darken orange bg for warning toasts to hit 3:1 contrast minimum with white text (725)

* fix: return focus to triggering element on modal close for image preview in attach files panel (717)

* fix: hide SVG for AddMultiConvo button from screen readers (708)

* feat: add persistent label to Filter Memories... input in memory side panel

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

@@ -42,9 +42,9 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
                 data-testid="bookmark-menu"
               >
                 {tags.length > 0 ? (
-                  <BookmarkFilledIcon className="icon-lg text-text-primary" aria-hidden="true" />
+                  <BookmarkFilledIcon aria-hidden="true" className="icon-lg text-text-primary" />
                 ) : (
-                  <BookmarkIcon className="icon-lg text-text-primary" aria-hidden="true" />
+                  <BookmarkIcon aria-hidden="true" className="icon-lg text-text-primary" />
                 )}
               </MenuButton>
             }

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

@@ -41,7 +41,7 @@ const BookmarkNavItems: FC<{
           data-testid="bookmark-item-clear"
           handleSubmit={clear}
           selected={false}
-          icon={<CrossCircledIcon className="size-4" />}
+          icon={<CrossCircledIcon aria-hidden="true" className="size-4" />}
         />
         <BookmarkItem
           tag={localize('com_ui_no_bookmarks')}
@@ -65,7 +65,7 @@ const BookmarkNavItems: FC<{
             data-testid="bookmark-item-clear"
             handleSubmit={clear}
             selected={false}
-            icon={<CrossCircledIcon className="size-4" />}
+            icon={<CrossCircledIcon aria-hidden="true" className="size-4" />}
           />
         }
       />

client/src/components/Nav/NewChat.tsx

@@ -59,8 +59,11 @@ export default function NewChat({
               className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
               onClick={toggleNav}
             >
-              <Sidebar className="max-md:hidden" />
-              <MobileSidebar className="m-1 inline-flex size-10 items-center justify-center md:hidden" />
+              <Sidebar aria-hidden="true" className="max-md:hidden" />
+              <MobileSidebar
+                aria-hidden="true"
+                className="m-1 inline-flex size-10 items-center justify-center md:hidden"
+              />
             </Button>
           }
         />

client/src/components/Nav/SearchBar.tsx

@@ -110,11 +110,14 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
     <div
       ref={ref}
       className={cn(
-        'group relative mt-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-border-medium px-3 py-2 text-text-primary transition-colors duration-200 focus-within:bg-surface-hover hover:bg-surface-hover',
+        'group relative mt-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-2 border-transparent px-3 py-2 text-text-primary transition-all duration-200 focus-within:border-ring-primary focus-within:bg-surface-hover hover:bg-surface-hover',
         isSmallScreen === true ? 'mb-2 h-14 rounded-xl' : '',
       )}
     >
-      <Search className="absolute left-3 h-4 w-4 text-text-secondary group-focus-within:text-text-primary group-hover:text-text-primary" />
+      <Search
+        aria-hidden="true"
+        className="absolute left-3 h-4 w-4 text-text-secondary group-focus-within:text-text-primary group-hover:text-text-primary"
+      />
       <input
         type="text"
         ref={inputRef}

client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx

@@ -229,6 +229,7 @@ export default function ArchivedChatsTable({
                       })
                     }
                     title={localize('com_ui_unarchive')}
+                    aria-label={localize('com_ui_unarchive')}
                     disabled={unarchiveMutation.isLoading}
                   >
                     {unarchiveMutation.isLoading ? (
@@ -250,6 +251,7 @@ export default function ArchivedChatsTable({
                       setIsDeleteOpen(true);
                     }}
                     title={localize('com_ui_delete')}
+                    aria-label={localize('com_ui_delete')}
                   >
                     <TrashIcon className="size-4" aria-hidden="true" />
                   </Button>