Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* feat: add persistent label to Filter Memories... input in memory side panel
This commit is contained in:
Dustin Healy 2025-11-25 11:35:59 -08:00 • committed by Danny Avila
parent 1143f73f59
commit 39cecc97bd
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
22 changed files with 81 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Auth/AuthLayout.tsx
View file

@ -73,7 +73,7 @@ function AuthLayout({
<ThemeSelector />
</div>
<div className="flex flex-grow items-center justify-center">
<main 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">
{!hasStartupConfigError && !isFetching && header && (
<h1
@ -89,7 +89,7 @@ function AuthLayout({
<SocialLoginRender startupConfig={startupConfig} />
)}
</div>
</div>
</main>
<Footer startupConfig={startupConfig} />
</div>
);

4
client/src/components/Bookmarks/BookmarkItem.tsx
View file

@ -40,10 +40,10 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
}
if (selected) {
return <BookmarkFilledIcon className="size-4" />;
return <BookmarkFilledIcon aria-hidden="true" className="size-4" />;
}
return <BookmarkIcon className="size-4" />;
return <BookmarkIcon aria-hidden="true" className="size-4" />;
};
return (

7
client/src/components/Chat/Footer.tsx
View file

@ -20,6 +20,9 @@ export default function Footer({ className }: { className?: string }) {
rel="noreferrer"
>
{localize('com_ui_privacy_policy')}
{privacyPolicy.openNewTab === true && (
<span className="sr-only">{' ' + localize('com_ui_opens_new_tab')}</span>
)}
</a>
);
@ -31,6 +34,9 @@ export default function Footer({ className }: { className?: string }) {
rel="noreferrer"
>
{localize('com_ui_terms_of_service')}
{termsOfService.openNewTab === true && (
<span className="sr-only">{' ' + localize('com_ui_opens_new_tab')}</span>
)}
</a>
);
@ -66,6 +72,7 @@ export default function Footer({ className }: { className?: string }) {
{...otherProps}
>
{children}
<span className="sr-only">{' ' + localize('com_ui_opens_new_tab')}</span>
</a>
);
},

55
client/src/components/Chat/Input/Files/ImagePreview.tsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { Maximize2 } from 'lucide-react';
import { FileSources } from 'librechat-data-provider';
import { OGDialog, OGDialogContent } from '@librechat/client';
@ -13,11 +13,6 @@ type styleProps = {
backgroundRepeat?: string;
};
interface CloseModalEvent {
stopPropagation: () => void;
preventDefault: () => void;
}
const ImagePreview = ({
imageBase64,
url,
@ -35,53 +30,32 @@ const ImagePreview = ({
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [previousActiveElement, setPreviousActiveElement] = useState<Element | null>(null);
const triggerRef = useRef<HTMLButtonElement>(null);
const openModal = useCallback(() => {
setPreviousActiveElement(document.activeElement);
setIsModalOpen(true);
}, []);
const closeModal = useCallback(
(e: CloseModalEvent): void => {
setIsModalOpen(false);
e.stopPropagation();
e.preventDefault();
if (
previousActiveElement instanceof HTMLElement &&
!previousActiveElement.closest('[data-skip-refocus="true"]')
) {
previousActiveElement.focus();
}
},
[previousActiveElement],
);
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
closeModal(e);
}
},
[closeModal],
);
const handleOpenChange = useCallback((open: boolean) => {
setIsModalOpen(open);
if (!open && triggerRef.current) {
requestAnimationFrame(() => {
triggerRef.current?.focus({ preventScroll: true });
});
}
}, []);
useEffect(() => {
if (isModalOpen) {
document.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
const closeButton = document.querySelector('[aria-label="Close full view"]') as HTMLElement;
if (closeButton) {
setTimeout(() => closeButton.focus(), 0);
}
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
};
}, [isModalOpen, handleKeyDown]);
}, [isModalOpen]);
const baseStyle: styleProps = {
backgroundSize: 'cover',
@ -117,6 +91,7 @@ const ImagePreview = ({
onMouseLeave={() => setIsHovered(false)}
>
<button
ref={triggerRef}
type="button"
className="size-full overflow-hidden rounded-xl"
style={style}
@ -158,7 +133,7 @@ const ImagePreview = ({
<SourceIcon source={source} aria-label={source ? `Source: ${source}` : undefined} />
</div>
<OGDialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<OGDialog open={isModalOpen} onOpenChange={handleOpenChange}>
<OGDialogContent
showCloseButton={false}
className="w-11/12 overflow-x-auto bg-transparent p-0 sm:w-auto"

2
client/src/components/Chat/Input/Files/Table/Columns.tsx
View file

@ -79,7 +79,7 @@ export const columns: ColumnDef<TFile>[] = [
<div className="flex gap-2">
<ImagePreview
url={file.filepath}
className="relative h-10 w-10 shrink-0 overflow-hidden rounded-md"
className="relative h-10 w-10 shrink-0 overflow-visible rounded-md"
source={file.source}
/>
<span className="self-center truncate">{file.filename}</span>

9
client/src/components/Chat/Input/Files/Table/DataTable.tsx
View file

@ -158,8 +158,8 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
{headerGroup.headers.map((header, index) => {
const style: Style = {};
if (index === 0 && header.id === 'select') {
style.width = '35px';
style.minWidth = '35px';
style.width = '36px';
style.minWidth = '36px';
} else if (header.id === 'filename') {
style.width = isSmallScreen ? '60%' : '40%';
} else {
@ -204,7 +204,10 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
return (
<TableCell
key={cell.id}
className="align-start overflow-x-auto px-2 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm [tr[data-disabled=true]_&]:opacity-50"
className={cn(
'align-start px-2 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm [tr[data-disabled=true]_&]:opacity-50',
cell.column.id === 'select' ? 'overflow-visible' : 'overflow-x-auto',
)}
style={style}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}

2
client/src/components/Chat/Menus/OpenSidebar.tsx
View file

@ -30,7 +30,7 @@ export default function OpenSidebar({
})
}
>
<Sidebar />
<Sidebar aria-hidden="true" />
</Button>
}
/>

1
client/src/components/Chat/TemporaryChat.tsx
View file

@ -42,6 +42,7 @@ export function TemporaryChat() {
<button
onClick={handleBadgeToggle}
aria-label={localize(temporaryBadge.label)}
aria-pressed={isTemporary}
className={cn(
'inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light text-text-primary transition-all ease-in-out hover:bg-surface-tertiary',
isTemporary

5
client/src/components/Conversations/ConvoLink.tsx
View file

@ -30,7 +30,10 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
>
{children}
<div
className="relative flex-1 grow overflow-hidden whitespace-nowrap"
className={cn(
'relative flex-1 grow overflow-hidden whitespace-nowrap',
isActiveConvo && 'italic',
)}
style={{ textOverflow: 'clip' }}
onDoubleClick={(e) => {
if (isSmallScreen) {

4
client/src/components/Nav/Bookmarks/BookmarkNav.tsx
View file

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

4
client/src/components/Nav/Bookmarks/BookmarkNavItems.tsx
View file

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

7
client/src/components/Nav/NewChat.tsx
View file

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

7
client/src/components/Nav/SearchBar.tsx
View file

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

2
client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
View file

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

4
client/src/components/Prompts/AdvancedSwitch.tsx
View file

@ -30,6 +30,8 @@ const AdvancedSwitch = () => {
setAlwaysMakeProd(true);
setMode(PromptsEditorMode.SIMPLE);
}}
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 ${
mode === PromptsEditorMode.SIMPLE
? 'text-text-primary'
@ -43,6 +45,8 @@ const AdvancedSwitch = () => {
<button
type="button"
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 ${
mode === PromptsEditorMode.ADVANCED
? 'text-text-primary'

2
client/src/components/Prompts/Groups/PanelNavigation.tsx
View file

@ -23,7 +23,7 @@ function PanelNavigation({
return (
<div className="flex items-center justify-between">
<div className="flex gap-2">
<div className="flex gap-2 pl-1">
{!isChatRoute && <ThemeSelector returnThemeOnly={true} />}
{children}
</div>

5
client/src/components/Prompts/PromptEditor.tsx
View file

@ -55,7 +55,8 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
return (
<div className="flex max-h-[85vh] flex-col sm:max-h-[85vh]">
<h2 className="flex items-center justify-between rounded-t-xl border border-border-light py-1.5 pl-3 text-sm font-semibold text-text-primary sm:py-2 sm:pl-4 sm:text-base">
<h2 className="sr-only">{localize('com_ui_control_bar')}</h2>
<div className="flex items-center justify-between rounded-t-xl border border-border-light py-1.5 pl-3 text-sm font-semibold text-text-primary sm:py-2 sm:pl-4 sm:text-base">
<span className="max-w-[200px] truncate sm:max-w-none">
{localize('com_ui_prompt_text')}
</span>
@ -78,7 +79,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
/>
</button>
</div>
</h2>
</div>
<div
role="button"
className={cn(

1
client/src/components/Prompts/PromptForm.tsx
View file

@ -387,6 +387,7 @@ const PromptForm = () => {
return (
<FormProvider {...methods}>
<form className="mt-4 flex w-full" onSubmit={handleSubmit((data) => onSave(data.prompt))}>
<h1 className="sr-only">{localize('com_ui_edit_prompt_page')}</h1>
<div className="relative w-full">
<div
className="h-full w-full"

6
client/src/components/Prompts/PromptVersions.tsx
View file

@ -51,8 +51,8 @@ const VersionTags = ({ tags }: { tags: string[] }) => {
className={cn(
'w-24 justify-center border border-transparent',
tag === 'production'
? 'bg-green-100 text-green-500 dark:border-green-500 dark:bg-transparent dark:text-green-500'
: 'bg-blue-100 text-blue-500 dark:border-blue-500 dark:bg-transparent dark:text-blue-500',
? 'bg-green-100 text-green-700 dark:border-green-400 dark:bg-transparent dark:text-green-400'
: 'bg-blue-100 text-blue-700 dark:border-blue-400 dark:bg-transparent dark:text-blue-400',
)}
labelClassName="flex items-center m-0 justify-center gap-1"
LabelNode={(() => {
@ -105,7 +105,7 @@ const VersionCard = ({
className={cn(
'group relative w-full rounded-lg border border-border-light p-4 transition-all duration-300',
isSelected
? 'bg-surface-hover shadow-xl'
? 'bg-surface-secondary shadow-xl ring-2 ring-gray-400'
: 'bg-surface-primary shadow-sm hover:bg-surface-secondary',
)}
onClick={onClick}

12
client/src/components/SidePanel/Memories/MemoryViewer.tsx
View file

@ -236,13 +236,21 @@ export default function MemoryViewer() {
return (
<div className="flex h-full w-full flex-col overflow-hidden">
<div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-2">
<div className="flex items-center gap-4">
<div className="relative">
<Input
placeholder={localize('com_ui_memories_filter')}
id="memory-search"
placeholder=" "
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
aria-label={localize('com_ui_memories_filter')}
className="peer"
/>
<Label
htmlFor="memory-search"
className="pointer-events-none absolute -top-1 left-3 w-auto origin-[0] translate-y-3 scale-100 rounded bg-background 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"
>
{localize('com_ui_memories_filter')}
</Label>
</div>
{/* Memory Usage and Toggle Display */}
{(memData?.tokenLimit || hasOptOutAccess) && (

3
client/src/locales/en/translation.json
View file

@ -797,6 +797,7 @@
"com_ui_context": "Context",
"com_ui_continue": "Continue",
"com_ui_continue_oauth": "Continue with OAuth",
"com_ui_control_bar": "Control bar",
"com_ui_controls": "Controls",
"com_ui_convo_delete_error": "Failed to delete conversation",
"com_ui_convo_delete_success": "Conversation successfully deleted",
@ -883,6 +884,7 @@
"com_ui_edit_editing_image": "Editing image",
"com_ui_edit_mcp_server": "Edit MCP Server",
"com_ui_edit_memory": "Edit Memory",
"com_ui_edit_prompt_page": "Edit Prompt Page",
"com_ui_editable_message": "Editable Message",
"com_ui_editor_instructions": "Drag the image to reposition • Use zoom slider or buttons to adjust size",
"com_ui_empty_category": "-",
@ -1241,6 +1243,7 @@
"com_ui_temporary": "Temporary Chat",
"com_ui_terms_and_conditions": "Terms and Conditions",
"com_ui_terms_of_service": "Terms of service",
"com_ui_opens_new_tab": "(opens in new tab)",
"com_ui_thinking": "Thinking...",
"com_ui_thoughts": "Thoughts",
"com_ui_token": "token",

2
packages/client/src/components/Toast.tsx
View file

@ -7,7 +7,7 @@ export function Toast() {
const severityClassName = {
[NotificationSeverity.INFO]: 'border-gray-500 bg-gray-500',
[NotificationSeverity.SUCCESS]: 'border-green-500 bg-green-500',
[NotificationSeverity.WARNING]: 'border-orange-500 bg-orange-500',
[NotificationSeverity.WARNING]: 'border-orange-600 bg-orange-600',
[NotificationSeverity.ERROR]: 'border-red-500 bg-red-500',
};