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.
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { XIcon } from 'lucide-react';
|
|
import { useRecoilState } from 'recoil';
|
|
import { useGetBannerQuery } from '~/data-provider';
|
|
import store from '~/store';
|
|
|
|
export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) => void }) => {
|
|
const { data: banner } = useGetBannerQuery();
|
|
const [hideBannerHint, setHideBannerHint] = useRecoilState<string[]>(store.hideBannerHint);
|
|
const bannerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (onHeightChange && bannerRef.current) {
|
|
onHeightChange(bannerRef.current.offsetHeight);
|
|
}
|
|
}, [banner, hideBannerHint, onHeightChange]);
|
|
|
|
if (!banner || (banner.bannerId && hideBannerHint.includes(banner.bannerId))) {
|
|
return null;
|
|
}
|
|
|
|
const onClick = () => {
|
|
setHideBannerHint([...hideBannerHint, banner.bannerId]);
|
|
if (onHeightChange) {
|
|
onHeightChange(0); // Reset height when banner is closed
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={bannerRef}
|
|
className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-gradient-to-r dark:text-white md:relative"
|
|
>
|
|
<div
|
|
className="w-full truncate px-4 text-center text-sm"
|
|
dangerouslySetInnerHTML={{ __html: banner.message }}
|
|
></div>
|
|
<button
|
|
type="button"
|
|
aria-label="Dismiss banner"
|
|
className="h-8 w-8 opacity-80 hover:opacity-100"
|
|
onClick={onClick}
|
|
>
|
|
<XIcon className="mx-auto h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|