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

🛠️ fix: Improve Accessibility and Display of Conversation Menu (#6913)

Browse source 
* 📦 chore: update @ariakit/react-core to version 0.4.17 in package.json and package-lock.json

* refactor: add additional ariakit menu props and unmount menu if state changes

* fix: accessibility issues and incompatibility issues due to non-portaled menu

* fix: improve visibility and accessibility of conversation options, making sure to expand dynamically when becoming active

* fix: adjust max width for conversation options popover to improve visibility
This commit is contained in:
Danny Avila 2025-04-16 04:28:46 -04:00 • committed by GitHub
parent 000f3a3733
commit 16aa5ed466
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 153 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

159
client/src/components/ui/DropdownPopup.tsx
View file

@ -16,84 +16,119 @@ interface DropdownProps {
anchor?: { x: string; y: string };
gutter?: number;
modal?: boolean;
portal?: boolean;
preserveTabOrder?: boolean;
focusLoop?: boolean;
menuId: string;
mountByState?: boolean;
unmountOnHide?: boolean;
finalFocus?: React.RefObject<HTMLElement>;
}
type MenuProps = Omit<
DropdownProps,
'trigger' | 'isOpen' | 'setIsOpen' | 'focusLoop' | 'mountByState'
>;
const DropdownPopup: React.FC<DropdownProps> = ({
keyPrefix,
trigger,
items,
isOpen,
setIsOpen,
menuId,
modal,
gutter = 8,
sameWidth,
className,
focusLoop,
iconClassName,
itemClassName,
mountByState,
...props
}) => {
const menu = Ariakit.useMenuStore({ open: isOpen, setOpen: setIsOpen, focusLoop });
if (mountByState) {
return (
<Ariakit.MenuProvider store={menu}>
{trigger}
{isOpen && <Menu {...props} />}
</Ariakit.MenuProvider>
);
}
return (
<Ariakit.MenuProvider store={menu}>
{trigger}
<Ariakit.Menu
id={menuId}
className={cn('popover-ui z-50', className)}
gutter={gutter}
modal={modal}
sameWidth={sameWidth}
>
{items
.filter((item) => item.show !== false)
.map((item, index) => {
if (item.separate === true) {
return <Ariakit.MenuSeparator key={index} className="my-1 h-px bg-white/10" />;
}
return (
<Ariakit.MenuItem
key={`${keyPrefix ?? ''}${index}`}
id={item.id}
className={cn(
'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
itemClassName,
)}
disabled={item.disabled}
render={item.render}
ref={item.ref}
hideOnClick={item.hideOnClick}
onClick={(event) => {
event.preventDefault();
if (item.onClick) {
item.onClick(event);
}
if (item.hideOnClick === false) {
return;
}
menu.hide();
}}
>
{item.icon != null && (
<span className={cn('mr-2 size-4', iconClassName)} aria-hidden="true">
{item.icon}
</span>
)}
{item.label}
{item.kbd != null && (
// eslint-disable-next-line i18next/no-literal-string
<kbd className="ml-auto hidden font-sans text-xs text-black/50 group-hover:inline group-focus:inline dark:text-white/50">
⌘{item.kbd}
</kbd>
)}
</Ariakit.MenuItem>
);
})}
</Ariakit.Menu>
<Menu {...props} />
</Ariakit.MenuProvider>
);
};
const Menu: React.FC<MenuProps> = ({
items,
menuId,
keyPrefix,
className,
iconClassName,
itemClassName,
modal,
portal,
sameWidth,
gutter = 8,
finalFocus,
unmountOnHide,
preserveTabOrder,
}) => {
const menu = Ariakit.useMenuContext();
return (
<Ariakit.Menu
id={menuId}
modal={modal}
gutter={gutter}
portal={portal}
sameWidth={sameWidth}
finalFocus={finalFocus}
unmountOnHide={unmountOnHide}
preserveTabOrder={preserveTabOrder}
className={cn('popover-ui z-50', className)}
>
{items
.filter((item) => item.show !== false)
.map((item, index) => {
if (item.separate === true) {
return <Ariakit.MenuSeparator key={index} className="my-1 h-px bg-white/10" />;
}
return (
<Ariakit.MenuItem
key={`${keyPrefix ?? ''}${index}-${item.id ?? ''}`}
id={item.id}
className={cn(
'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
itemClassName,
)}
disabled={item.disabled}
render={item.render}
ref={item.ref}
hideOnClick={item.hideOnClick}
onClick={(event) => {
event.preventDefault();
if (item.onClick) {
item.onClick(event);
}
if (item.hideOnClick === false) {
return;
}
menu?.hide();
}}
>
{item.icon != null && (
<span className={cn('mr-2 size-4', iconClassName)} aria-hidden="true">
{item.icon}
</span>
)}
{item.label}
{item.kbd != null && (
// eslint-disable-next-line i18next/no-literal-string
<kbd className="ml-auto hidden font-sans text-xs text-black/50 group-hover:inline group-focus:inline dark:text-white/50">
⌘{item.kbd}
</kbd>
)}
</Ariakit.MenuItem>
);
})}
</Ariakit.Menu>
);
};
export default DropdownPopup;