mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
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.
26 lines
823 B
TypeScript
26 lines
823 B
TypeScript
import { ArrowLeft } from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { buttonVariants } from '@librechat/client';
|
|
import { useLocalize } from '~/hooks';
|
|
import { cn } from '~/utils';
|
|
|
|
export default function BackToChat({ className }: { className?: string }) {
|
|
const navigate = useNavigate();
|
|
const localize = useLocalize();
|
|
const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
|
if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
|
|
event.preventDefault();
|
|
navigate('/c/new');
|
|
}
|
|
};
|
|
return (
|
|
<a
|
|
className={cn(buttonVariants({ variant: 'outline' }), className)}
|
|
href="/"
|
|
onClick={clickHandler}
|
|
>
|
|
<ArrowLeft className="icon-xs mr-2" aria-hidden="true" />
|
|
{localize('com_ui_back_to_chat')}
|
|
</a>
|
|
);
|
|
}
|