LibreChat/client/src/components/Prompts/BackToChat.tsx
Daniel Lew 1143f73f59
Some checks failed
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Has been cancelled
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Has been cancelled
🔇 fix: Hide Button Icons from Screen Readers (#10776)
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.
2025-12-11 16:35:17 -05:00

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>
);
}