fix ContextMenu not keyboard accessible

src/components/Table/ContextMenu/ContextMenu.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "react";
 import { useAtom } from "jotai";
 import { ErrorBoundary } from "react-error-boundary";
 import { NonFullScreenErrorFallback } from "@src/components/ErrorFallback";
@@ -8,10 +9,21 @@ import MenuContents from "./MenuContents";
 import { tableScope, contextMenuTargetAtom } from "@src/atoms/tableScope";
 
 export default function ContextMenu() {
+  const menuRef = useRef<HTMLUListElement>(null);
   const [contextMenuTarget, setContextMenuTarget] = useAtom(
     contextMenuTargetAtom,
     tableScope
   );
+  const open = Boolean(contextMenuTarget);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (open && menuRef.current) {
+        const firstMenuitem = menuRef.current.querySelector("[role=menuitem]");
+        (firstMenuitem as HTMLElement)?.focus();
+      }
+    });
+  }, [open]);
 
   const handleClose = () => setContextMenuTarget(null);
 
@@ -20,11 +32,12 @@ export default function ContextMenu() {
       id="cell-context-menu"
       aria-label="Cell context menu"
       anchorEl={contextMenuTarget as any}
-      open={Boolean(contextMenuTarget)}
+      open={open}
       onClose={handleClose}
       anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
       transformOrigin={{ vertical: "top", horizontal: "left" }}
       sx={{ "& .MuiMenu-paper": { minWidth: 160 } }}
+      MenuListProps={{ ref: menuRef }}
     >
       <ErrorBoundary FallbackComponent={NonFullScreenErrorFallback}>
         <MenuContents onClose={handleClose} />