🙌 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
danny-avila · Dec 13, 2024 · 0a5bc50 · 0a5bc50
1 parent 763693c
commit 0a5bc50
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 26 deletions.
diff --git a/client/src/a11y/LiveAnnouncer.tsx b/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';

diff --git a/client/src/components/Audio/Voices.tsx b/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';

diff --git a/client/src/components/Auth/AuthLayout.tsx b/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' }}

diff --git a/client/src/components/Auth/ErrorMessage.tsx b/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>

diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/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')}
         />
       )}
     </>

diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
@@ -5,13  5,15 @@ 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 = () => {
   const { data: endpoints = [] } = useGetEndpointsQuery({
     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} />

diff --git a/client/src/components/Chat/Menus/Models/MenuButton.tsx b/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} />

diff --git a/client/src/components/Chat/Menus/Models/ModelSpec.tsx b/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}

diff --git a/client/src/components/Chat/Menus/Models/ModelSpecs.tsx b/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;

diff --git a/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx b/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

diff --git a/client/src/components/Chat/Menus/UI/MenuItem.tsx b/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(

diff --git a/client/src/components/Chat/Menus/UI/TitleButton.tsx b/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-haspopup="dialog"
         aria-label={localize('com_ui_endpoint_menu')}
         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>

diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/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,

diff --git a/client/src/components/Nav/ExportConversation/ExportModal.tsx b/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"

diff --git a/client/src/components/ui/OriginalDialog.tsx b/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;
 

diff --git a/client/src/components/ui/Toast.tsx b/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">

diff --git a/client/src/hooks/SSE/useSSE.ts b/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) {

diff --git a/client/src/localization/languages/Eng.ts b/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',