🖱️ feat: Minor Accessibility Changes (#2903)

* feat: focus rings for dialog buttons

* chore: temp: soft removal of removeFocusOutlines

* feat: allow tabbing of endpoint menu

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -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"
+        className={cn(
-        tabIndex={-1}
+          '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();

client/src/components/ui/Dialog.tsx

@@ -9,12 +9,10 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
+type DialogPortalProps = DialogPrimitive.DialogPortalProps & { className?: string };
-  className = '',
+
-  children,
+const DialogPortal = ({ className = '', children, ...props }: DialogPortalProps) => (
-  ...props
+  <DialogPrimitive.Portal className={cn(className)} {...(props as DialogPortalProps)}>
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
     <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}
   />

client/src/utils/index.ts

@@ -47,8 +47,7 @@ export const languages = [
   'pascal',
 ];
 
-export const removeFocusOutlines =
+export const removeFocusOutlines = '';
-  'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
 
 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';