Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-05 10:08:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🛂 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/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}