mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 08:20: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.
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { Trigger } from '@radix-ui/react-popover';
|
|
import { useLocalize } from '~/hooks';
|
|
|
|
export default function TitleButton({ primaryText = '', secondaryText = '' }) {
|
|
const localize = useLocalize();
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
return (
|
|
<Trigger asChild>
|
|
<button
|
|
className="group flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors duration-200 hover:bg-surface-hover radix-state-open:bg-surface-hover"
|
|
aria-label={localize('com_ui_endpoint_menu')}
|
|
aria-expanded={isExpanded}
|
|
role="combobox"
|
|
aria-haspopup="listbox"
|
|
aria-controls="llm-endpoint-menu"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
<div>
|
|
<span className="text-text-primary"> {primaryText} </span>
|
|
{!!secondaryText && <span className="text-token-text-secondary">{secondaryText}</span>}
|
|
</div>
|
|
<ChevronDown className="text-token-text-secondary size-4" aria-hidden="true" />
|
|
</button>
|
|
</Trigger>
|
|
);
|
|
}
|