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

♿ 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

25
client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
View file

@ -38,9 +38,9 @@ const MenuItem: FC<MenuItemProps> = ({
const { getExpiry } = useUserKey(endpoint);
const localize = useLocalize();
const expiryTime = getExpiry();
const expiryTime = getExpiry() ?? '';
const onSelectEndpoint = (newEndpoint: EModelEndpoint) => {
const onSelectEndpoint = (newEndpoint?: EModelEndpoint) => {
if (!newEndpoint) {
return;
}
@ -95,7 +95,8 @@ const MenuItem: FC<MenuItemProps> = ({
return (
<>
<div
role="menuitem"
role="option"
aria-selected={selected}
className={cn(
'group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-surface-hover',
'radix-disabled:pointer-events-none radix-disabled:opacity-50',
@ -132,8 +133,10 @@ const MenuItem: FC<MenuItemProps> = ({
{userProvidesKey ? (
<div className="text-token-text-primary" key={`set-key-${endpoint}`}>
<button
tabIndex={0}
aria-label={`${localize('com_endpoint_config_key')} for ${title}`}
className={cn(
'invisible flex gap-x-1 group-hover:visible',
'invisible flex gap-x-1 group-focus-within:visible group-hover:visible',
selected ? 'visible' : '',
expiryTime ? 'text-token-text-primary w-full rounded-lg p-2' : '',
)}
@ -142,8 +145,20 @@ const MenuItem: FC<MenuItemProps> = ({
e.stopPropagation();
setDialogOpen(true);
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
setDialogOpen(true);
}
}}
>
<div className={cn('invisible group-hover:visible', expiryTime ? 'text-xs' : '')}>
<div
className={cn(
'invisible group-focus-within:visible group-hover:visible',
expiryTime ? 'text-xs' : '',
)}
>
{localize('com_endpoint_config_key')}
</div>
<Settings className={cn(expiryTime ? 'icon-sm' : 'icon-md stroke-1')} />