LibreChat/client/src/components/Chat/Menus/OpenSidebar.tsx
Dustin Healy 86951cc56d
🛂 fix: Address Accessibility Issues - Axe Rating: Serious (#10607)
* feat: wrap main content of page in <main> tag for screen reader landmarks (439)

* feat: add italic on active convo when selected so that selection state does not rely on bg contrast ratio (562)

* feat: add border ring around SearchBar so that it passes focus contrast minimums (577)

* fix: hide decorative SVGs from screen readers (578)

* fix: stop clipping of focus outlines in My Files modal (593)

* feat: programmatically declare state of Temporary Chat toggle for screen readers (606)

* feat: add sr-only components to warn screen readers that footer links open in new tab (611)

* feat: add aria-labels to archived chat table buttons

* feat: add screen reader heading for prompt edit page (776)

* feat: increase contrast to threshold minimum for production tag in prompts advanced view (773)

* feat: increase contrast to thehold minimums for production tag and version card border highlights (770)

* fix: h2 now reads as 'control bar' to screen readers in edit prompt page (768)

* feat: add selected state tracking for simple / advanced toggle for screen readers (765)

* feat: add left padding to theme selector in prompts side nav panel so that focus outline doesnt clip

* feat: darken orange bg for warning toasts to hit 3:1 contrast minimum with white text (725)

* fix: return focus to triggering element on modal close for image preview in attach files panel (717)

* fix: hide SVG for AddMultiConvo button from screen readers (708)

* feat: add persistent label to Filter Memories... input in memory side panel
2025-12-04 14:34:43 -05:00

38 lines
1 KiB
TypeScript

import { TooltipAnchor, Button, Sidebar } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function OpenSidebar({
setNavVisible,
className,
}: {
setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
className?: string;
}) {
const localize = useLocalize();
return (
<TooltipAnchor
description={localize('com_nav_open_sidebar')}
render={
<Button
size="icon"
variant="outline"
data-testid="open-sidebar-button"
aria-label={localize('com_nav_open_sidebar')}
className={cn(
'rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover',
className,
)}
onClick={() =>
setNavVisible((prev) => {
localStorage.setItem('navVisible', JSON.stringify(!prev));
return !prev;
})
}
>
<Sidebar aria-hidden="true" />
</Button>
}
/>
);
}