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

🖱️ 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/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}
/>