Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

♿ fix: Improve Accessibility in Endpoints Menu/Navigation (#5123)

Browse source 
* fix: prevent mobile nav toggle from being focusable when not in mobile view, add types to <NavToggle/>

* fix: appropriate endpoint menu item role, add up/down focus mgmt, ensure set api key is focusable and accessible

* fix: localize link titles and update text color for improved accessibility in Nav component
This commit is contained in:
Danny Avila 2024-12-28 12:58:12 -05:00 • committed by GitHub
parent d6f1ecf75c
commit a423eb8c7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 137 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/components/Nav/Nav.tsx
View file

@ -213,18 +213,21 @@ const Nav = ({
navVisible={navVisible}
className="fixed left-0 top-1/2 z-40 hidden md:flex"
/>
<div
role="button"
tabIndex={0}
className={`nav-mask ${navVisible ? 'active' : ''}`}
onClick={toggleNavVisible}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
toggleNavVisible();
}
}}
aria-label="Toggle navigation"
/>
{isSmallScreen && (
<div
id="mobile-nav-mask-toggle"
role="button"
tabIndex={0}
className={`nav-mask ${navVisible ? 'active' : ''}`}
onClick={toggleNavVisible}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
toggleNavVisible();
}
}}
aria-label="Toggle navigation"
/>
)}
</>
);
};