mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 10:50:14 +01:00
1143f73f59
If you've got a screen reader that is reading out the whole page, each icon button (i.e., `<button><SVG></button>`) will have both the button's aria-label read out as well as the title from the SVG (which is usually just "image"). Since we are pretty good about setting aria-labels, we should instead use `aria-hidden="true"` on these images, since they are not useful to be read out. I don't consider this a comprehensive review of all icons in the app, but I knocked out all the low hanging fruit in this commit.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { TooltipAnchor } from '@librechat/client';
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { useLocalize } from '~/hooks';
|
|
import { cn } from '~/utils';
|
|
|
|
const CollapseChat = ({
|
|
isScrollable,
|
|
isCollapsed,
|
|
setIsCollapsed,
|
|
}: {
|
|
isScrollable: boolean;
|
|
isCollapsed: boolean;
|
|
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}) => {
|
|
const localize = useLocalize();
|
|
if (!isScrollable) {
|
|
return null;
|
|
}
|
|
|
|
const description = isCollapsed
|
|
? localize('com_ui_expand_chat')
|
|
: localize('com_ui_collapse_chat');
|
|
|
|
return (
|
|
<div className="relative ml-auto items-end justify-end">
|
|
<TooltipAnchor
|
|
description={description}
|
|
render={
|
|
<button
|
|
aria-label={description}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
setIsCollapsed((prev) => !prev);
|
|
}}
|
|
className={cn(
|
|
// 'absolute right-1.5 top-1.5',
|
|
'z-10 size-5 rounded-full transition-colors',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-50',
|
|
)}
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronUp className="h-full w-full" aria-hidden="true" />
|
|
) : (
|
|
<ChevronDown className="h-full w-full" aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CollapseChat;
|