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

👐 a11y: Accessible Conversation Menu Options (#3864)

Browse source 
* fix: type issues

* feat: Fix document title setting in Conversation component

* style: new chat theme

* fix: No keyboard access to chat menus in the chat history #3788

* fix: Menu button in the chat history area does not indicate its state #3823

* refactor: use ariakit for DropdownPopup

* style: update sticky z-index in NewChat component

* style: update ConvoOptions menu button styling
This commit is contained in:
Danny Avila 2024-08-30 13:39:30 -04:00 • committed by GitHub
parent 2ce4f66218
commit 0a359aa705
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 122 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
View file

@ -1,12 +1,13 @@
import { useState } from 'react';
import { useState, useId } from 'react';
import * as Ariakit from '@ariakit/react';
import { Ellipsis, Share2, Archive, Pen, Trash } from 'lucide-react';
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
import { Button } from '~/components/ui';
import { useArchiveHandler } from './ArchiveButton';
import { DropdownPopup } from '~/components/ui';
import DeleteButton from './DeleteButton';
import ShareButton from './ShareButton';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function ConvoOptions({
conversation,
@ -57,27 +58,29 @@ export default function ConvoOptions({
},
];
const menuId = useId();
return (
<>
<DropdownPopup
isOpen={isPopoverActive}
setIsOpen={setIsPopoverActive}
trigger={
<Button
<Ariakit.MenuButton
id="conversation-menu-button"
aria-label="conversation-menu-button"
variant="link"
className="z-10 h-7 w-7 border-none p-0 transition-all duration-200 ease-in-out"
aria-label={localize('com_nav_convo_menu_options')}
className={cn(
'z-30 inline-flex h-7 w-7 items-center justify-center gap-2 rounded-md border-none p-0 text-sm font-medium transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
isActiveConvo === true
? 'opacity-100'
: 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100',
)}
>
<Ellipsis className="icon-md text-text-secondary" />
</Button>
</Ariakit.MenuButton>
}
items={dropdownItems}
className={`${
isActiveConvo === true
? 'opacity-100'
: 'opacity-0 focus:opacity-100 group-hover:opacity-100 data-[open]:opacity-100'
}`}
menuId={menuId}
/>
{showShareDialog && (
<ShareButton