mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +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.
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { PlusCircle } from 'lucide-react';
|
|
import { TooltipAnchor } from '@librechat/client';
|
|
import { isAssistantsEndpoint } from 'librechat-data-provider';
|
|
import type { TConversation } from 'librechat-data-provider';
|
|
import { useChatContext, useAddedChatContext } from '~/Providers';
|
|
import { mainTextareaId } from '~/common';
|
|
import { useLocalize } from '~/hooks';
|
|
|
|
function AddMultiConvo() {
|
|
const { conversation } = useChatContext();
|
|
const { setConversation: setAddedConvo } = useAddedChatContext();
|
|
const localize = useLocalize();
|
|
|
|
const clickHandler = () => {
|
|
const { title: _t, ...convo } = conversation ?? ({} as TConversation);
|
|
setAddedConvo({
|
|
...convo,
|
|
title: '',
|
|
});
|
|
|
|
const textarea = document.getElementById(mainTextareaId);
|
|
if (textarea) {
|
|
textarea.focus();
|
|
}
|
|
};
|
|
|
|
if (!conversation) {
|
|
return null;
|
|
}
|
|
|
|
if (isAssistantsEndpoint(conversation.endpoint)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<TooltipAnchor
|
|
id="add-multi-conversation-button"
|
|
aria-label={localize('com_ui_add_multi_conversation')}
|
|
description={localize('com_ui_add_multi_conversation')}
|
|
tabIndex={0}
|
|
role="button"
|
|
onClick={clickHandler}
|
|
data-testid="parameters-button"
|
|
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
|
|
>
|
|
<PlusCircle size={16} aria-hidden="true" />
|
|
</TooltipAnchor>
|
|
);
|
|
}
|
|
|
|
export default AddMultiConvo;
|