Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-30 14:25:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

☰ fix: Side Panel Accessibility Improvements (#10830)

Browse source 
* fix: pad cards so focus outline doesn't clip in prompts list

* feat: pad snippet top for space between text and button

* fix: prompt menu focus outline clipping with overflow-visible

* fix: clipping in AgentBuilder for advanced and admin buttons

* fix: clipping in memory panel for admin settings

* fix: better contrast thresholds on focus outlines for admin settings and advanced buttons in agent builder

* fix: better contrast thresholds on focus outlines for admin settings  button in memory panel

* fix: clipping on focus outline for manage files button in files panel

* fix: focus outline clipping table cells for files panel table

* fix: clipping on new bookmark button in bookmarks panel

* fix: clipping on Admin Settings button in MCP Settings panel

* fix: better contrast threshold outline and aria-label for Admin Settings button in MCP Settings panel

* fix: misaligned globe because of new unnested menu button positioning

* fix: localize global group aria-label

* fix: screen reader not reading out proper prompt name for dropdown menu button
This commit is contained in:
Dustin Healy 2025-12-09 17:17:23 -08:00 • committed by Danny Avila
parent 9e67eee294
commit 6fc6471010
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
15 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Prompts/Groups/ChatGroupItem.tsx
View file

@ -55,7 +55,7 @@ function ChatGroupItem({
return (
<>
<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">
<div className="relative my-2 items-stretch justify-between rounded-xl border border-border-light px-1 shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg">
<ListCard
name={group.name}
category={group.category ?? ''}
@ -65,13 +65,15 @@ function ChatGroupItem({
? group.oneliner
: (group.productionPrompt?.prompt ?? '')
}
>
<div className="flex flex-row items-center gap-2">
{groupIsGlobal === true && (
<EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
)}
></ListCard>
{groupIsGlobal === true && (
<div className="absolute right-14 top-[16px]">
<EarthIcon
className="icon-md text-green-400"
aria-label={localize('com_ui_sr_global_prompt')}
/>
</div>
</ListCard>
)}
<div className="absolute right-0 top-0 mr-1 mt-2.5 items-start pl-2">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
@ -79,7 +81,7 @@ function ChatGroupItem({
ref={triggerButtonRef}
id={`prompt-actions-${group._id}`}
type="button"
aria-label={localize('com_ui_sr_actions_menu', { name: group.name })}
aria-label={localize('com_ui_sr_actions_menu', { 0: group.name })}
onClick={(e) => {
e.stopPropagation();
}}

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

@ -55,7 +55,7 @@ export default function GroupSidePanel({
/>
</div>
)}
<div className="flex flex-1 flex-col gap-2 overflow-y-auto">
<div className="flex flex-1 flex-col gap-2 overflow-visible">
{children}
<div className={cn('relative flex h-full flex-col', isChatRoute ? '' : 'px-2 md:px-0')}>
<List

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

@ -50,7 +50,7 @@ export default function ListCard({
</div>
<div
id={`card-snippet-${name}`}
className="ellipsis max-w-full select-none text-balance text-sm text-text-secondary"
className="ellipsis max-w-full select-none text-balance pt-1 text-sm text-text-secondary"
>
{snippet}
</div>