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

♿️ a11y: Enhance Accessibility in ToolSelectDialog, ThemeSelector and ChatGroupItem (#5395)

Browse source 
* feat: Add keyboard shortcut for theme switching and improve accessibility announcements

* fix: Improve accessibility of ToolSelectDialog close button

* feat: Enhance accessibility in ChatGroupItem component
This commit is contained in:
Marco Beretta 2025-01-22 03:54:13 +01:00 • committed by GitHub
parent 199e5e6eaf
commit 2d3dd9e351
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 89 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,6 +27,7 @@ function ChatGroupItem({
const [isPreviewDialogOpen, setPreviewDialogOpen] = useState(false);
const [isVariableDialogOpen, setVariableDialogOpen] = useState(false);
const onEditClick = useCustomLink<HTMLDivElement>(`/d/prompts/${group._id}`);
const groupIsGlobal = useMemo(
() => instanceProjectId != null && group.projectIds?.includes(instanceProjectId),
[group, instanceProjectId],
@ -34,13 +35,14 @@ function ChatGroupItem({
const isOwner = useMemo(() => user?.id === group.author, [user, group]);
const onCardClick: React.MouseEventHandler<HTMLButtonElement> = () => {
const text = group.productionPrompt?.prompt ?? '';
if (!text) {
const text = group.productionPrompt?.prompt;
if (!text?.trim()) {
return;
}
const hasVariables = detectVariables(text);
if (hasVariables) {
return setVariableDialogOpen(true);
if (detectVariables(text)) {
setVariableDialogOpen(true);
return;
}
submitPrompt(text);
@ -59,33 +61,47 @@ function ChatGroupItem({
}
>
<div className="flex flex-row items-center gap-2">
{groupIsGlobal === true && <EarthIcon className="icon-md text-green-400" />}
{groupIsGlobal === true && (
<EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
)}
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<button
id="prompts-menu-trigger"
aria-label="prompts-menu-trigger"
id={`prompt-actions-${group._id}`}
aria-label={`${group.name} - Actions Menu`}
aria-expanded="false"
aria-controls={`prompt-menu-${group._id}`}
aria-haspopup="menu"
onClick={(e) => {
e.stopPropagation();
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation();
}
}}
className="z-50 inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-secondary focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
<MenuIcon className="icon-md text-text-secondary" />
<MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
<span className="sr-only">Open actions menu for {group.name}</span>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
id={`prompt-menu-${group._id}`}
aria-label={`Available actions for ${group.name}`}
className="z-50 mt-2 w-36 rounded-lg"
collisionPadding={2}
align="end"
>
<DropdownMenuItem
role="menuitem"
onClick={(e) => {
e.stopPropagation();
setPreviewDialogOpen(true);
}}
className="w-full cursor-pointer rounded-lg text-text-secondary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
>
<TextSearch className="mr-2 h-4 w-4" />
<TextSearch className="mr-2 h-4 w-4" aria-hidden="true" />
<span>{localize('com_ui_preview')}</span>
</DropdownMenuItem>
{isOwner && (
@ -98,7 +114,7 @@ function ChatGroupItem({
onEditClick(e);
}}
>
<EditIcon className="mr-2 h-4 w-4" />
<EditIcon className="mr-2 h-4 w-4" aria-hidden="true" />
<span>{localize('com_ui_edit')}</span>
</DropdownMenuItem>
</DropdownMenuGroup>