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/FileContextMenu/FileContextMenu.tsx

@@ -1,7 +1,8 @@
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useRef } from 'react'
+import { FunctionComponent } from 'react'
+import Menu from '../Menu/Menu'
 import Popover from '../Popover/Popover'
 import FileMenuOptions from './FileMenuOptions'
 
@@ -13,8 +14,6 @@ type Props = {
 const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, selectionController }) => {
   const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
 
-  const contextMenuRef = useRef<HTMLDivElement>(null)
-
   return (
     <Popover
       open={showFileContextMenu}
@@ -23,7 +22,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, s
       align="start"
       className="py-2"
     >
-      <div ref={contextMenuRef}>
+      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
         <FileMenuOptions
           filesController={filesController}
           selectionController={selectionController}
@@ -31,7 +30,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, s
           shouldShowRenameOption={false}
           shouldShowAttachOption={false}
         />
-      </div>
+      </Menu>
     </Popover>
   )
 })

packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx

@@ -5,6 +5,7 @@ import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import Popover from '../Popover/Popover'
 import RoundIconButton from '../Button/RoundIconButton'
+import Menu from '../Menu/Menu'
 
 type Props = {
   filesController: FilesController
@@ -21,15 +22,17 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
     <>
       <RoundIconButton label="File options menu" onClick={toggleMenu} ref={buttonRef} icon="more" />
       <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="py-2">
-        <FileMenuOptions
-          filesController={filesController}
-          selectionController={selectionController}
-          closeMenu={() => {
-            setIsOpen(false)
-          }}
-          shouldShowAttachOption={false}
-          shouldShowRenameOption={false}
-        />
+        <Menu a11yLabel="File options panel" isOpen={isOpen}>
+          <FileMenuOptions
+            filesController={filesController}
+            selectionController={selectionController}
+            closeMenu={() => {
+              setIsOpen(false)
+            }}
+            shouldShowAttachOption={false}
+            shouldShowRenameOption={false}
+          />
+        </Menu>
       </Popover>
     </>
   )