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

🖱️ feat: Minor Accessibility Changes (#2903)

Browse source 
* feat: focus rings for dialog buttons

* chore: temp: soft removal of removeFocusOutlines

* feat: allow tabbing of endpoint menu
This commit is contained in:
Danny Avila 2024-05-29 10:14:30 -04:00 • committed by GitHub
parent 3f600f0d3f
commit e2cb2905e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -87,10 +87,19 @@ const MenuItem: FC<MenuItemProps> = ({
<>
<div
role="menuitem"
className="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-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600"
tabIndex={-1}
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-black/5 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600',
'focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
)}
tabIndex={1}
{...rest}
onClick={() => onSelectEndpoint(endpoint)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
onSelectEndpoint(endpoint);
}
}}
>
<div className="flex grow items-center justify-between gap-2">
<div>
@ -120,6 +129,7 @@ const MenuItem: FC<MenuItemProps> = ({
expiryTime
? 'w-full rounded-lg p-2 hover:text-gray-400 dark:hover:text-gray-400'
: '',
'focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
)}
onClick={(e) => {
e.preventDefault();

14
client/src/components/ui/Dialog.tsx
View file

@ -9,12 +9,10 @@ const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = ({
className = '',
children,
...props
}: DialogPrimitive.DialogPortalProps) => (
<DialogPrimitive.Portal className={cn(className)} {...props}>
type DialogPortalProps = DialogPrimitive.DialogPortalProps & { className?: string };
const DialogPortal = ({ className = '', children, ...props }: DialogPortalProps) => (
<DialogPrimitive.Portal className={cn(className)} {...(props as DialogPortalProps)}>
<div className="fixed inset-0 z-[999] flex items-start justify-center sm:items-center">
{children}
</div>
@ -122,6 +120,8 @@ const DialogClose = React.forwardRef<
className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 sm:mt-0',
className ?? '',
/* Important: for accessibility */
'focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
)}
{...props}
/>
@ -138,6 +138,8 @@ const DialogButton = React.forwardRef<
className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
className ?? '',
/* Important: for accessibility */
'focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
)}
{...props}
/>

3
client/src/utils/index.ts
View file

@ -47,8 +47,7 @@ export const languages = [
'pascal',
];
export const removeFocusOutlines =
'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
export const removeFocusOutlines = '';
export const cardStyle =
'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-50 dark:data-[state=open]:bg-gray-700';