feat: add arrow key navigation to file context menu & options panel

feat: close popover with Escape key and focus anchor element

fix: menu focus

fix: quick settings menu keyboard navigation

packages/web/src/javascripts/Components/Menu/Menu.tsx

@@ -50,7 +50,7 @@ const Menu = forwardRef(
       if (isOpen && shouldAutoFocus) {
         setTimeout(() => {
           menuElementRef.current?.focus()
-        })
+        }, 5)
       }
     }, [isOpen, shouldAutoFocus])
 

packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx

@@ -24,7 +24,7 @@ const MenuRadioButtonItem = forwardRef(
           role="menuitemradio"
           tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
           className={classNames(
-            'flex w-full cursor-pointer border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
+            'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
             'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
             'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
             className,

packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx

@@ -25,7 +25,7 @@ const MenuSwitchButtonItem = forwardRef(
           disabled={disabled}
           ref={ref}
           className={classNames(
-            'flex w-full cursor-pointer border-0 bg-transparent px-3 py-2 md:py-1.5',
+            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 md:py-1.5',
             'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
             'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
             className,
@@ -40,7 +40,7 @@ const MenuSwitchButtonItem = forwardRef(
           {...props}
         >
           <span className="flex flex-grow items-center">{children}</span>
-          <div className="flex">
+          <div className="flex items-center">
             {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
             <Switch disabled={disabled} className="px-0" checked={checked} />
           </div>