🙌 a11y: Accessibility Improvements (#4978)

* 🔃 fix: Safeguard against null token in SSE refresh token handling

* 🔃 fix: Update import path for AnnounceOptions in LiveAnnouncer component

* 🔃 a11y: Add aria-live attribute for accessibility in error messages

* fix: prevent double screen reader notification for toast

* 🔃 a11y: Enhance accessibility for main menus and buttons with ARIA roles and labels

* refactor: better alt text for logo on login page #4095

* refactor: remove unused import for DropdownNoState in Voices component

* fix: Focus management issue in the Export Options Modal #4100

client/src/a11y/LiveAnnouncer.tsx

@@ -1,6 +1,6 @@
 // client/src/a11y/LiveAnnouncer.tsx
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import type { AnnounceOptions } from '~/Providers/AnnouncerContext';
+import type { AnnounceOptions } from '~/common';
 import AnnouncerContext from '~/Providers/AnnouncerContext';
 import useLocalize from '~/hooks/useLocalize';
 import Announcer from './Announcer';

client/src/components/Audio/Voices.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import type { Option } from '~/common';
-import DropdownNoState from '~/components/ui/DropdownNoState';
 import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
 import { Dropdown } from '~/components/ui';
 import { logger } from '~/utils';

client/src/components/Auth/AuthLayout.tsx

@@ -9,8 +9,9 @@ import Footer from './Footer';
 const ErrorRender = ({ children }: { children: React.ReactNode }) => (
   <div className="mt-16 flex justify-center">
     <div
-      className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
       role="alert"
+      aria-live="assertive"
+      className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
     >
       {children}
     </div>
@@ -36,8 +37,9 @@ function AuthLayout({
 }) {
   const localize = useLocalize();
 
+  const hasStartupConfigError = startupConfigError !== null && startupConfigError !== undefined;
   const DisplayError = () => {
-    if (startupConfigError !== null && startupConfigError !== undefined) {
+    if (hasStartupConfigError) {
       return <ErrorRender>{localize('com_auth_error_login_server')}</ErrorRender>;
     } else if (error === 'com_auth_error_invalid_reset_token') {
       return (
@@ -49,7 +51,7 @@ function AuthLayout({
           {localize('com_auth_to_try_again')}
         </ErrorRender>
       );
-    } else if (error) {
+    } else if (error != null && error) {
       return <ErrorRender>{localize(error)}</ErrorRender>;
     }
     return null;
@@ -60,7 +62,11 @@ function AuthLayout({
       <Banner />
       <BlinkAnimation active={isFetching}>
         <div className="mt-6 h-10 w-full bg-cover">
-          <img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />
+          <img
+            src="/assets/logo.svg"
+            className="h-full w-full object-contain"
+            alt={localize('com_ui_logo', startupConfig?.appTitle ?? 'LibreChat')}
+          />
         </div>
       </BlinkAnimation>
       <DisplayError />
@@ -70,7 +76,7 @@ function AuthLayout({
 
       <div className="flex flex-grow items-center justify-center">
         <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
-          {!startupConfigError && !isFetching && (
+          {!hasStartupConfigError && !isFetching && (
             <h1
               className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
               style={{ userSelect: 'none' }}

client/src/components/Auth/ErrorMessage.tsx

@@ -1,7 +1,8 @@
 export const ErrorMessage = ({ children }: { children: React.ReactNode }) => (
   <div
-    className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
     role="alert"
+    aria-live="assertive"
+    className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
   >
     {children}
   </div>

client/src/components/Chat/ExportAndShareMenu.tsx

@@ -1,11 +1,11 @@
-import { useState, useId } from 'react';
+import { useState, useId, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Ariakit from '@ariakit/react';
 import { Upload, Share2 } from 'lucide-react';
 import { ShareButton } from '~/components/Conversations/ConvoOptions';
 import { useMediaQuery, useLocalize } from '~/hooks';
+import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
 import { DropdownPopup } from '~/components/ui';
-import { ExportModal } from '../Nav';
 import store from '~/store';
 
 export default function ExportAndShareMenu({
@@ -19,6 +19,7 @@ export default function ExportAndShareMenu({
   const [showShareDialog, setShowShareDialog] = useState(false);
 
   const menuId = useId();
+  const exportButtonRef = useRef<HTMLButtonElement>(null);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const conversation = useRecoilValue(store.conversationByIndex(0));
 
@@ -68,6 +69,7 @@ export default function ExportAndShareMenu({
         setIsOpen={setIsPopoverActive}
         trigger={
           <Ariakit.MenuButton
+            ref={exportButtonRef}
             id="export-menu-button"
             aria-label="Export options"
             className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
@@ -91,7 +93,8 @@ export default function ExportAndShareMenu({
           open={showExports}
           onOpenChange={onOpenChange}
           conversation={conversation}
-          aria-label="Export conversation modal"
+          triggerRef={exportButtonRef}
+          aria-label={localize('com_ui_export_convo_modal')}
         />
       )}
     </>

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

@@ -5,6 +5,7 @@ import type { FC } from 'react';
 import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
 import { mapEndpoints, getEntity } from '~/utils';
 import EndpointItems from './Endpoints/MenuItems';
+import useLocalize from '~/hooks/useLocalize';
 import TitleButton from './UI/TitleButton';
 
 const EndpointsMenu: FC = () => {
@@ -12,6 +13,7 @@ const EndpointsMenu: FC = () => {
     select: mapEndpoints,
   });
 
+  const localize = useLocalize();
   const agentsMap = useAgentsMapContext();
   const assistantMap = useAssistantsMapContext();
   const { conversation } = useChatContext();
@@ -51,6 +53,9 @@ const EndpointsMenu: FC = () => {
           <Content
             side="bottom"
             align="start"
+            role="listbox"
+            id="llm-endpoint-menu"
+            aria-label={localize('com_ui_endpoints_available')}
             className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-border-light bg-header-primary text-text-primary shadow-lg lg:max-h-[75vh]"
           >
             <EndpointItems endpoints={endpoints} selected={endpoint} />

client/src/components/Chat/Menus/Models/MenuButton.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Trigger } from '@radix-ui/react-popover';
 import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
 import { useLocalize } from '~/hooks';
@@ -20,6 +21,8 @@ export default function MenuButton({
   endpointsConfig: TEndpointsConfig;
 }) {
   const localize = useLocalize();
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
     <Trigger asChild>
       <button
@@ -28,7 +31,13 @@ export default function MenuButton({
           className,
         )}
         type="button"
-        aria-label={`Select ${primaryText}`}
+        aria-label={localize('com_ui_llm_menu')}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={isExpanded}
+        aria-controls="llm-menu"
+        aria-activedescendant={isExpanded ? 'selected-llm' : undefined}
+        onClick={() => setIsExpanded(!isExpanded)}
       >
         {selected && selected.showIconInHeader === true && (
           <SpecIcon currentSpec={selected} endpointsConfig={endpointsConfig} />

client/src/components/Chat/Menus/Models/ModelSpec.tsx

@@ -54,7 +54,9 @@ const MenuItem: FC<MenuItemProps> = ({
   return (
     <>
       <div
-        role="menuitem"
+        id={selected ? 'selected-llm' : undefined}
+        role="option"
+        aria-selected={selected}
         className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
         tabIndex={0}
         {...rest}

client/src/components/Chat/Menus/Models/ModelSpecs.tsx

@@ -6,14 +6,14 @@ import MenuSeparator from '~/components/Chat/Menus/UI/MenuSeparator';
 import ModelSpec from './ModelSpec';
 
 const ModelSpecs: FC<{
-  specs?: TModelSpec[];
+  specs?: Array<TModelSpec | undefined>;
   selected?: TModelSpec;
   setSelected?: (spec: TModelSpec) => void;
   endpointsConfig: TEndpointsConfig;
 }> = ({ specs = [], selected, setSelected = () => ({}), endpointsConfig }) => {
   return (
     <>
-      {specs &&
+      {specs.length &&
         specs.map((spec, i) => {
           if (!spec) {
             return null;

client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx

@@ -5,8 +5,8 @@ import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TModelSpec, TConversation, TEndpointsConfig } from 'librechat-data-provider';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import { useDefaultConvo, useNewConvo, useLocalize } from '~/hooks';
 import { getConvoSwitchLogic, getModelSpecIconURL } from '~/utils';
-import { useDefaultConvo, useNewConvo } from '~/hooks';
 import MenuButton from './MenuButton';
 import ModelSpecs from './ModelSpecs';
 import store from '~/store';
@@ -15,6 +15,7 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
   const { conversation } = useChatContext();
   const { newConversation } = useNewConvo();
 
+  const localize = useLocalize();
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   const modularChat = useRecoilValue(store.modularChat);
   const getDefaultConversation = useDefaultConvo();
@@ -111,6 +112,9 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
             <Content
               side="bottom"
               align="start"
+              id="llm-menu"
+              role="listbox"
+              aria-label={localize('com_ui_llms_available')}
               className="models-scrollbar mt-2 max-h-[65vh] min-w-[340px] max-w-xs overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-[75vh]"
             >
               <ModelSpecs

client/src/components/Chat/Menus/UI/MenuItem.tsx

@@ -32,7 +32,9 @@ const MenuItem: FC<MenuItemProps> = ({
 }) => {
   return (
     <div
-      role="menuitem"
+      id={selected ? 'selected-endpoint' : undefined}
+      role="option"
+      aria-selected={selected}
       aria-label={title}
       data-testid="chat-menu-item"
       className={cn(

client/src/components/Chat/Menus/UI/TitleButton.tsx

@@ -1,18 +1,22 @@
 import { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
 import { Trigger } from '@radix-ui/react-popover';
+import useLocalize from '~/hooks/useLocalize';
 
 export default function TitleButton({ primaryText = '', secondaryText = '' }) {
+  const localize = useLocalize();
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
     <Trigger asChild>
       <button
         className="group flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors duration-200 hover:bg-surface-hover radix-state-open:bg-surface-hover"
-        aria-label={`Select ${primaryText}`}
+        aria-label={localize('com_ui_endpoint_menu')}
-        aria-haspopup="dialog"
         aria-expanded={isExpanded}
-        aria-controls="radix-:r6:"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="llm-endpoint-menu"
+        aria-activedescendant={isExpanded ? 'selected-endpoint' : undefined}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div>

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

@@ -56,6 +56,8 @@ export const ErrorMessage = ({
   return (
     <Container message={message}>
       <div
+        role="alert"
+        aria-live="assertive"
         className={cn(
           'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
           className,

client/src/components/Nav/ExportConversation/ExportModal.tsx

@@ -9,10 +9,12 @@ export default function ExportModal({
   open,
   onOpenChange,
   conversation,
+  triggerRef,
 }: {
   open: boolean;
-  onOpenChange: (open: boolean) => void;
   conversation: TConversation | null;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLButtonElement>;
 }) {
   const localize = useLocalize();
 
@@ -31,6 +33,12 @@ export default function ExportModal({
     { value: 'csv', label: 'csv (.csv)' },
   ];
 
+  useEffect(() => {
+    if (!open && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open, triggerRef]);
+
   useEffect(() => {
     setFileName(filenamify(String(conversation?.title ?? 'file')));
     setType('screenshot');
@@ -61,7 +69,7 @@ export default function ExportModal({
   });
 
   return (
-    <OGDialog open={open} onOpenChange={onOpenChange}>
+    <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
       <OGDialogTemplate
         title={localize('com_nav_export_conversation')}
         className="max-w-full sm:max-w-2xl"

client/src/components/ui/OriginalDialog.tsx

@@ -3,7 +3,28 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { cn } from '~/utils';
 
-const Dialog = DialogPrimitive.Root;
+interface OGDialogProps extends DialogPrimitive.DialogProps {
+  triggerRef?: React.RefObject<HTMLButtonElement>;
+}
+
+const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
+  ({ children, triggerRef, onOpenChange, ...props }) => {
+    const handleOpenChange = (open: boolean) => {
+      if (!open && triggerRef?.current) {
+        setTimeout(() => {
+          triggerRef.current?.focus();
+        }, 0);
+      }
+      onOpenChange?.(open);
+    };
+
+    return (
+      <DialogPrimitive.Root {...props} onOpenChange={handleOpenChange}>
+        {children}
+      </DialogPrimitive.Root>
+    );
+  },
+);
 
 const DialogTrigger = DialogPrimitive.Trigger;
 

client/src/components/ui/Toast.tsx

@@ -26,7 +26,6 @@ export default function Toast() {
           className={`alert-root pointer-events-auto inline-flex flex-row gap-2 rounded-md border px-3 py-2 text-white ${
             severityClassName[toast.severity]
           }`}
-          role="alert"
         >
           {toast.showIcon && (
             <div className="mt-1 flex-shrink-0 flex-grow-0">

client/src/hooks/SSE/useSSE.ts

@@ -190,11 +190,16 @@ export default function useSSE(
         /* token expired, refresh and retry */
         try {
           const refreshResponse = await request.refreshToken();
+          const token = refreshResponse?.token ?? '';
+          if (!token) {
+            throw new Error('Token refresh failed.');
+          }
           sse.headers = {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${refreshResponse.token}`,
+            Authorization: `Bearer ${token}`,
           };
-          request.dispatchTokenUpdatedEvent(refreshResponse.token);
+
+          request.dispatchTokenUpdatedEvent(token);
           sse.stream();
           return;
         } catch (error) {

client/src/localization/languages/Eng.ts

@@ -179,6 +179,11 @@ export default {
   com_ui_input: 'Input',
   com_ui_close: 'Close',
   com_ui_endpoint: 'Endpoint',
+  com_ui_endpoint_menu: 'LLM Endpoint Menu',
+  com_ui_endpoints_available: 'Available Endpoints',
+  com_ui_export_convo_modal: 'Export Conversation Modal',
+  com_ui_llms_available: 'Available LLMs',
+  com_ui_llm_menu: 'LLM Menu',
   com_ui_provider: 'Provider',
   com_ui_model: 'Model',
   com_ui_region: 'Region',
@@ -297,6 +302,7 @@ export default {
   com_ui_edit: 'Edit',
   com_ui_loading: 'Loading...',
   com_ui_success: 'Success',
+  com_ui_logo: '{0} Logo',
   com_ui_all: 'all',
   com_ui_all_proper: 'All',
   com_ui_clear: 'Clear',