🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)

* feat: add light/dark differentiation on text color for login footer links for more accessible contrast in light mode

* feat: add darker color focus ring on ThemeSelector in light mode for more accessible contrast

* feat: increase contrast on text color for rendered error messages in light and dark mode so that they pass the 4.5:1 accessibility contrast threshold against their backgrounds

* feat: add more accessible color vars to style.css for better contrast against light/dark backgrounds

* feat: un-nest DropdownMenu from ListCard and make them siblings instead for better accessibility

* feat: tweak --border-heavy in light mode so that it uses --gray-410 rather than --gray-400 so that the contrast ratio threshold is hit for accessibility

* feat: switch email and password input border to border-heavy for more accessible contrast on Login page

* fix: add proper focus ring for Action menu button in Prompts Sidenav

* fix: align light and dark focus rings with surrounding elements on preview/edit menu dropdown button in Prompt Card

* fix: remove aria-hidden on parent div with focusable child element according to accessibility guidelines

* fix: add missing aria-readonly false property that should have been in previous accessibility PR

* feat: add horizontal padding on rowRenderer's CellMeasurer div so that focus ring on rows doesnt clip behind virtualized table borders side-to-side

(still need to figure out vertical clipping on final row / a better solution to be able to get overflows to work properly within the virtualized table)

* feat: remove render prop override so that Share and Delete Buttons in Conversation dropdown can be pressed with Enter keystroke

* fix: undo additional colors and changes to --surface-hover

the initial changes came from a misunderstanding of contrast threshold requirements for hover effect accessibility

* feat: better layout for non-nested prompt card / action menu combination

* fix: add proper focus restoration behavior for Preview modal on close

* fix: undo change to --border-heavy in light mode

* fix: set borders for login input boxes back to light

* feat: add announcement for state change when link copied to clipboard in conversation share modal

* feat: add announcement to Refresh Link button

* feat: add announcement for archiving chats

* feat: make date sections in conversation history list <h2> rather than generic <div> for improved screen reader support

* feat: ensure Share Link modal is accessible at high zoom percentage and low viewport width / height requirements by adding max height and overflow attributes to allow scrolling

* feat: bold toast text so that it hits font size accessibility threshold (above 14 px when bolded - change makes text 16 px bold) so that the more disruptive contrast change of the toast background color is no longer necessary.

The background color would need to achieve a 4.5:1 contrast ratio, which would significantly affect the established aesthetic of the current toast system if achieved.

* fix: do not render side nav when it is hidden to avoid keyboard navigation with screen reader

* fix: add side nav button state change announcements and don't render components that were previosuly reachable via keyboard navigation while in the side nav

* feat: add tooltip anchor for Model Select

* fix: only hide the model selector, export, and temp chat buttons when in mobile view and the sidenav is expanded

* feat: add aria-haspopup support for MenuItems and add aria-haspopup: 'dialog' for Share and Delete buttons in ConvoOptions

* feat: add label for DataTable search so that it does not rely on placeholder attribute for function identification

* feat: make X buttons on dialogs 24x24px to achieve AA compliance

* feat: add announcements for the search bar for model selector

* feat: persistent label for DataTable

* feat: make filter files text contrast compliant

* feat: add non-color visual indicator to AudioRecorder listening state

* feat: add aria-expanded attribute to tool call dropdown for screen reader

* feat: add high contrast and rounded outlines for focus indicators on Run Code and Copy Code buttons for code blocks

* fix: change Button to anchor tag in Shared Links component when linking to original conversation

* fix: allow overflow in datatable cells so that focus indicators dont get cut off

* feat: round out focus outline for link name in SharedLinks modal

* feat: add aria-controls and aria-haspopup: "dialog" to SharedLinks delete button and modal

* feat: add aria-controls for dropdown menu items on ConvoOptions for share and delete modals

* feat: add trigger ref to 2FA button and modal in settings menu so focus returns to button on modal close

* feat: add refs so that open sidebar and close sidebar buttons transfer focus to one another

* chore: formatting

* feat: make sure settings modal is accessible at 200% zoom for screen size 1366x768 viewport

* feat: round out focus outline for link names in archived chats modal

* feat: add result announcements for screen reader in DataTable search

* feat: simplify layout for checkbox / api key components for better accessibility

* feat: return focus to chat input on prompt variables modal close

* feat: add persistent labels to TextareaAutosize Inputs in Variable form

* feat: tighten max width so side scrolling not necessary at 400% zoom for VariableForm modal

* feat: add persistent labels to prompt management page

* feat: announce results found for search bars in prompts page and improve them in datatable

* feat: de-nest DashGroupItem buttons in Prompts page to allow better navigation and comply with accessibility standard

* feat: add heading for new prompt creation page for screen readers

* feat: remove non-compliant description truncation for small screen sizes by making labels static on small enough viewport width

* feat: add mobile view sidebar for prompts page

* feat: add bolded text on select for AdvancedSwitch so that there is a visual indicator of selection and it does not rely solely on color as an indication of state

* feat: add persistent labels to ModelSelector search inputs

* feat: align aria-label with visual label for speech recognition users

* feat: make MemoryCreateDialog accessible at 400% zoom (introduce max viewport height attr and make scrollable)

* feat: add persistent label to Filter input for DataTable in file attach sidebar menu

* feat: add persistent label for bookmark filter input in bookmarks sidebar menu

* feat: add alert for screen readers for invalid inputs when editting bookmarks

* feat: bold font in BookmarkForm error readout to pass contrast compliance thresholds for 14pt text

* feat: align aria-label with visual label for BookmarkForm Ttile input

* feat: add 400% zoom support for ALL modals utilizing OriginalDialog to prevent clipping

* feat: remove state change on aria label and give consistent labelling for button, offload state change notification to the announcement div and make more assertive

* feat: add aria-labels which convey that the buttons are sortable (divergence from visual text because iconography is used to signify sort functionality)

* feat: add supplemental visuals to indicate link is clickable other than color in SharedLinks

* feat: increase saturation to hit contrast threshold minimums on Link color in SharedLinks

* feat: stop DataTable from disappearing at 400% zoom in SharedLinks

* feat: increase contrast to hit contrast threshold minimums on Animated Search Input visual indicators

* feat: add aria-label for AnimatedSearchInput (doesn't require explicit labelling because of Search icon)

* fix: stop long example variable declaration from clipping at high zoom in variables info

* feat: add aria-label to bettter describe sort button functionality for vision impaired users

* chore: remove unused translation key

* chore: address ESLint comments

* fix: modify test to account for new alert on theme toggle switch for login page

* chore: interpolate translation key

client/src/common/types.ts

@@ -568,6 +568,8 @@ export interface ModelItemProps {
 export type ContextType = {
   navVisible: boolean;
   setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  openSidebarRef?: React.RefObject<HTMLButtonElement>;
+  closeSidebarRef?: React.RefObject<HTMLButtonElement>;
 };
 
 export interface SwitcherProps {

client/src/components/Auth/Footer.tsx

@@ -11,7 +11,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
 
   const privacyPolicyRender = privacyPolicy?.externalUrl && (
     <a
-      className="text-sm text-green-500"
+      className="text-sm text-green-600 dark:text-green-500"
       href={privacyPolicy.externalUrl}
       target={privacyPolicy.openNewTab ? '_blank' : undefined}
       rel="noreferrer"
@@ -22,7 +22,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
 
   const termsOfServiceRender = termsOfService?.externalUrl && (
     <a
-      className="text-sm text-green-500"
+      className="text-sm text-green-600 dark:text-green-500"
       href={termsOfService.externalUrl}
       target={termsOfService.openNewTab ? '_blank' : undefined}
       rel="noreferrer"

client/src/components/Auth/LoginForm.tsx

@@ -51,7 +51,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
   const renderError = (fieldName: string) => {
     const errorMessage = errors[fieldName]?.message;
     return errorMessage ? (
-      <span role="alert" className="mt-1 text-sm text-red-500 dark:text-red-900">
+      <span role="alert" className="mt-1 text-sm text-red-600 dark:text-red-500">
         {String(errorMessage)}
       </span>
     ) : null;

client/src/components/Auth/__tests__/Registration.spec.tsx

@@ -191,12 +191,16 @@ test('shows validation error messages', async () => {
   await userEvent.type(getByTestId('password'), 'pass');
   await userEvent.type(getByTestId('confirm_password'), 'password1');
   const alerts = getAllByRole('alert');
-  expect(alerts).toHaveLength(5);
+  expect(alerts).toHaveLength(6);
-  expect(alerts[0]).toHaveTextContent(/Name must be at least 3 characters/i);
+
-  expect(alerts[1]).toHaveTextContent(/Username must be at least 2 characters/i);
+  // This first alert is for the theme toggle, which is empty within this test but still picked up by getAllByRole as an alert
-  expect(alerts[2]).toHaveTextContent(/You must enter a valid email address/i);
+  expect(alerts[0]).toHaveTextContent('');
-  expect(alerts[3]).toHaveTextContent(/Password must be at least 8 characters/i);
+
-  expect(alerts[4]).toHaveTextContent(/Passwords do not match/i);
+  expect(alerts[1]).toHaveTextContent(/Name must be at least 3 characters/i);
+  expect(alerts[2]).toHaveTextContent(/Username must be at least 2 characters/i);
+  expect(alerts[3]).toHaveTextContent(/You must enter a valid email address/i);
+  expect(alerts[4]).toHaveTextContent(/Password must be at least 8 characters/i);
+  expect(alerts[5]).toHaveTextContent(/Passwords do not match/i);
 });
 
 test('shows error message when registration fails', async () => {

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -100,9 +100,7 @@ const BookmarkForm = ({
           <Input
             type="text"
             id="bookmark-tag"
-            aria-label={
+            aria-label={localize('com_ui_bookmarks_title')}
-              bookmark ? localize('com_ui_bookmarks_edit') : localize('com_ui_bookmarks_new')
-            }
             {...register('tag', {
               required: localize('com_ui_field_required'),
               maxLength: {
@@ -124,8 +122,13 @@ const BookmarkForm = ({
             placeholder={
               bookmark ? localize('com_ui_bookmarks_edit') : localize('com_ui_bookmarks_new')
             }
+            aria-describedby={errors.tag ? 'bookmark-tag-error' : undefined}
           />
-          {errors.tag && <span className="text-sm text-red-500">{errors.tag.message}</span>}
+          {errors.tag && (
+            <span id="bookmark-tag-error" role="alert" className="text-sm font-bold text-red-500">
+              {errors.tag.message}
+            </span>
+          )}
         </div>
 
         <div className="mt-4 grid w-full items-center gap-2">

client/src/components/Chat/Header.tsx

@@ -17,7 +17,8 @@ const defaultInterface = getConfigDefaults().interface;
 
 export default function Header() {
   const { data: startupConfig } = useGetStartupConfig();
-  const { navVisible, setNavVisible } = useOutletContext<ContextType>();
+  const { navVisible, setNavVisible, openSidebarRef, closeSidebarRef } =
+    useOutletContext<ContextType>();
 
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
@@ -50,27 +51,38 @@ export default function Header() {
                 transition={{ duration: 0.2 }}
                 key="header-buttons"
               >
-                <OpenSidebar setNavVisible={setNavVisible} className="max-md:hidden" />
+                <OpenSidebar
+                  ref={openSidebarRef}
+                  setNavVisible={setNavVisible}
+                  closeSidebarRef={closeSidebarRef}
+                  className="max-md:hidden"
+                />
                 <HeaderNewChat />
               </motion.div>
             )}
           </AnimatePresence>
-
+          {!isSmallScreen && !navVisible && (
-          <div className={navVisible ? 'flex items-center gap-2' : 'ml-2 flex items-center gap-2'}>
+            <div
-            <ModelSelector startupConfig={startupConfig} />
+              className={`flex items-center gap-2 ${
-            {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
+                !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
-            {hasAccessToBookmarks === true && <BookmarkMenu />}
+              } `}
-            {hasAccessToMultiConvo === true && <AddMultiConvo />}
+            >
-            {isSmallScreen && (
+              <ModelSelector startupConfig={startupConfig} />
-              <>
+              {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
-                <ExportAndShareMenu
+              {hasAccessToBookmarks === true && <BookmarkMenu />}
-                  isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
+              {hasAccessToMultiConvo === true && <AddMultiConvo />}
-                />
+              {isSmallScreen && (
-                <TemporaryChat />
+                <>
-              </>
+                  <ExportAndShareMenu
-            )}
+                    isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
-          </div>
+                  />
+                  <TemporaryChat />
+                </>
+              )}
+            </div>
+          )}
         </div>
+
         {!isSmallScreen && (
           <div className="flex items-center gap-2">
             <ExportAndShareMenu

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

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+import { MicOff } from 'lucide-react';
 import { useToastContext, TooltipAnchor, ListeningIcon, Spinner } from '@librechat/client';
 import { useLocalize, useSpeechToText, useGetAudioSettings } from '~/hooks';
 import { useChatFormContext } from '~/Providers';
@@ -95,7 +96,7 @@ export default function AudioRecorder({
 
   const renderIcon = () => {
     if (isListening === true) {
-      return <ListeningIcon className="stroke-red-500" />;
+      return <MicOff className="stroke-red-500" />;
     }
     if (isLoading === true) {
       return <Spinner className="stroke-text-secondary" />;

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

@@ -114,12 +114,18 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           )}
           {!isSmallScreen && <span className="ml-2">{localize('com_ui_delete')}</span>}
         </Button>
-        <Input
+        <div className="relative flex-1">
-          placeholder={localize('com_files_filter')}
+          <Input
-          value={(table.getColumn('filename')?.getFilterValue() as string | undefined) ?? ''}
+            placeholder=" "
-          onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
+            value={(table.getColumn('filename')?.getFilterValue() as string | undefined) ?? ''}
-          className="flex-1 text-sm"
+            onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
-        />
+            className="peer w-full text-sm"
+            aria-label={localize('com_files_filter_input')}
+          />
+          <label className="absolute left-2 top-1/2 -translate-y-1/2 text-sm text-text-primary transition-all duration-200 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-top-2 peer-[:not(:placeholder-shown)]:text-xs">
+            {localize('com_files_filter')}
+          </label>
+        </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button

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

@@ -20,12 +20,14 @@ const PopoverContainer = memo(
     isVariableDialogOpen,
     variableGroup,
     setVariableDialogOpen,
+    textAreaRef,
   }: {
     index: number;
     children: React.ReactNode;
     isVariableDialogOpen: boolean;
     variableGroup: TPromptGroup | null;
     setVariableDialogOpen: (isOpen: boolean) => void;
+    textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
   }) => {
     const showPromptsPopover = useRecoilValue(store.showPromptsPopoverFamily(index));
     return (
@@ -33,7 +35,12 @@ const PopoverContainer = memo(
         {showPromptsPopover ? children : null}
         <VariableDialog
           open={isVariableDialogOpen}
-          onClose={() => setVariableDialogOpen(false)}
+          onClose={() => {
+            setVariableDialogOpen(false);
+            requestAnimationFrame(() => {
+              textAreaRef.current?.focus();
+            });
+          }}
           group={variableGroup}
         />
       </>
@@ -167,6 +174,7 @@ function PromptsCommand({
       isVariableDialogOpen={isVariableDialogOpen}
       variableGroup={variableGroup}
       setVariableDialogOpen={setVariableDialogOpen}
+      textAreaRef={textAreaRef}
     >
       <div className="absolute bottom-28 z-10 w-full space-y-2">
         <div className="popover border-token-border-light rounded-2xl border bg-surface-tertiary-alt p-2 shadow-lg">

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

@@ -9,6 +9,7 @@ export interface CustomMenuProps extends Ariakit.MenuButtonProps<'div'> {
   searchValue?: string;
   onSearch?: (value: string) => void;
   combobox?: Ariakit.ComboboxProps['render'];
+  comboboxLabel?: string;
   trigger?: Ariakit.MenuButtonProps['render'];
   defaultOpen?: boolean;
 }
@@ -22,6 +23,7 @@ export const CustomMenu = React.forwardRef<HTMLDivElement, CustomMenuProps>(func
     searchValue,
     onSearch,
     combobox,
+    comboboxLabel,
     trigger,
     defaultOpen,
     ...props
@@ -73,15 +75,22 @@ export const CustomMenu = React.forwardRef<HTMLDivElement, CustomMenuProps>(func
           {searchable ? (
             <>
               <div className="sticky top-0 z-10 bg-inherit p-1">
-                <Ariakit.Combobox
+                <div className="relative">
-                  autoSelect
+                  <Ariakit.Combobox
-                  render={combobox}
+                    autoSelect
-                  className={cn(
+                    render={combobox}
-                    'h-10 w-full rounded-lg border-none bg-transparent px-2 text-base',
+                    className={cn(
-                    'sm:h-8 sm:text-sm',
+                      'peer mt-1 h-10 w-full rounded-lg border-none bg-transparent px-2 text-base',
-                    'focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-white',
+                      'sm:h-8 sm:text-sm',
+                      'focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-white',
+                    )}
+                  />
+                  {comboboxLabel && (
+                    <label className="pointer-events-none absolute left-2.5 top-2.5 text-sm text-text-secondary transition-all duration-200 peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:left-1.5 peer-[:not(:placeholder-shown)]:bg-surface-secondary peer-[:not(:placeholder-shown)]:text-xs">
+                      {comboboxLabel}
+                    </label>
                   )}
-                />
+                </div>
               </div>
               <Ariakit.ComboboxList className="p-0.5 pt-0">{children}</Ariakit.ComboboxList>
             </>

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { TooltipAnchor } from '@librechat/client';
 import type { ModelSelectorProps } from '~/common';
 import { ModelSelectorProvider, useModelSelectorContext } from './ModelSelectorContext';
 import { ModelSelectorChatProvider } from './ModelSelectorChatContext';
@@ -59,17 +60,23 @@ function ModelSelectorContent() {
   );
 
   const trigger = (
-    <button
+    <TooltipAnchor
-      className="my-1 flex h-10 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-surface-secondary px-3 py-2 text-sm text-text-primary hover:bg-surface-tertiary"
       aria-label={localize('com_ui_select_model')}
-    >
+      description={localize('com_ui_select_model')}
-      {selectedIcon && React.isValidElement(selectedIcon) && (
+      render={
-        <div className="flex flex-shrink-0 items-center justify-center overflow-hidden">
+        <button
-          {selectedIcon}
+          className="my-1 flex h-10 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-surface-secondary px-3 py-2 text-sm text-text-primary hover:bg-surface-tertiary"
-        </div>
+          aria-label={localize('com_ui_select_model')}
-      )}
+        >
-      <span className="flex-grow truncate text-left">{selectedDisplayValue}</span>
+          {selectedIcon && React.isValidElement(selectedIcon) && (
-    </button>
+            <div className="flex flex-shrink-0 items-center justify-center overflow-hidden">
+              {selectedIcon}
+            </div>
+          )}
+          <span className="flex-grow truncate text-left">{selectedDisplayValue}</span>
+        </button>
+      }
+    />
   );
 
   return (
@@ -84,7 +91,8 @@ function ModelSelectorContent() {
           });
         }}
         onSearch={(value) => setSearchValue(value)}
-        combobox={<input placeholder={localize('com_endpoint_search_models')} />}
+        combobox={<input id="model-search" placeholder=" " />}
+        comboboxLabel={localize('com_endpoint_search_models')}
         trigger={trigger}
       >
         {searchResults ? (

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

@@ -127,7 +127,8 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
         defaultOpen={endpoint.value === selectedEndpoint}
         searchValue={searchValue}
         onSearch={(value) => setEndpointSearchValue(endpoint.value, value)}
-        combobox={<input placeholder={placeholder} />}
+        combobox={<input placeholder=" " />}
+        comboboxLabel={placeholder}
         label={
           <div
             onClick={() => handleSelectEndpoint(endpoint)}

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

@@ -34,14 +34,24 @@ export function SearchResults({ results, localize, searchValue }: SearchResultsP
   }
   if (!results.length) {
     return (
-      <div className="cursor-default p-2 sm:py-1 sm:text-sm">
+      <>
-        {localize('com_files_no_results')}
+        <div role="alert" aria-live="polite" className="sr-only">
-      </div>
+          {localize('com_files_no_results')}
+        </div>
+        <div className="cursor-default p-2 sm:py-1 sm:text-sm">
+          {localize('com_files_no_results')}
+        </div>
+      </>
     );
   }
 
   return (
     <>
+      <div role="alert" aria-live="polite" className="sr-only">
+        {results.length === 1
+          ? localize('com_files_result_found', { count: results.length })
+          : localize('com_files_results_found', { count: results.length })}
+      </div>
       {results.map((item, i) => {
         if ('name' in item && 'label' in item) {
           // Render model spec

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

@@ -1,38 +1,53 @@
+import { forwardRef } from 'react';
 import { TooltipAnchor, Button, Sidebar } from '@librechat/client';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
-export default function OpenSidebar({
+const OpenSidebar = forwardRef<
-  setNavVisible,
+  HTMLButtonElement,
-  className,
+  {
-}: {
+    setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    className?: string;
-  className?: string;
+    closeSidebarRef?: React.RefObject<HTMLButtonElement>;
-}) {
+  }
+>(({ setNavVisible, className, closeSidebarRef }, ref) => {
   const localize = useLocalize();
+
+  const handleClick = () => {
+    setNavVisible((prev) => {
+      localStorage.setItem('navVisible', JSON.stringify(!prev));
+      return !prev;
+    });
+    requestAnimationFrame(() => {
+      closeSidebarRef?.current?.focus();
+    });
+  };
+
   return (
     <TooltipAnchor
       description={localize('com_nav_open_sidebar')}
       render={
         <Button
+          ref={ref}
           size="icon"
           variant="outline"
           data-testid="open-sidebar-button"
           aria-label={localize('com_nav_open_sidebar')}
+          aria-expanded={false}
+          aria-controls="chat-history-nav"
           className={cn(
             'rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover',
             className,
           )}
-          onClick={() =>
+          onClick={handleClick}
-            setNavVisible((prev) => {
-              localStorage.setItem('navVisible', JSON.stringify(!prev));
-              return !prev;
-            })
-          }
         >
           <Sidebar aria-hidden="true" />
         </Button>
       }
     />
   );
-}
+});
+
+OpenSidebar.displayName = 'OpenSidebar';
+
+export default OpenSidebar;

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

@@ -93,6 +93,7 @@ export default function ProgressText({
         )}
         disabled={!hasInput}
         onClick={hasInput ? onClick : undefined}
+        aria-expanded={hasInput ? isExpanded : undefined}
       >
         {icon}
         <span className={showShimmer ? 'shimmer' : ''}>{text}</span>

client/src/components/Conversations/Conversations.tsx

@@ -33,9 +33,9 @@ LoadingSpinner.displayName = 'LoadingSpinner';
 const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
   const localize = useLocalize();
   return (
-    <div className="mt-2 pl-2 pt-1 text-text-secondary" style={{ fontSize: '0.7rem' }}>
+    <h2 className="mt-2 pl-2 pt-1 text-text-secondary" style={{ fontSize: '0.7rem' }}>
       {localize(groupName as TranslationKeys) || groupName}
-    </div>
+    </h2>
   );
 });
 
@@ -150,7 +150,7 @@ const Conversations: FC<ConversationsProps> = ({
       return (
         <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
           {({ registerChild }) => (
-            <div ref={registerChild} style={style}>
+            <div ref={registerChild} style={style} className="px-2">
               {rendering}
             </div>
           )}
@@ -199,6 +199,7 @@ const Conversations: FC<ConversationsProps> = ({
                 rowHeight={getRowHeight}
                 rowRenderer={rowRenderer}
                 overscanRowCount={10}
+                aria-readonly={false}
                 className="outline-none"
                 style={{ outline: 'none' }}
                 aria-label="Conversations"

client/src/components/Conversations/Convo.tsx

@@ -191,7 +191,9 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
             ? 'pointer-events-auto max-w-[28px] scale-x-100 opacity-100'
             : 'pointer-events-none max-w-0 scale-x-0 opacity-0 group-focus-within:pointer-events-auto group-focus-within:max-w-[28px] group-focus-within:scale-x-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:max-w-[28px] group-hover:scale-x-100 group-hover:opacity-100',
         )}
-        aria-hidden={!(isPopoverActive || isActiveConvo)}
+        // Removing aria-hidden to fix accessibility issue: ARIA hidden element must not be focusable or contain focusable elements
+        // but not sure what its original purpose was, so leaving the property commented out until it can be cleared safe to delete.
+        // aria-hidden={!(isPopoverActive || isActiveConvo)}
       >
         {!renaming && <ConvoOptions {...convoOptionsProps} />}
       </div>

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -47,6 +47,7 @@ function ConvoOptions({
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
 
   const archiveConvoMutation = useArchiveConvoMutation();
 
@@ -94,6 +95,10 @@ function ConvoOptions({
       { conversationId: convoId, isArchived: true },
       {
         onSuccess: () => {
+          setAnnouncement(localize('com_ui_convo_archived'));
+          setTimeout(() => {
+            setAnnouncement('');
+          }, 10000);
           if (currentConvoId === convoId || currentConvoId === 'new') {
             newConversation();
             navigate('/c/new', { replace: true });
@@ -137,7 +142,8 @@ function ConvoOptions({
         show: startupConfig && startupConfig.sharedLinksEnabled,
         hideOnClick: false,
         ref: shareButtonRef,
-        render: (props) => <button {...props} />,
+        ariaHasPopup: 'dialog' as const,
+        ariaControls: 'share-conversation-dialog',
       },
       {
         label: localize('com_ui_rename'),
@@ -170,7 +176,8 @@ function ConvoOptions({
         icon: <Trash className="icon-sm mr-2 text-text-primary" />,
         hideOnClick: false,
         ref: deleteButtonRef,
-        render: (props) => <button {...props} />,
+        ariaHasPopup: 'dialog' as const,
+        ariaControls: 'delete-conversation-dialog',
       },
     ],
     [
@@ -190,6 +197,9 @@ function ConvoOptions({
 
   return (
     <>
+      <span className="sr-only" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </span>
       <DropdownPopup
         portal={true}
         mountByState={true}

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -88,7 +88,7 @@ export function DeleteConversationDialog({
       <OGDialogHeader>
         <OGDialogTitle>{localize('com_ui_delete_conversation')}</OGDialogTitle>
       </OGDialogHeader>
-      <div className="w-full truncate">
+      <div id="delete-conversation-dialog" className="w-full truncate">
         <Trans
           i18nKey="com_ui_delete_confirm_strong"
           values={{ item: title }}

client/src/components/Conversations/ConvoOptions/ShareButton.tsx

@@ -26,7 +26,15 @@ export default function ShareButton({
   const [showQR, setShowQR] = useState(false);
   const [sharedLink, setSharedLink] = useState('');
   const [isCopying, setIsCopying] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
   const copyLink = useCopyToClipboard({ text: sharedLink });
+  const copyLinkAndAnnounce = (setIsCopying: React.Dispatch<React.SetStateAction<boolean>>) => {
+    setAnnouncement(localize('com_ui_link_copied'));
+    copyLink(setIsCopying);
+    setTimeout(() => {
+      setAnnouncement('');
+    }, 1000);
+  };
   const latestMessage = useRecoilValue(store.latestMessageFamily(0));
   const { data: share, isLoading } = useGetSharedLinkQuery(conversationId);
 
@@ -60,9 +68,9 @@ export default function ShareButton({
         showCloseButton={true}
         showCancelButton={false}
         title={localize('com_ui_share_link_to_chat')}
-        className="max-w-[550px]"
+        className="max-h-[90vh] max-w-[550px] overflow-y-auto"
         main={
-          <div>
+          <div id="share-conversation-dialog">
             <div className="h-full py-2 text-text-primary">
               {(() => {
                 if (isLoading === true) {
@@ -74,7 +82,7 @@ export default function ShareButton({
                   : localize('com_ui_share_create_message');
               })()}
             </div>
-            <div className="relative items-center rounded-lg p-2">
+            <div className="relative items-center overflow-auto rounded-lg p-2">
               {showQR && (
                 <div className="mb-4 flex flex-col items-center">
                   <QRCodeSVG
@@ -90,6 +98,9 @@ export default function ShareButton({
               {shareId && (
                 <div className="flex items-center gap-2 rounded-md bg-surface-secondary p-2">
                   <div className="flex-1 break-all text-sm text-text-secondary">{sharedLink}</div>
+                  <span className="sr-only" aria-live="polite" aria-atomic="true">
+                    {announcement}
+                  </span>
                   <Button
                     size="sm"
                     variant="outline"
@@ -98,7 +109,7 @@ export default function ShareButton({
                       if (isCopying) {
                         return;
                       }
-                      copyLink(setIsCopying);
+                      copyLinkAndAnnounce(setIsCopying);
                     }}
                     className={cn('shrink-0', isCopying ? 'cursor-default' : '')}
                   >

client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx

@@ -38,6 +38,7 @@ export default function SharedLinkButton({
   const localize = useLocalize();
   const { showToast } = useToastContext();
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
   const shareId = share?.shareId ?? '';
 
   const { mutateAsync: mutate, isLoading: isCreateLoading } = useCreateSharedLinkMutation({
@@ -85,6 +86,10 @@ export default function SharedLinkButton({
     const updateShare = await mutateAsync({ shareId });
     const newLink = generateShareLink(updateShare.shareId);
     setSharedLink(newLink);
+    setAnnouncement(localize('com_ui_link_refreshed'));
+    setTimeout(() => {
+      setAnnouncement('');
+    }, 1000);
   };
 
   const createShareLink = async () => {
@@ -129,19 +134,24 @@ export default function SharedLinkButton({
             <TooltipAnchor
               description={localize('com_ui_refresh_link')}
               render={(props) => (
-                <Button
+                <>
-                  {...props}
+                  <span className="sr-only" aria-live="polite" aria-atomic="true">
-                  onClick={() => updateSharedLink()}
+                    {announcement}
-                  aria-label={localize('com_ui_refresh_link')}
+                  </span>
-                  variant="outline"
+                  <Button
-                  disabled={isUpdateLoading}
+                    {...props}
-                >
+                    onClick={() => updateSharedLink()}
-                  {isUpdateLoading ? (
+                    variant="outline"
-                    <Spinner className="size-4" />
+                    disabled={isUpdateLoading}
-                  ) : (
+                    aria-label={localize('com_ui_refresh_link')}
-                    <RotateCw className="size-4" />
+                  >
-                  )}
+                    {isUpdateLoading ? (
-                </Button>
+                      <Spinner className="size-4" />
+                    ) : (
+                      <RotateCw className="size-4" />
+                    )}
+                  </Button>
+                </>
               )}
             />
 

client/src/components/Messages/Content/CodeBlock.tsx

@@ -36,7 +36,7 @@ const CodeBar: React.FC<CodeBarProps> = React.memo(
             <button
               type="button"
               className={cn(
-                'ml-auto flex gap-2',
+                'ml-auto flex gap-2 rounded-sm focus:outline focus:outline-white',
                 error === true ? 'h-4 w-4 items-start text-white/50' : '',
               )}
               onClick={async () => {

client/src/components/Messages/Content/RunCode.tsx

@@ -86,7 +86,7 @@ const RunCode: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, blockIndex
     <>
       <button
         type="button"
-        className={cn('ml-auto flex gap-2')}
+        className={cn('ml-auto flex gap-2 rounded-sm focus:outline focus:outline-white')}
         onClick={debouncedExecute}
         disabled={execute.isLoading}
       >

client/src/components/Nav/MobileNav.tsx

@@ -8,8 +8,8 @@ import { clearMessagesCache } from '~/utils';
 import store from '~/store';
 
 export default function MobileNav({
-  navVisible,
   setNavVisible,
+  navVisible,
 }: {
   navVisible: boolean;
   setNavVisible: Dispatch<SetStateAction<boolean>>;
@@ -25,8 +25,11 @@ export default function MobileNav({
       <button
         type="button"
         data-testid="mobile-header-new-chat-button"
-        aria-label={localize('com_nav_open_sidebar')}
+        aria-label={
-        className={`m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover ${navVisible ? 'invisible' : ''}`}
+          navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')
+        }
+        aria-live="polite"
+        className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
         onClick={() =>
           setNavVisible((prev) => {
             localStorage.setItem('navVisible', JSON.stringify(!prev));
@@ -34,7 +37,9 @@ export default function MobileNav({
           })
         }
       >
-        <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
+        <span className="sr-only">
+          {navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')}
+        </span>
         <svg
           width="24"
           height="24"

client/src/components/Nav/Nav.tsx

@@ -50,9 +50,13 @@ const Nav = memo(
   ({
     navVisible,
     setNavVisible,
+    openSidebarRef,
+    closeSidebarRef,
   }: {
     navVisible: boolean;
     setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    openSidebarRef?: React.RefObject<HTMLButtonElement>;
+    closeSidebarRef?: React.RefObject<HTMLButtonElement>;
   }) => {
     const localize = useLocalize();
     const { isAuthenticated } = useAuthContext();
@@ -207,32 +211,36 @@ const Nav = memo(
             >
               <div className="h-full w-[320px] md:w-[260px]">
                 <div className="flex h-full flex-col">
-                  <nav
+                  {navVisible && (
-                    id="chat-history-nav"
+                    <nav
-                    aria-label={localize('com_ui_chat_history')}
+                      id="chat-history-nav"
-                    className="flex h-full flex-col px-2 pb-3.5 md:px-3"
+                      aria-label={localize('com_ui_chat_history')}
-                  >
+                      className="flex h-full flex-col px-2 pb-3.5 md:px-3"
-                    <div className="flex flex-1 flex-col" ref={outerContainerRef}>
+                    >
-                      <MemoNewChat
+                      <div className="flex flex-1 flex-col" ref={outerContainerRef}>
-                        subHeaders={subHeaders}
+                        <MemoNewChat
-                        toggleNav={toggleNavVisible}
+                          subHeaders={subHeaders}
-                        headerButtons={headerButtons}
+                          toggleNav={toggleNavVisible}
-                        isSmallScreen={isSmallScreen}
+                          headerButtons={headerButtons}
-                      />
+                          isSmallScreen={isSmallScreen}
-                      <Conversations
+                          openSidebarRef={openSidebarRef}
-                        conversations={conversations}
+                          closeSidebarRef={closeSidebarRef}
-                        moveToTop={moveToTop}
+                        />
-                        toggleNav={itemToggleNav}
+                        <Conversations
-                        containerRef={listRef}
+                          conversations={conversations}
-                        loadMoreConversations={loadMoreConversations}
+                          moveToTop={moveToTop}
-                        isLoading={isFetchingNextPage || showLoading || isLoading}
+                          toggleNav={itemToggleNav}
-                        isSearchLoading={isSearchLoading}
+                          containerRef={listRef}
-                      />
+                          loadMoreConversations={loadMoreConversations}
-                    </div>
+                          isLoading={isFetchingNextPage || showLoading || isLoading}
-                    <Suspense fallback={null}>
+                          isSearchLoading={isSearchLoading}
-                      <AccountSettings />
+                        />
-                    </Suspense>
+                      </div>
-                  </nav>
+                      <Suspense fallback={null}>
+                        <AccountSettings />
+                      </Suspense>
+                    </nav>
+                  )}
                 </div>
               </div>
             </motion.div>

client/src/components/Nav/NewChat.tsx

@@ -13,12 +13,16 @@ export default function NewChat({
   subHeaders,
   isSmallScreen,
   headerButtons,
+  openSidebarRef,
+  closeSidebarRef,
 }: {
   index?: number;
   toggleNav: () => void;
   isSmallScreen?: boolean;
   subHeaders?: React.ReactNode;
   headerButtons?: React.ReactNode;
+  openSidebarRef?: React.RefObject<HTMLButtonElement>;
+  closeSidebarRef?: React.RefObject<HTMLButtonElement>;
 }) {
   const queryClient = useQueryClient();
   /** Note: this component needs an explicit index passed if using more than one */
@@ -27,6 +31,13 @@ export default function NewChat({
   const localize = useLocalize();
   const { conversation } = store.useCreateConversationAtom(index);
 
+  const handleToggleNav = useCallback(() => {
+    toggleNav();
+    requestAnimationFrame(() => {
+      openSidebarRef?.current?.focus();
+    });
+  }, [toggleNav, openSidebarRef]);
+
   const clickHandler: React.MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
       if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
@@ -51,12 +62,14 @@ export default function NewChat({
           description={localize('com_nav_close_sidebar')}
           render={
             <Button
+              ref={closeSidebarRef}
               size="icon"
               variant="outline"
               data-testid="close-sidebar-button"
               aria-label={localize('com_nav_close_sidebar')}
+              aria-expanded={true}
               className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
-              onClick={toggleNav}
+              onClick={handleToggleNav}
             >
               <Sidebar aria-hidden="true" className="max-md:hidden" />
               <MobileSidebar

client/src/components/Nav/Settings.tsx

@@ -152,7 +152,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
           <div className={cn('fixed inset-0 flex w-screen items-center justify-center p-4')}>
             <DialogPanel
               className={cn(
-                'min-h-[600px] overflow-hidden rounded-xl rounded-b-lg bg-background pb-6 shadow-2xl backdrop-blur-2xl animate-in sm:rounded-2xl md:min-h-[373px] md:w-[680px]',
+                'max-h-[90vh] overflow-hidden rounded-xl rounded-b-lg bg-background pb-6 shadow-2xl backdrop-blur-2xl animate-in sm:rounded-2xl md:w-[680px]',
               )}
             >
               <DialogTitle
@@ -185,7 +185,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                   <span className="sr-only">{localize('com_ui_close_settings')}</span>
                 </button>
               </DialogTitle>
-              <div className="max-h-[550px] overflow-auto px-6 md:max-h-[400px] md:min-h-[400px] md:w-[680px]">
+              <div className="max-h-[calc(90vh-120px)] overflow-auto px-6 md:w-[680px]">
                 <Tabs.Root
                   value={activeTab}
                   onValueChange={handleTabChange}

client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx

@@ -8,12 +8,14 @@ interface DisableTwoFactorToggleProps {
   enabled: boolean;
   onChange: () => void;
   disabled?: boolean;
+  buttonRef?: React.RefObject<HTMLButtonElement>;
 }
 
 export const DisableTwoFactorToggle: React.FC<DisableTwoFactorToggleProps> = ({
   enabled,
   onChange,
   disabled,
+  buttonRef,
 }) => {
   const localize = useLocalize();
 
@@ -24,9 +26,12 @@ export const DisableTwoFactorToggle: React.FC<DisableTwoFactorToggleProps> = ({
       </div>
       <div className="flex items-center gap-3">
         <Button
+          ref={buttonRef}
           variant={enabled ? 'destructive' : 'outline'}
           onClick={onChange}
           disabled={disabled}
+          aria-haspopup="dialog"
+          aria-controls="two-factor-authentication-dialog"
         >
           {enabled ? localize('com_ui_2fa_disable') : localize('com_ui_2fa_enable')}
         </Button>

client/src/components/Nav/SettingsTabs/Account/TwoFactorAuthentication.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { SmartphoneIcon } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -35,6 +35,7 @@ const TwoFactorAuthentication: React.FC = () => {
   const { user } = useAuthContext();
   const setUser = useSetRecoilState(store.user);
   const { showToast } = useToastContext();
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const [secret, setSecret] = useState<string>('');
   const [otpauthUrl, setOtpauthUrl] = useState<string>('');
@@ -197,16 +198,19 @@ const TwoFactorAuthentication: React.FC = () => {
           resetState();
         }
       }}
+      triggerRef={buttonRef}
     >
       <DisableTwoFactorToggle
         enabled={!!user?.twoFactorEnabled}
         onChange={() => setDialogOpen(true)}
         disabled={isVerifying || isDisabling || isGenerating}
+        buttonRef={buttonRef}
       />
 
       <OGDialogContent className="w-11/12 max-w-lg p-6">
         <AnimatePresence mode="wait">
           <motion.div
+            id="two-factor-authentication-dialog"
             key={phase}
             variants={phaseVariants}
             initial="initial"

client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx

@@ -2,7 +2,14 @@ import { useCallback, useState, useMemo, useEffect } from 'react';
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { Link } from 'react-router-dom';
-import { TrashIcon, MessageSquare, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+import {
+  TrashIcon,
+  MessageSquare,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ExternalLink,
+} from 'lucide-react';
 import type { SharedLinkItem, SharedLinksListParams } from 'librechat-data-provider';
 import {
   OGDialog,
@@ -169,6 +176,7 @@ export default function SharedLinks() {
               onClick={() =>
                 handleSort('title', isSorted && sortDirection === 'asc' ? 'desc' : 'asc')
               }
+              aria-label={localize('com_ui_name_sort')}
             >
               {localize('com_ui_name')}
               {isSorted && sortDirection === 'asc' && (
@@ -189,10 +197,14 @@ export default function SharedLinks() {
                 to={`/share/${shareId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="block truncate text-blue-500 hover:underline"
+                className="group flex items-center gap-1 truncate rounded-sm text-blue-600 underline decoration-1 underline-offset-2 hover:decoration-2 focus:outline-none focus:ring-2 focus:ring-ring"
                 title={title}
               >
-                {title}
+                <span className="truncate">{title}</span>
+                <ExternalLink
+                  className="size-3 flex-shrink-0 opacity-70 group-hover:opacity-100"
+                  aria-hidden="true"
+                />
               </Link>
             </div>
           );
@@ -214,6 +226,7 @@ export default function SharedLinks() {
               onClick={() =>
                 handleSort('createdAt', isSorted && sortDirection === 'asc' ? 'desc' : 'asc')
               }
+              aria-label={localize('com_ui_creation_date_sort')}
             >
               {localize('com_ui_date')}
               {isSorted && sortDirection === 'asc' && (
@@ -245,18 +258,15 @@ export default function SharedLinks() {
         },
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
+            <a
-              variant="ghost"
+              href={`/c/${row.original.conversationId}`}
-              className="h-8 w-8 p-0 hover:bg-surface-hover"
+              target="_blank"
-              onClick={() => {
+              rel="noopener noreferrer"
-                window.open(`/c/${row.original.conversationId}`, '_blank');
+              className="flex h-8 w-8 items-center justify-center rounded-md p-0 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-ring"
-              }}
+              aria-label={`${localize('com_ui_view_source')} - ${row.original.title || localize('com_ui_untitled')}`}
-              aria-label={localize('com_ui_view_source', {
-                title: row.original.title || localize('com_ui_untitled'),
-              })}
             >
               <MessageSquare className="size-4" aria-hidden="true" />
-            </Button>
+            </a>
             <Button
               variant="ghost"
               className="h-8 w-8 p-0 hover:bg-surface-hover"
@@ -267,6 +277,8 @@ export default function SharedLinks() {
               aria-label={localize('com_ui_delete_shared_link', {
                 title: row.original.title || localize('com_ui_untitled'),
               })}
+              aria-haspopup="dialog"
+              aria-controls="delete-shared-link-dialog"
             >
               <TrashIcon className="size-4" aria-hidden="true" />
             </Button>
@@ -318,7 +330,10 @@ export default function SharedLinks() {
           className="max-w-[450px]"
           main={
             <>
-              <div className="flex w-full flex-col items-center gap-2">
+              <div
+                id="delete-shared-link-dialog"
+                className="flex w-full flex-col items-center gap-2"
+              >
                 <div className="grid w-full items-center gap-2">
                   <Label htmlFor="dialog-confirm-delete" className="text-left text-sm font-medium">
                     {localize('com_ui_delete_confirm')} <strong>{deleteRow?.title}</strong>

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

@@ -160,7 +160,7 @@ export default function ArchivedChatsTable({
           return (
             <button
               type="button"
-              className="flex items-center gap-2 truncate"
+              className="flex items-center gap-2 truncate rounded-sm"
               onClick={() => window.open(`/c/${conversationId}`, '_blank')}
             >
               <MinimalIcon
@@ -190,6 +190,7 @@ export default function ArchivedChatsTable({
               onClick={() =>
                 handleSort('createdAt', isSorted && sortDirection === 'asc' ? 'desc' : 'asc')
               }
+              aria-label={localize('com_nav_archive_created_at_sort')}
             >
               {localize('com_nav_archive_created_at')}
               {isSorted && sortDirection === 'asc' && (

client/src/components/Prompts/AdvancedSwitch.tsx

@@ -32,9 +32,9 @@ const AdvancedSwitch = () => {
           }}
           aria-pressed={mode === PromptsEditorMode.SIMPLE}
           aria-label={localize('com_ui_simple')}
-          className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
+          className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm transition-all duration-300 md:px-6 ${
             mode === PromptsEditorMode.SIMPLE
-              ? 'text-text-primary'
+              ? 'font-bold text-text-primary'
               : 'text-text-secondary hover:text-text-primary'
           }`}
         >
@@ -47,9 +47,9 @@ const AdvancedSwitch = () => {
           onClick={() => setMode(PromptsEditorMode.ADVANCED)}
           aria-pressed={mode === PromptsEditorMode.ADVANCED}
           aria-label={localize('com_ui_advanced')}
-          className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
+          className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm transition-all duration-300 md:px-6 ${
             mode === PromptsEditorMode.ADVANCED
-              ? 'text-text-primary'
+              ? 'font-bold text-text-primary'
               : 'text-text-secondary hover:text-text-primary'
           }`}
         >

client/src/components/Prompts/Command.tsx

@@ -45,21 +45,37 @@ const Command = ({
 
   return (
     <div className="rounded-xl border border-border-light shadow-md">
-      <h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
+      <label
-        <SquareSlash className="icon-sm" aria-hidden="true" />
+        htmlFor="prompt-command"
-        <Input
+        className="block px-4 pt-2 text-sm text-text-secondary md:hidden"
-          type="text"
+      >
-          tabIndex={tabIndex}
+        {localize('com_ui_command_placeholder')}
-          disabled={disabled}
+      </label>
-          placeholder={localize('com_ui_command_placeholder')}
+      <div className="relative flex h-10 items-center gap-1 pl-4 pr-2 text-sm text-text-secondary">
-          value={command}
+        <SquareSlash className="icon-sm shrink-0" aria-hidden="true" />
-          onChange={handleInputChange}
+        <div className="relative min-w-0 flex-1">
-          className="border-none"
+          <Input
-        />
+            type="text"
+            id="prompt-command"
+            tabIndex={tabIndex}
+            disabled={disabled}
+            placeholder=" "
+            value={command}
+            onChange={handleInputChange}
+            className="peer w-full border-none pr-14"
+            aria-label={localize('com_ui_command_placeholder')}
+          />
+          <label
+            htmlFor="prompt-command"
+            className="pointer-events-none absolute left-0 top-0.5 hidden max-w-[calc(100%-3.5rem)] origin-[0] translate-y-2 scale-100 rounded bg-white px-1 text-sm text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-2 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-3 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850 md:block"
+          >
+            {localize('com_ui_command_placeholder')}
+          </label>
+        </div>
         {disabled !== true && (
-          <span className="mr-4 w-10 text-xs text-text-secondary md:text-sm">{`${charCount}/${Constants.COMMANDS_MAX_LENGTH}`}</span>
+          <span className="absolute right-2 shrink-0 text-xs text-text-secondary md:text-sm">{`${charCount}/${Constants.COMMANDS_MAX_LENGTH}`}</span>
         )}
-      </h3>
+      </div>
     </div>
   );
 };

client/src/components/Prompts/Description.tsx

@@ -42,21 +42,37 @@ const Description = ({
 
   return (
     <div className="rounded-xl border border-border-light shadow-md">
-      <h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
+      <label
-        <Info className="icon-sm" aria-hidden="true" />
+        htmlFor="prompt-description"
-        <Input
+        className="block px-4 pt-2 text-sm text-text-secondary md:hidden"
-          type="text"
+      >
-          tabIndex={tabIndex}
+        {localize('com_ui_description_placeholder')}
-          disabled={disabled}
+      </label>
-          placeholder={localize('com_ui_description_placeholder')}
+      <div className="relative flex h-10 items-center gap-1 pl-4 pr-2 text-sm text-text-secondary">
-          value={description}
+        <Info className="icon-sm shrink-0" aria-hidden="true" />
-          onChange={handleInputChange}
+        <div className="relative min-w-0 flex-1">
-          className="border-none"
+          <Input
-        />
+            type="text"
+            id="prompt-description"
+            tabIndex={tabIndex}
+            disabled={disabled}
+            placeholder=" "
+            value={description}
+            onChange={handleInputChange}
+            className="peer w-full border-none pr-14"
+            aria-label={localize('com_ui_description_placeholder')}
+          />
+          <label
+            htmlFor="prompt-description"
+            className="pointer-events-none absolute left-0 top-0.5 hidden max-w-[calc(100%-3.5rem)] origin-[0] translate-y-2 scale-100 rounded bg-white px-1 text-sm text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-2 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-3 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850 md:block"
+          >
+            {localize('com_ui_description_placeholder')}
+          </label>
+        </div>
         {!disabled && (
-          <span className="mr-4 w-10 text-xs text-text-secondary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
+          <span className="absolute right-2 shrink-0 text-xs text-text-secondary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
         )}
-      </h3>
+      </div>
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useState, useMemo, memo } from 'react';
+import { useState, useMemo, memo, useRef } from 'react';
 import { Menu as MenuIcon, Edit as EditIcon, EarthIcon, TextSearch } from 'lucide-react';
 import {
   DropdownMenu,
@@ -37,6 +37,8 @@ function ChatGroupItem({
   const { hasPermission } = useResourcePermissions('promptGroup', group._id || '');
   const canEdit = hasPermission(PermissionBits.EDIT);
 
+  const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
+
   const onCardClick: React.MouseEventHandler<HTMLButtonElement> = () => {
     const text = group.productionPrompt?.prompt;
     if (!text?.trim()) {
@@ -53,23 +55,28 @@ function ChatGroupItem({
 
   return (
     <>
-      <ListCard
+      <div className="relative my-2 items-stretch justify-between rounded-xl border border-border-light shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg">
-        name={group.name}
+        <ListCard
-        category={group.category ?? ''}
+          name={group.name}
-        onClick={onCardClick}
+          category={group.category ?? ''}
-        snippet={
+          onClick={onCardClick}
-          typeof group.oneliner === 'string' && group.oneliner.length > 0
+          snippet={
-            ? group.oneliner
+            typeof group.oneliner === 'string' && group.oneliner.length > 0
-            : (group.productionPrompt?.prompt ?? '')
+              ? group.oneliner
-        }
+              : (group.productionPrompt?.prompt ?? '')
-      >
+          }
-        <div className="flex flex-row items-center gap-2">
+        >
-          {groupIsGlobal === true && (
+          <div className="flex flex-row items-center gap-2">
-            <EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
+            {groupIsGlobal === true && (
-          )}
+              <EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
+            )}
+          </div>
+        </ListCard>
+        <div className="absolute right-0 top-0 mr-1 mt-2.5 items-start pl-2">
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <button
+                ref={triggerButtonRef}
                 id={`prompt-actions-${group._id}`}
                 type="button"
                 aria-label={localize('com_ui_sr_actions_menu', { name: group.name })}
@@ -81,7 +88,7 @@ function ChatGroupItem({
                     e.stopPropagation();
                   }
                 }}
-                className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                className="z-50 mr-2 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
               >
                 <MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
               </button>
@@ -127,8 +134,17 @@ function ChatGroupItem({
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-      </ListCard>
+      </div>
-      <PreviewPrompt group={group} open={isPreviewDialogOpen} onOpenChange={setPreviewDialogOpen} />
+      <PreviewPrompt
+        group={group}
+        open={isPreviewDialogOpen}
+        onOpenChange={setPreviewDialogOpen}
+        onCloseAutoFocus={() => {
+          requestAnimationFrame(() => {
+            triggerButtonRef.current?.focus({ preventScroll: true });
+          });
+        }}
+      />
       <VariableDialog
         open={isVariableDialogOpen}
         onClose={() => setVariableDialogOpen(false)}

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

@@ -104,6 +104,7 @@ const CreatePromptForm = ({
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="w-full px-4 py-2">
+        <h1 className="sr-only">{localize('com_ui_create_prompt_page')}</h1>
         <div className="mb-1 flex flex-col items-center justify-between font-bold sm:text-xl md:mb-0 md:text-2xl">
           <div className="flex w-full flex-col items-center justify-between sm:flex-row">
             <Controller
@@ -111,14 +112,22 @@ const CreatePromptForm = ({
               control={control}
               rules={{ required: localize('com_ui_prompt_name_required') }}
               render={({ field }) => (
-                <div className="mb-1 flex items-center md:mb-0">
+                <div className="relative mb-1 flex flex-col md:mb-0">
                   <Input
                     {...field}
+                    id="prompt-name"
                     type="text"
-                    className="mr-2 w-full border border-border-medium p-2 text-2xl text-text-primary placeholder:text-text-tertiary dark:placeholder:text-text-secondary"
+                    className="peer mr-2 w-full border border-border-medium p-2 text-2xl text-text-primary"
-                    placeholder={`${localize('com_ui_prompt_name')}*`}
+                    placeholder=" "
                     tabIndex={0}
+                    aria-label={localize('com_ui_prompt_name')}
                   />
+                  <label
+                    htmlFor="prompt-name"
+                    className="pointer-events-none absolute -top-1 left-3 origin-[0] translate-y-3 scale-100 rounded bg-white px-1 text-base text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:scale-100 peer-focus:-translate-y-2 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850"
+                  >
+                    {localize('com_ui_prompt_name')}*
+                  </label>
                   <div
                     className={cn(
                       'mt-1 w-56 text-sm text-red-500',

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

@@ -1,11 +1,11 @@
 import { memo, useState, useRef, useMemo, useCallback, KeyboardEvent } from 'react';
 import { EarthIcon, Pen } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { Trans } from 'react-i18next';
 import { PermissionBits, type TPromptGroup } from 'librechat-data-provider';
 import {
   Input,
   Label,
-  Button,
   OGDialog,
   OGDialogTrigger,
   OGDialogTemplate,
@@ -62,8 +62,8 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
   }, [group._id, nameInputValue, updateGroup]);
 
   const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
+    (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (e.key === 'Enter') {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         navigate(`/d/prompts/${group._id}`, { replace: true });
       }
@@ -82,16 +82,26 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
   return (
     <div
       className={cn(
-        'mx-2 my-2 flex cursor-pointer rounded-lg border border-border-light bg-surface-primary p-3 shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-secondary',
+        'relative mx-2 my-2 rounded-lg border border-border-light bg-surface-primary shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-secondary',
         params.promptId === group._id && 'bg-surface-hover',
       )}
-      onClick={handleContainerClick}
-      onKeyDown={handleKeyDown}
-      role="button"
-      tabIndex={0}
-      aria-label={`${group.name} Prompt, ${localize('com_ui_category')}: ${group.category ?? ''}`}
     >
-      <div className="flex w-full items-center justify-between">
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center justify-between rounded-lg p-3 text-left"
+        onClick={handleContainerClick}
+        onKeyDown={handleKeyDown}
+        aria-label={
+          group.category
+            ? localize('com_ui_prompt_group_button', {
+                name: group.name,
+                category: group.category,
+              })
+            : localize('com_ui_prompt_group_button_no_category', {
+                name: group.name,
+              })
+        }
+      >
         <div className="flex items-center gap-2 truncate pr-2">
           <CategoryIcon category={group.category ?? ''} className="icon-lg" aria-hidden="true" />
 
@@ -107,80 +117,97 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
               aria-label={localize('com_ui_global_group')}
             />
           )}
-          {canEdit && (
-            <OGDialog>
-              <OGDialogTrigger asChild>
-                <Button
-                  variant="ghost"
-                  onClick={(e) => e.stopPropagation()}
-                  className="h-8 w-8 p-0 hover:bg-surface-hover"
-                  aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
-                >
-                  <Pen className="icon-sm text-text-primary" aria-hidden="true" />
-                </Button>
-              </OGDialogTrigger>
-              <OGDialogTemplate
-                showCloseButton={false}
-                title={localize('com_ui_rename_prompt')}
-                className="w-11/12 max-w-lg"
-                main={
-                  <div className="flex w-full flex-col items-center gap-2">
-                    <div className="grid w-full items-center gap-2">
-                      <Input
-                        value={nameInputValue}
-                        onChange={(e) => setNameInputValue(e.target.value)}
-                        className="w-full"
-                        aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
-                      />
-                    </div>
-                  </div>
-                }
-                selection={{
-                  selectHandler: handleSaveRename,
-                  selectClasses:
-                    'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
-                  selectText: localize('com_ui_save'),
-                  isLoading,
-                }}
-              />
-            </OGDialog>
-          )}
-
-          {canDelete && (
-            <OGDialog>
-              <OGDialogTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="h-8 w-8 p-0 hover:bg-surface-hover"
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label={localize('com_ui_delete_prompt_name', { name: group.name })}
-                >
-                  <TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
-                </Button>
-              </OGDialogTrigger>
-              <OGDialogTemplate
-                showCloseButton={false}
-                title={localize('com_ui_delete_prompt')}
-                className="w-11/12 max-w-lg"
-                main={
-                  <div className="flex w-full flex-col items-center gap-2">
-                    <div className="grid w-full items-center gap-2">
-                      <Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
-                        {localize('com_ui_delete_confirm')} <strong>{group.name}</strong>
-                      </Label>
-                    </div>
-                  </div>
-                }
-                selection={{
-                  selectHandler: triggerDelete,
-                  selectClasses:
-                    'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
-                  selectText: localize('com_ui_delete'),
-                }}
-              />
-            </OGDialog>
-          )}
         </div>
+      </button>
+
+      <div className="absolute right-0 top-0 mr-1 mt-2.5 flex items-start gap-1 pl-2">
+        {canEdit && (
+          <OGDialog>
+            <OGDialogTrigger asChild>
+              <button
+                type="button"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.stopPropagation();
+                  }
+                }}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
+              >
+                <Pen className="icon-sm text-text-primary" aria-hidden="true" />
+              </button>
+            </OGDialogTrigger>
+            <OGDialogTemplate
+              showCloseButton={false}
+              title={localize('com_ui_rename_prompt')}
+              className="w-11/12 max-w-lg"
+              main={
+                <div className="flex w-full flex-col items-center gap-2">
+                  <div className="grid w-full items-center gap-2">
+                    <Input
+                      value={nameInputValue}
+                      onChange={(e) => setNameInputValue(e.target.value)}
+                      className="w-full"
+                      aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
+                    />
+                  </div>
+                </div>
+              }
+              selection={{
+                selectHandler: handleSaveRename,
+                selectClasses:
+                  'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
+                selectText: localize('com_ui_save'),
+                isLoading,
+              }}
+            />
+          </OGDialog>
+        )}
+
+        {canDelete && (
+          <OGDialog>
+            <OGDialogTrigger asChild>
+              <button
+                type="button"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.stopPropagation();
+                  }
+                }}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                aria-label={localize('com_ui_delete_prompt_name', { name: group.name })}
+              >
+                <TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
+              </button>
+            </OGDialogTrigger>
+            <OGDialogTemplate
+              showCloseButton={false}
+              title={localize('com_ui_delete_prompt')}
+              className="w-11/12 max-w-lg"
+              main={
+                <div className="flex w-full flex-col items-center gap-2">
+                  <div className="grid w-full items-center gap-2">
+                    <Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
+                      <Trans
+                        i18nKey="com_ui_delete_confirm_strong"
+                        values={{ title: group.name }}
+                        components={{ strong: <strong /> }}
+                      />
+                    </Label>
+                  </div>
+                </div>
+              }
+              selection={{
+                selectHandler: triggerDelete,
+                selectClasses:
+                  'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+                selectText: localize('com_ui_delete'),
+              }}
+            />
+          </OGDialog>
+        )}
       </div>
     </div>
   );

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

@@ -4,6 +4,7 @@ import { ListFilter, User, Share2 } from 'lucide-react';
 import { SystemCategories } from 'librechat-data-provider';
 import { Dropdown, AnimatedSearchInput } from '@librechat/client';
 import type { Option } from '~/common';
+import type { TranslationKeys } from '~/hooks';
 import { useLocalize, useCategories } from '~/hooks';
 import { usePromptGroupsContext } from '~/Providers';
 import { cn } from '~/utils';
@@ -11,11 +12,12 @@ import store from '~/store';
 
 export default function FilterPrompts({ className = '' }: { className?: string }) {
   const localize = useLocalize();
-  const { name, setName, hasAccess } = usePromptGroupsContext();
+  const { name, setName, hasAccess, promptGroups } = usePromptGroupsContext();
   const { categories } = useCategories({ className: 'h-4 w-4', hasAccess });
   const [displayName, setDisplayName] = useState(name || '');
   const [isSearching, setIsSearching] = useState(false);
   const [categoryFilter, setCategory] = useRecoilState(store.promptsCategory);
+  const [searchResultsAnnouncement, setSearchResultsAnnouncement] = useState('');
 
   const filterOptions = useMemo(() => {
     const baseOptions: Option[] = [
@@ -81,8 +83,34 @@ export default function FilterPrompts({ className = '' }: { className?: string }
     return () => clearTimeout(timeout);
   }, [displayName, setName]);
 
+  useEffect(() => {
+    if (!displayName.trim() || isSearching) {
+      setSearchResultsAnnouncement('');
+      return;
+    }
+
+    const resultCount = promptGroups?.length ?? 0;
+    const announcement =
+      resultCount === 1
+        ? localize('com_ui_result_found' as TranslationKeys, {
+            count: resultCount,
+          })
+        : localize('com_ui_results_found' as TranslationKeys, {
+            count: resultCount,
+          });
+
+    const timeout = setTimeout(() => {
+      setSearchResultsAnnouncement(announcement);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [promptGroups?.length, displayName, isSearching, localize]);
+
   return (
     <div className={cn('flex w-full gap-2 text-text-primary', className)}>
+      <div aria-live="polite" className="sr-only">
+        {searchResultsAnnouncement}
+      </div>
       <Dropdown
         value={categoryFilter || SystemCategories.ALL}
         onChange={onSelect}

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

@@ -1,23 +1,26 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useMediaQuery } from '@librechat/client';
+import { Button, Sidebar, TooltipAnchor } from '@librechat/client';
 import ManagePrompts from '~/components/Prompts/ManagePrompts';
 import { usePromptGroupsContext } from '~/Providers';
 import List from '~/components/Prompts/Groups/List';
 import PanelNavigation from './PanelNavigation';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function GroupSidePanel({
   children,
-  isDetailView,
   className = '',
+  closePanelRef,
+  onClose,
 }: {
   children?: React.ReactNode;
-  isDetailView?: boolean;
   className?: string;
+  closePanelRef?: React.RefObject<HTMLButtonElement>;
+  onClose?: () => void;
 }) {
   const location = useLocation();
-  const isSmallerScreen = useMediaQuery('(max-width: 1024px)');
+  const localize = useLocalize();
   const isChatRoute = useMemo(() => location.pathname?.startsWith('/c/'), [location.pathname]);
 
   const { promptGroups, groupsQuery, nextPage, prevPage, hasNextPage, hasPreviousPage } =
@@ -25,15 +28,42 @@ export default function GroupSidePanel({
 
   return (
     <div
+      id="prompts-panel"
       className={cn(
-        'flex h-full w-full flex-col gap-2 md:mr-2 md:w-auto md:min-w-72 lg:w-1/4 xl:w-1/4',
+        'flex h-full w-full flex-col md:mr-2 md:w-auto md:min-w-72 lg:w-1/4 xl:w-1/4',
-        isDetailView === true && isSmallerScreen ? 'hidden' : '',
         className,
       )}
     >
-      {children}
+      {onClose && (
-      <div className={cn('flex-grow overflow-y-auto', isChatRoute ? '' : 'px-2 md:px-0')}>
+        <div className="flex items-center justify-between px-2 py-[2px] md:py-2">
-        <List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} />
+          <TooltipAnchor
+            description={localize('com_nav_close_sidebar')}
+            render={
+              <Button
+                ref={closePanelRef}
+                size="icon"
+                variant="outline"
+                data-testid="close-prompts-panel-button"
+                aria-label={localize('com_nav_close_sidebar')}
+                aria-expanded={true}
+                className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
+                onClick={onClose}
+              >
+                <Sidebar />
+              </Button>
+            }
+          />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
+        {children}
+        <div className={cn('relative flex h-full flex-col', isChatRoute ? '' : 'px-2 md:px-0')}>
+          <List
+            groups={promptGroups}
+            isChatRoute={isChatRoute}
+            isLoading={!!groupsQuery.isLoading}
+          />
+        </div>
       </div>
       <div className={cn(isChatRoute ? '' : 'px-2 pb-3 pt-2 md:px-0')}>
         <PanelNavigation

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

@@ -28,7 +28,7 @@ export default function ListCard({
     <div
       onClick={onClick}
       onKeyDown={handleKeyDown}
-      className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-xl border border-border-light px-3 pb-4 pt-3 text-start align-top text-[15px] shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg"
+      className="relative flex w-full cursor-pointer flex-col gap-2 rounded-xl px-3 pb-4 pt-3 text-start align-top text-[15px]"
       role="button"
       tabIndex={0}
       aria-labelledby={`card-title-${name}`}

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

@@ -140,7 +140,7 @@ export default function VariableForm({
   return (
     <div className="mx-auto p-1 md:container">
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        <div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
+        <div className="mb-6 max-h-screen max-w-[80vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
           <ReactMarkdown
             /** @ts-ignore */
             remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
@@ -159,7 +159,7 @@ export default function VariableForm({
         </div>
         <div className="space-y-4">
           {fields.map((field, index) => (
-            <div key={field.id} className="flex flex-col space-y-2">
+            <div key={field.id} className="relative flex flex-col space-y-2">
               <Controller
                 name={`fields.${index}.value`}
                 control={control}
@@ -171,7 +171,7 @@ export default function VariableForm({
                         placeholder={field.config.variable}
                         className={cn(
                           defaultTextProps,
-                          'rounded px-3 py-2 focus:bg-surface-tertiary',
+                          'mb-1 rounded px-3 py-2 focus:bg-surface-tertiary',
                         )}
                         value={value}
                         onChange={onChange}
@@ -181,20 +181,28 @@ export default function VariableForm({
                   }
 
                   return (
-                    <TextareaAutosize
+                    <>
-                      ref={ref}
+                      <TextareaAutosize
-                      value={value}
+                        ref={ref}
-                      onChange={onChange}
+                        value={value}
-                      onBlur={onBlur}
+                        onChange={onChange}
-                      id={`fields.${index}.value`}
+                        onBlur={onBlur}
-                      className={cn(
+                        id={`fields.${index}.value`}
-                        defaultTextProps,
+                        className={cn(
-                        'rounded px-3 py-2 focus:bg-surface-tertiary',
+                          defaultTextProps,
-                      )}
+                          'peer rounded px-3 py-2 focus:bg-surface-tertiary',
-                      placeholder={field.config.variable}
+                        )}
-                      maxRows={8}
+                        placeholder=""
-                      aria-label={field.config.variable}
+                        maxRows={8}
-                    />
+                        aria-label={field.config.variable}
+                      />
+                      <label
+                        htmlFor={`fields.${index}.value`}
+                        className="absolute left-3 top-0 text-sm text-text-secondary transition-all duration-200 peer-focus:-top-6 peer-focus:left-1 peer-focus:text-xs peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-top-6 peer-[:not(:placeholder-shown)]:left-1 peer-[:not(:placeholder-shown)]:text-xs"
+                      >
+                        {field.config.variable}
+                      </label>
+                    </>
                   );
                 }}
               />

client/src/components/Prompts/PreviewPrompt.tsx

@@ -6,14 +6,19 @@ const PreviewPrompt = ({
   group,
   open,
   onOpenChange,
+  onCloseAutoFocus,
 }: {
   group: TPromptGroup;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  onCloseAutoFocus?: () => void;
 }) => {
   return (
     <OGDialog open={open} onOpenChange={onOpenChange}>
-      <OGDialogContent className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]">
+      <OGDialogContent
+        className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]"
+        onCloseAutoFocus={onCloseAutoFocus}
+      >
         <div>
           <PromptDetails group={group} />
         </div>

client/src/components/Prompts/PromptVariables.tsx

@@ -74,7 +74,7 @@ const PromptVariables = ({
               <span className="text-sm font-medium text-text-primary">
                 {localize('com_ui_dropdown_variables')}
               </span>
-              <span className="text-sm text-text-secondary">
+              <span className="break-words text-sm text-text-secondary">
                 <ReactMarkdown components={components} className="markdown prose dark:prose-invert">
                   {localize('com_ui_dropdown_variables_info')}
                 </ReactMarkdown>

client/src/components/Prompts/PromptsView.tsx

@@ -1,17 +1,24 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
 import { Outlet, useParams, useNavigate } from 'react-router-dom';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
 import DashBreadcrumb from '~/routes/Layouts/DashBreadcrumb';
 import GroupSidePanel from './Groups/GroupSidePanel';
+import { useHasAccess, useLocalize } from '~/hooks';
 import { PromptGroupsProvider } from '~/Providers';
-import { useHasAccess } from '~/hooks';
+import { useMediaQuery } from '@librechat/client';
 import { cn } from '~/utils';
 
 export default function PromptsView() {
   const params = useParams();
   const navigate = useNavigate();
   const isDetailView = useMemo(() => !!(params.promptId || params['*'] === 'new'), [params]);
+  const isSmallerScreen = useMediaQuery('(max-width: 768px)');
+  const [panelVisible, setPanelVisible] = useState(!isSmallerScreen);
+  const openPanelRef = useRef<HTMLButtonElement>(null);
+  const closePanelRef = useRef<HTMLButtonElement>(null);
+  const localize = useLocalize();
+
   const hasAccess = useHasAccess({
     permissionType: PermissionTypes.PROMPTS,
     permission: Permissions.USE,
@@ -29,6 +36,26 @@ export default function PromptsView() {
     };
   }, [hasAccess, navigate]);
 
+  const togglePanel = useCallback(() => {
+    setPanelVisible((prev) => {
+      const newValue = !prev;
+      requestAnimationFrame(() => {
+        if (newValue) {
+          closePanelRef?.current?.focus();
+        } else {
+          openPanelRef?.current?.focus();
+        }
+      });
+      return newValue;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (isSmallerScreen && isDetailView) {
+      setPanelVisible(false);
+    }
+  }, [isSmallerScreen, isDetailView]);
+
   if (!hasAccess) {
     return null;
   }
@@ -36,13 +63,42 @@ export default function PromptsView() {
   return (
     <PromptGroupsProvider>
       <div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2">
-        <DashBreadcrumb />
+        <DashBreadcrumb
-        <div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
+          showToggle={isSmallerScreen && isDetailView}
-          <GroupSidePanel isDetailView={isDetailView}>
+          onToggle={togglePanel}
-            <div className="mt-1 flex flex-row items-center justify-between px-2 md:px-2">
+          openPanelRef={openPanelRef}
-              <FilterPrompts />
+        />
+        <div className="flex w-full flex-grow flex-row overflow-hidden">
+          {isSmallerScreen && panelVisible && isDetailView && (
+            <div
+              className="fixed inset-0 z-40 bg-black/50 transition-opacity"
+              onClick={togglePanel}
+              role="button"
+              tabIndex={0}
+              aria-label={localize('com_nav_toggle_sidebar')}
+            />
+          )}
+
+          {(!isSmallerScreen || !isDetailView || panelVisible) && (
+            <div
+              className={cn(
+                'transition-transform duration-300 ease-in-out',
+                isSmallerScreen && isDetailView
+                  ? 'fixed left-0 top-0 z-50 h-full w-[320px] bg-surface-primary'
+                  : 'flex',
+              )}
+            >
+              <GroupSidePanel
+                closePanelRef={closePanelRef}
+                onClose={isSmallerScreen && isDetailView ? togglePanel : undefined}
+              >
+                <div className="mt-1 flex flex-row items-center justify-between px-2 md:px-2">
+                  <FilterPrompts />
+                </div>
+              </GroupSidePanel>
             </div>
-          </GroupSidePanel>
+          )}
+
           <div
             className={cn(
               'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',

client/src/components/SidePanel/Agents/Code/Action.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { KeyRoundIcon } from 'lucide-react';
 import { AuthType, AgentCapabilities } from 'librechat-data-provider';
 import { useFormContext, Controller, useWatch } from 'react-hook-form';
@@ -17,7 +18,8 @@ import { ESide } from '~/common';
 export default function Action({ authType = '', isToolAuthenticated = false }) {
   const localize = useLocalize();
   const methods = useFormContext<AgentForm>();
-  const { control, setValue, getValues } = methods;
+  const { control, setValue } = methods;
+  const apiKeyButtonRef = useRef<HTMLButtonElement>(null);
   const {
     onSubmit,
     isDialogOpen,
@@ -27,9 +29,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
   } = useCodeApiKeyForm({
     onSubmit: () => {
       setValue(AgentCapabilities.execute_code, true, { shouldDirty: true });
+      setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
     },
     onRevoke: () => {
       setValue(AgentCapabilities.execute_code, false, { shouldDirty: true });
+      setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
     },
   });
 
@@ -56,42 +60,44 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
             render={({ field }) => (
               <Checkbox
                 {...field}
+                id="execute-code-checkbox"
                 checked={runCodeIsEnabled ? runCodeIsEnabled : isToolAuthenticated && field.value}
                 onCheckedChange={handleCheckboxChange}
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
                 disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
-                aria-label={localize('com_ui_run_code')}
+                aria-labelledby="execute-code-label"
               />
             )}
           />
-          <button
+          <label
-            type="button"
+            id="execute-code-label"
-            className="flex items-center space-x-2"
+            htmlFor="execute-code-checkbox"
-            onClick={() => {
+            className="form-check-label text-token-text-primary cursor-pointer"
-              const value = !getValues(AgentCapabilities.execute_code);
-              handleCheckboxChange(value);
-            }}
           >
-            <label
+            {localize('com_ui_run_code')}
-              className="form-check-label text-token-text-primary w-full cursor-pointer"
+          </label>
-              htmlFor={AgentCapabilities.execute_code}
-            >
-              {localize('com_ui_run_code')}
-            </label>
-          </button>
           <div className="ml-2 flex gap-2">
-            {isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
+            {isUserProvided && (
               <button
+                ref={apiKeyButtonRef}
                 type="button"
                 onClick={() => setIsDialogOpen(true)}
-                aria-label={localize('com_ui_add_api_key')}
+                aria-label={localize('com_ui_add_code_interpreter_api_key')}
+                aria-haspopup="dialog"
+                aria-expanded={isDialogOpen}
               >
                 <KeyRoundIcon className="h-5 w-5 text-text-primary" />
               </button>
             )}
-            <HoverCardTrigger>
+            <HoverCardTrigger asChild>
-              <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
+              <button
+                type="button"
+                className="inline-flex items-center"
+                aria-label={localize('com_agents_code_interpreter')}
+              >
+                <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
+              </button>
             </HoverCardTrigger>
           </div>
           <HoverCardPortal>
@@ -114,6 +120,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
         isToolAuthenticated={isToolAuthenticated}
         handleSubmit={keyFormMethods.handleSubmit}
         isUserProvided={authType === AuthType.USER_PROVIDED}
+        triggerRef={apiKeyButtonRef}
       />
     </>
   );

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

@@ -16,7 +16,7 @@ import { ESide } from '~/common';
 function FileSearchCheckbox() {
   const localize = useLocalize();
   const methods = useFormContext<AgentForm>();
-  const { control, setValue, getValues } = methods;
+  const { control } = methods;
 
   return (
     <>
@@ -28,33 +28,31 @@ function FileSearchCheckbox() {
             render={({ field }) => (
               <Checkbox
                 {...field}
+                id="file-search-checkbox"
                 checked={field.value}
                 onCheckedChange={field.onChange}
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
-                aria-label={localize('com_agents_enable_file_search')}
+                aria-labelledby="file-search-label"
               />
             )}
           />
-          <button
+          <label
-            type="button"
+            id="file-search-label"
-            className="flex items-center space-x-2"
+            htmlFor="file-search-checkbox"
-            onClick={() =>
+            className="form-check-label text-token-text-primary cursor-pointer"
-              setValue(AgentCapabilities.file_search, !getValues(AgentCapabilities.file_search), {
-                shouldDirty: true,
-              })
-            }
           >
-            <label
+            {localize('com_agents_enable_file_search')}
-              className="form-check-label text-token-text-primary w-full cursor-pointer"
+          </label>
-              htmlFor={AgentCapabilities.file_search}
+          <HoverCardTrigger asChild className="ml-2">
+            <button
+              type="button"
+              className="inline-flex items-center"
+              aria-label={localize('com_agents_file_search_info')}
             >
-              {localize('com_agents_enable_file_search')}
-            </label>
-            <HoverCardTrigger>
               <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
-            </HoverCardTrigger>
+            </button>
-          </button>
+          </HoverCardTrigger>
           <HoverCardPortal>
             <HoverCardContent side={ESide.Top} className="w-80">
               <div className="space-y-2">

client/src/components/SidePanel/Agents/Search/Action.tsx

@@ -1,4 +1,5 @@
 import { KeyRoundIcon } from 'lucide-react';
+import { useRef } from 'react';
 import { AuthType, AgentCapabilities } from 'librechat-data-provider';
 import { useFormContext, Controller, useWatch } from 'react-hook-form';
 import {
@@ -23,7 +24,8 @@ export default function Action({
 }) {
   const localize = useLocalize();
   const methods = useFormContext<AgentForm>();
-  const { control, setValue, getValues } = methods;
+  const { control, setValue } = methods;
+  const apiKeyButtonRef = useRef<HTMLButtonElement>(null);
   const {
     onSubmit,
     isDialogOpen,
@@ -33,9 +35,11 @@ export default function Action({
   } = useSearchApiKeyForm({
     onSubmit: () => {
       setValue(AgentCapabilities.web_search, true, { shouldDirty: true });
+      setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
     },
     onRevoke: () => {
       setValue(AgentCapabilities.web_search, false, { shouldDirty: true });
+      setTimeout(() => apiKeyButtonRef.current?.focus(), 100);
     },
   });
 
@@ -62,6 +66,7 @@ export default function Action({
             render={({ field }) => (
               <Checkbox
                 {...field}
+                id="web-search-checkbox"
                 checked={
                   webSearchIsEnabled ? webSearchIsEnabled : isToolAuthenticated && field.value
                 }
@@ -69,33 +74,37 @@ export default function Action({
                 className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
                 value={field.value.toString()}
                 disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
-                aria-label={localize('com_ui_web_search')}
+                aria-labelledby="web-search-label"
               />
             )}
           />
-          <button
+          <label
-            type="button"
+            id="web-search-label"
-            className="flex items-center space-x-2"
+            htmlFor="web-search-checkbox"
-            onClick={() => {
+            className="form-check-label text-token-text-primary cursor-pointer"
-              const value = !getValues(AgentCapabilities.web_search);
-              handleCheckboxChange(value);
-            }}
           >
-            <label
+            {localize('com_ui_web_search')}
-              className="form-check-label text-token-text-primary w-full cursor-pointer"
+          </label>
-              htmlFor={AgentCapabilities.web_search}
-            >
-              {localize('com_ui_web_search')}
-            </label>
-          </button>
           <div className="ml-2 flex gap-2">
-            {isUserProvided && (isToolAuthenticated || webSearchIsEnabled) && (
+            {isUserProvided && (
-              <button type="button" onClick={() => setIsDialogOpen(true)}>
+              <button
+                ref={apiKeyButtonRef}
+                type="button"
+                onClick={() => setIsDialogOpen(true)}
+                aria-label={localize('com_ui_add_web_search_api_keys')}
+                aria-haspopup="dialog"
+              >
                 <KeyRoundIcon className="h-5 w-5 text-text-primary" />
               </button>
             )}
-            <HoverCardTrigger>
+            <HoverCardTrigger asChild>
-              <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
+              <button
+                type="button"
+                className="inline-flex items-center"
+                aria-label={localize('com_agents_search_info')}
+              >
+                <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
+              </button>
             </HoverCardTrigger>
           </div>
           <HoverCardPortal>
@@ -116,6 +125,7 @@ export default function Action({
         register={keyFormMethods.register}
         isToolAuthenticated={isToolAuthenticated}
         handleSubmit={keyFormMethods.handleSubmit}
+        triggerRef={apiKeyButtonRef}
       />
     </>
   );

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -66,13 +66,21 @@ const BookmarkTable = () => {
   return (
     <BookmarkContext.Provider value={{ bookmarks }}>
       <div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-2">
-        <div className="flex items-center gap-4">
+        <div className="relative flex items-center gap-4">
           <Input
-            placeholder={localize('com_ui_bookmarks_filter')}
+            id="bookmarks-filter"
+            placeholder=" "
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             aria-label={localize('com_ui_bookmarks_filter')}
+            className="peer"
           />
+          <label
+            htmlFor="bookmarks-filter"
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
+          >
+            {localize('com_ui_bookmarks_filter')}
+          </label>
         </div>
 
         <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">

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

@@ -182,13 +182,21 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
 
   return (
     <div role="region" aria-label={localize('com_files_table')} className="mt-2 space-y-2">
-      <div className="flex items-center gap-4">
+      <div className="relative flex items-center gap-4">
         <Input
-          placeholder={localize('com_files_filter')}
+          id="filename-filter"
+          placeholder=" "
           value={filenameFilter ?? ''}
           onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
           aria-label={localize('com_files_filter')}
+          className="peer"
         />
+        <label
+          htmlFor="filename-filter"
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
+        >
+          {localize('com_files_filter')}
+        </label>
       </div>
 
       <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">

client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx

@@ -108,7 +108,7 @@ export default function MemoryCreateDialog({
       <OGDialogTemplate
         title={localize('com_ui_create_memory')}
         showCloseButton={false}
-        className="w-11/12 md:max-w-lg"
+        className="max-h-[90vh] w-11/12 overflow-y-auto md:max-w-lg"
         main={
           <div className="space-y-4">
             <div className="space-y-2">

client/src/components/SidePanel/Memories/MemoryViewer.tsx

@@ -301,7 +301,7 @@ export default function MemoryViewer() {
                 <Switch
                   checked={referenceSavedMemories}
                   onCheckedChange={handleMemoryToggle}
-                  aria-label={localize('com_ui_reference_saved_memories')}
+                  aria-label={localize('com_ui_use_memory')}
                   disabled={updateMemoryPreferencesMutation.isLoading}
                 />
               </div>

client/src/locales/en/translation.json

@@ -378,9 +378,12 @@
   "com_files_downloading": "Downloading Files",
   "com_files_filter": "Filter files...",
   "com_files_filter_by": "Filter files by...",
+  "com_files_filter_input": "Filter listed files by name...",
   "com_files_no_results": "No results.",
   "com_files_number_selected": "{{0}} of {{1}} items(s) selected",
   "com_files_preparing_download": "Preparing download...",
+  "com_files_result_found": "{{count}} result found",
+  "com_files_results_found": "{{count}} results found",
   "com_files_sharepoint_picker_title": "Pick Files",
   "com_files_table": "something needs to go here. was empty",
   "com_files_upload_local_machine": "From Local Computer",
@@ -392,6 +395,7 @@
   "com_nav_account_settings": "Account Settings",
   "com_nav_always_make_prod": "Always make new versions production",
   "com_nav_archive_created_at": "Date Archived",
+  "com_nav_archive_created_at_sort": "Sort by Date Archived",
   "com_nav_archive_name": "Name",
   "com_nav_archived_chats": "Archived chats",
   "com_nav_at_command": "@-Command",
@@ -568,6 +572,7 @@
   "com_nav_theme_dark": "Dark",
   "com_nav_theme_light": "Light",
   "com_nav_theme_system": "System",
+  "com_nav_toggle_sidebar": "Toggle sidebar",
   "com_nav_tool_dialog": "Assistant Tools",
   "com_nav_tool_dialog_agents": "Agent Tools",
   "com_nav_tool_dialog_description": "Assistant must be saved to persist tool selections.",
@@ -619,7 +624,8 @@
   "com_ui_action_button": "Action Button",
   "com_ui_active": "Active",
   "com_ui_add": "Add",
-  "com_ui_add_api_key": "Add API Key",
+  "com_ui_add_code_interpreter_api_key": "Add Code Interpreter API Key",
+  "com_ui_add_web_search_api_keys": "Add Web Search API Keys",
   "com_ui_add_mcp": "Add MCP",
   "com_ui_add_mcp_server": "Add MCP Server",
   "com_ui_add_model_preset": "Add a model or preset for an additional response",
@@ -794,6 +800,7 @@
   "com_ui_controls": "Controls",
   "com_ui_contact_admin_if_issue_persists": "Contact the Admin if the issue persists",
   "com_ui_conversation_label": "{{title}} conversation",
+  "com_ui_convo_archived": "Conversation archived",
   "com_ui_convo_delete_error": "Failed to delete conversation",
   "com_ui_convo_delete_success": "Conversation successfully deleted",
   "com_ui_copied": "Copied!",
@@ -811,7 +818,9 @@
   "com_ui_create_memory": "Create Memory",
   "com_ui_create_new_agent": "Create New Agent",
   "com_ui_create_prompt": "Create Prompt",
+  "com_ui_create_prompt_page": "New Prompt Configuration Page",
   "com_ui_creating_image": "Creating image. May take a moment",
+  "com_ui_creation_date_sort": "Sort by Creation Date",
   "com_ui_current": "Current",
   "com_ui_currently_production": "Currently in production",
   "com_ui_custom": "Custom",
@@ -1007,6 +1016,8 @@
   "com_ui_librechat_code_api_key": "Get your LibreChat Code Interpreter API key",
   "com_ui_librechat_code_api_subtitle": "Secure. Multi-language. Input/Output Files.",
   "com_ui_librechat_code_api_title": "Run AI Code",
+  "com_ui_link_copied": "Link copied",
+  "com_ui_link_refreshed": "Link refreshed",
   "com_ui_loading": "Loading...",
   "com_ui_locked": "Locked",
   "com_ui_logo": "{{0}} Logo",
@@ -1059,6 +1070,7 @@
   "com_ui_more_info": "More info",
   "com_ui_my_prompts": "My Prompts",
   "com_ui_name": "Name",
+  "com_ui_name_sort": "Sort by Name",
   "com_ui_new": "New",
   "com_ui_new_chat": "New chat",
   "com_ui_new_conversation_title": "New Conversation Title",
@@ -1110,6 +1122,8 @@
   "com_ui_privacy_policy": "Privacy policy",
   "com_ui_privacy_policy_url": "Privacy Policy URL",
   "com_ui_prompt": "Prompt",
+  "com_ui_prompt_group_button": "{{name}} prompt, {{category}} category",
+  "com_ui_prompt_group_button_no_category": "{{name}} prompt",
   "com_ui_prompt_groups": "Prompt Groups List",
   "com_ui_prompt_input": "Prompt input",
   "com_ui_prompt_input_field": "Prompt text input field",
@@ -1152,6 +1166,8 @@
   "com_ui_resource": "resource",
   "com_ui_response": "Response",
   "com_ui_result": "Result",
+  "com_ui_result_found": "{{count}} result found",
+  "com_ui_results_found": "{{count}} results found",
   "com_ui_revoke": "Revoke",
   "com_ui_revoke_info": "Revoke all user provided credentials",
   "com_ui_revoke_key_confirm": "Are you sure you want to revoke this key?",
@@ -1258,6 +1274,9 @@
   "com_ui_opens_new_tab": "(opens in new tab)",
   "com_ui_thinking": "Thinking...",
   "com_ui_thoughts": "Thoughts",
+  "com_ui_toggle_theme": "Toggle theme",
+  "com_ui_dark_theme_enabled": "Dark theme enabled",
+  "com_ui_light_theme_enabled": "Light theme enabled",
   "com_ui_token": "token",
   "com_ui_token_exchange_method": "Token Exchange Method",
   "com_ui_token_url": "Token URL",

client/src/routes/Layouts/DashBreadcrumb.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { useLocation } from 'react-router-dom';
 import { SystemRoles } from 'librechat-data-provider';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { ArrowLeft, MessageSquareQuote } from 'lucide-react';
+import { Sidebar } from '@librechat/client';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -33,7 +34,15 @@ const getConversationId = (prevLocationPath: string) => {
   return lastPathnameParts[lastPathnameParts.length - 1];
 };
 
-export default function DashBreadcrumb() {
+export default function DashBreadcrumb({
+  showToggle = false,
+  onToggle,
+  openPanelRef,
+}: {
+  showToggle?: boolean;
+  onToggle?: () => void;
+  openPanelRef?: React.RefObject<HTMLButtonElement>;
+}) {
   const location = useLocation();
   const localize = useLocalize();
   const { user } = useAuthContext();
@@ -42,7 +51,6 @@ export default function DashBreadcrumb() {
 
   const setPromptsName = useSetRecoilState(store.promptsName);
   const setPromptsCategory = useSetRecoilState(store.promptsCategory);
-  const editorMode = useRecoilValue(store.promptsEditorMode);
 
   const clickCallback = useCallback(() => {
     setPromptsName('');
@@ -61,6 +69,24 @@ export default function DashBreadcrumb() {
     <div className="mr-2 mt-2 flex h-10 items-center justify-between">
       <Breadcrumb className="mt-1 px-2 dark:text-gray-200">
         <BreadcrumbList>
+          {showToggle && onToggle && (
+            <>
+              <BreadcrumbItem>
+                <button
+                  ref={openPanelRef}
+                  type="button"
+                  onClick={onToggle}
+                  className="flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-surface-primary text-text-primary transition-all hover:bg-surface-hover"
+                  aria-label={localize('com_nav_open_sidebar')}
+                  aria-expanded={false}
+                  aria-controls="prompts-panel"
+                >
+                  <Sidebar className="h-4 w-4" />
+                </button>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+            </>
+          )}
           <BreadcrumbItem className="hover:dark:text-white">
             <BreadcrumbLink
               href="/"

client/src/routes/Root.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Outlet } from 'react-router-dom';
 import type { ContextType } from '~/common';
 import {
@@ -28,6 +28,8 @@ export default function Root() {
     const savedNavVisible = localStorage.getItem('navVisible');
     return savedNavVisible !== null ? JSON.parse(savedNavVisible) : true;
   });
+  const openSidebarRef = useRef<HTMLButtonElement>(null);
+  const closeSidebarRef = useRef<HTMLButtonElement>(null);
 
   const { isAuthenticated, logout } = useAuthContext();
 
@@ -73,10 +75,24 @@ export default function Root() {
               <Banner onHeightChange={setBannerHeight} />
               <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
                 <div className="relative z-0 flex h-full w-full overflow-hidden">
-                  <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+                  <Nav
+                    navVisible={navVisible}
+                    setNavVisible={setNavVisible}
+                    openSidebarRef={openSidebarRef}
+                    closeSidebarRef={closeSidebarRef}
+                  />
                   <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
                     <MobileNav navVisible={navVisible} setNavVisible={setNavVisible} />
-                    <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+                    <Outlet
+                      context={
+                        {
+                          navVisible,
+                          setNavVisible,
+                          openSidebarRef,
+                          closeSidebarRef,
+                        } satisfies ContextType
+                      }
+                    />
                   </div>
                 </div>
               </div>

packages/client/src/common/menus.ts

@@ -16,6 +16,17 @@ export interface MenuItemProps {
   separate?: boolean;
   hideOnClick?: boolean;
   dialog?: React.ReactElement;
+  ariaHasPopup?:
+    | boolean
+    | 'dialog'
+    | 'menu'
+    | 'true'
+    | 'false'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | undefined;
+  ariaControls?: string;
   ref?: React.Ref<any>;
   render?:
     | RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined }>

packages/client/src/components/AnimatedSearchInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Search } from 'lucide-react';
+import { TranslationKeys, useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 const AnimatedSearchInput = ({
@@ -15,6 +16,7 @@ const AnimatedSearchInput = ({
 }) => {
   const isSearching = searching === true;
   const hasValue = value != null && value.length > 0;
+  const localize = useLocalize();
 
   return (
     <div className="relative w-full">
@@ -25,7 +27,7 @@ const AnimatedSearchInput = ({
             <Search
               className={cn(
                 `h-4 w-4 transition-all duration-500 ease-in-out`,
-                isSearching && hasValue ? 'text-blue-400' : 'text-gray-400',
+                isSearching && hasValue ? 'text-blue-400' : 'text-gray-500',
               )}
             />
           </div>
@@ -36,7 +38,8 @@ const AnimatedSearchInput = ({
             value={value}
             onChange={onChange}
             placeholder={placeholder}
-            className={`peer relative z-20 w-full rounded-lg bg-surface-secondary px-10 py-2 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-400 focus:ring-ring`}
+            aria-label={localize('com_ui_search')}
+            className={`peer relative z-20 w-full rounded-lg bg-surface-secondary py-2 pl-10 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-500 focus:ring-ring`}
           />
 
           {/* Gradient overlay */}

packages/client/src/components/DataTable.tsx

@@ -14,8 +14,8 @@ import {
 } from '@tanstack/react-table';
 import type { Table as TTable } from '@tanstack/react-table';
 import { Table, TableRow, TableBody, TableCell, TableHead, TableHeader } from './Table';
+import { useMediaQuery, useLocalize, TranslationKeys } from '~/hooks';
 import AnimatedSearchInput from './AnimatedSearchInput';
-import { useMediaQuery, useLocalize } from '~/hooks';
 import { TrashIcon, Spinner } from '~/svgs';
 import { Skeleton } from './Skeleton';
 import { Checkbox } from './Checkbox';
@@ -129,7 +129,7 @@ const TableRowComponent = <TData, TValue>({
               )}
               scope="row"
             >
-              <div className="overflow-hidden text-ellipsis">
+              <div className="overflow-visible text-ellipsis">
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </div>
             </TableHead>
@@ -139,13 +139,13 @@ const TableRowComponent = <TData, TValue>({
         return (
           <TableCell
             key={cell.id}
-            className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
+            className="w-0 max-w-0 overflow-visible px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
             style={getColumnStyle(
               cell.column.columnDef as TableColumn<TData, TValue>,
               isSmallScreen,
             )}
           >
-            <div className="overflow-hidden text-ellipsis">
+            <div className="overflow-visible text-ellipsis">
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </div>
           </TableCell>
@@ -234,6 +234,7 @@ export default function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
   const [searchTerm, setSearchTerm] = useState(filterValue ?? '');
   const [isSearching, setIsSearching] = useState(false);
+  const [searchResultsAnnouncement, setSearchResultsAnnouncement] = useState('');
 
   const tableColumns = useMemo(() => {
     if (!enableRowSelection || !showCheckboxes) {
@@ -331,6 +332,29 @@ export default function DataTable<TData, TValue>({
     return () => clearTimeout(timeout);
   }, [searchTerm, onFilterChange]);
 
+  useEffect(() => {
+    if (!searchTerm.trim() || isSearching) {
+      setSearchResultsAnnouncement('');
+      return;
+    }
+
+    const resultCount = rows.length;
+    const announcement =
+      resultCount === 1
+        ? localize('com_ui_result_found' as TranslationKeys, {
+            count: resultCount,
+          })
+        : localize('com_ui_results_found' as TranslationKeys, {
+            count: resultCount,
+          });
+
+    const timeout = setTimeout(() => {
+      setSearchResultsAnnouncement(announcement);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [rows.length, searchTerm, isSearching, localize]);
+
   const handleDelete = useCallback(async () => {
     if (!onDelete) {
       return;
@@ -373,6 +397,10 @@ export default function DataTable<TData, TValue>({
 
   return (
     <div className={cn('flex h-full flex-col gap-4', className)}>
+      <div aria-live="assertive" aria-atomic="true" className="sr-only">
+        {searchResultsAnnouncement}
+      </div>
+
       {/* Table controls */}
       <div className="flex flex-wrap items-center gap-2 sm:gap-4">
         {enableRowSelection && showCheckboxes && (
@@ -400,7 +428,7 @@ export default function DataTable<TData, TValue>({
       <div
         ref={tableContainerRef}
         className={cn(
-          'relative h-[calc(100vh-20rem)] max-w-full overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10',
+          'relative min-h-0 max-w-full flex-1 overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10',
           'transition-all duration-300 ease-out',
           isSearching && 'bg-surface-secondary/50',
           className,

packages/client/src/components/DropdownPopup.tsx

@@ -145,6 +145,8 @@ const Menu: React.FC<MenuProps> = ({
               render={item.render}
               ref={item.ref}
               hideOnClick={item.hideOnClick}
+              aria-haspopup={item.ariaHasPopup}
+              aria-controls={item.ariaControls}
               onClick={(event) => {
                 event.preventDefault();
                 if (item.onClick) {

packages/client/src/components/OriginalDialog.tsx

@@ -72,7 +72,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'max-w-11/12 fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        'max-w-11/12 fixed left-[50%] top-[50%] z-50 grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className,
       )}
       {...props}
@@ -80,7 +80,7 @@ const DialogContent = React.forwardRef<
       {children}
       {showCloseButton && (
         <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <X className="h-4 w-4" />
+          <X className="h-6 w-6" />
           {/* eslint-disable-next-line i18next/no-literal-string */}
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

packages/client/src/components/ThemeSelector.tsx

@@ -1,6 +1,7 @@
 import { useContext, useCallback, useEffect, useState } from 'react';
 import { Sun, Moon, Monitor } from 'lucide-react';
 import { ThemeContext, isDark } from '../theme';
+import { useLocalize } from '../hooks';
 
 declare global {
   interface Window {
@@ -11,6 +12,8 @@ declare global {
 type ThemeType = 'system' | 'dark' | 'light';
 
 const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) => void }) => {
+  const localize = useLocalize();
+
   const themeIcons: Record<ThemeType, JSX.Element> = {
     system: <Monitor />,
     dark: <Moon color="white" />,
@@ -18,7 +21,6 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
   };
 
   const nextTheme = isDark(theme) ? 'light' : 'dark';
-  const label = `Switch to ${nextTheme} theme`;
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -33,8 +35,8 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
 
   return (
     <button
-      className="flex items-center gap-2 rounded-lg p-2 transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+      className="flex items-center gap-2 rounded-lg p-2 transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-0"
-      aria-label={label}
+      aria-label={localize('com_ui_toggle_theme')}
       aria-keyshortcuts="Ctrl+Shift+T"
       onClick={(e) => {
         e.preventDefault();
@@ -55,6 +57,7 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
 const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
   const { theme, setTheme } = useContext(ThemeContext);
   const [announcement, setAnnouncement] = useState('');
+  const localize = useLocalize();
 
   const changeTheme = useCallback(
     (value: string) => {
@@ -65,9 +68,13 @@ const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
       window.lastThemeChange = now;
 
       setTheme(value);
-      setAnnouncement(isDark(value) ? 'Dark theme enabled' : 'Light theme enabled');
+      setAnnouncement(
+        isDark(value)
+          ? localize('com_ui_dark_theme_enabled')
+          : localize('com_ui_light_theme_enabled'),
+      );
     },
-    [setTheme],
+    [setTheme, localize],
   );
 
   useEffect(() => {
@@ -93,11 +100,9 @@ const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }) => {
       <div className="absolute bottom-0 left-0 m-4">
         <Theme theme={theme} onChange={changeTheme} />
       </div>
-      {announcement && (
+      <div role="alert" aria-live="assertive" aria-atomic="true" className="sr-only">
-        <div aria-live="polite" className="sr-only">
+        {announcement}
-          {announcement}
+      </div>
-        </div>
-      )}
     </div>
   );
 };

packages/client/src/components/Toast.tsx

@@ -23,7 +23,7 @@ export function Toast() {
     >
       <div className="w-full p-1 text-center md:w-auto md:text-justify">
         <div
-          className={`alert-root pointer-events-auto inline-flex flex-row gap-2 rounded-md border px-3 py-2 text-white ${
+          className={`alert-root pointer-events-auto inline-flex flex-row gap-2 rounded-md border px-3 py-2 font-bold text-white ${
             severityClassName[toast.severity]
           }`}
         >

packages/client/src/locales/en/translation.json

@@ -3,5 +3,9 @@
   "com_ui_no_options": "No options available",
   "com_ui_delete_selected_items": "Delete selected items",
   "com_ui_filter_by": "Filter by {{title}}",
-  "com_ui_cancel_dialog": "Cancel dialog"
+  "com_ui_cancel_dialog": "Cancel dialog",
+  "com_ui_toggle_theme": "Toggle theme",
+  "com_ui_dark_theme_enabled": "Dark theme enabled",
+  "com_ui_light_theme_enabled": "Light theme enabled",
+  "com_ui_search": "Search..."
 }