chore: display options menu keyboard nav

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

@@ -5,6 +5,7 @@ import { useCallback, FunctionComponent, KeyboardEventHandler } from 'react'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { AccountMenuPane } from './AccountMenuPane'
 import MenuPaneSelector from './MenuPaneSelector'
+import { KeyboardKey } from '@standardnotes/ui-services'
 
 export type AccountMenuProps = {
   viewControllerManager: ViewControllerManager
@@ -33,16 +34,14 @@ const AccountMenu: FunctionComponent<AccountMenuProps> = ({
 
   const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
     (event) => {
-      switch (event.key) {
-        case 'Escape':
-          if (currentPane === AccountMenuPane.GeneralMenu) {
-            closeAccountMenu()
-          } else if (currentPane === AccountMenuPane.ConfirmPassword) {
-            setCurrentPane(AccountMenuPane.Register)
-          } else {
-            setCurrentPane(AccountMenuPane.GeneralMenu)
-          }
-          break
+      if (event.key === KeyboardKey.Escape) {
+        if (currentPane === AccountMenuPane.GeneralMenu) {
+          closeAccountMenu()
+        } else if (currentPane === AccountMenuPane.ConfirmPassword) {
+          setCurrentPane(AccountMenuPane.Register)
+        } else {
+          setCurrentPane(AccountMenuPane.GeneralMenu)
+        }
       }
     },
     [closeAccountMenu, currentPane, setCurrentPane],

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

@@ -11,6 +11,7 @@ import {
   useSelectStore,
   VisuallyHidden,
 } from '@ariakit/react'
+import { KeyboardKey } from '@standardnotes/ui-services'
 
 type DropdownProps = {
   label: string
@@ -59,7 +60,15 @@ const Dropdown = ({ label, value, onChange, items, disabled, fullWidth, classNam
   }, [items, onChange, select, value])
 
   return (
-    <div className={classNameOverride.wrapper}>
+    <div
+      className={classNameOverride.wrapper}
+      onKeyDown={(event) => {
+        if (event.key === KeyboardKey.Escape) {
+          event.stopPropagation()
+          select.toggle()
+        }
+      }}
+    >
       <VisuallyHidden>
         <SelectLabel store={select}>{label}</SelectLabel>
       </VisuallyHidden>

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -8,6 +8,7 @@ import { PopoverContentProps } from './Types'
 import { usePopoverCloseOnClickOutside } from './Utils/usePopoverCloseOnClickOutside'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { KeyboardKey } from '@standardnotes/ui-services'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -88,7 +89,7 @@ const PositionedPopoverContent = ({
         ref={setPopoverElement}
         data-popover={id}
         onKeyDown={(event) => {
-          if (event.key === 'Escape') {
+          if (event.key === KeyboardKey.Escape) {
             event.stopPropagation()
             togglePopover?.()
             if (anchorElement) {

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx

@@ -29,6 +29,7 @@ import { setFloatingElemPosition } from '../../Lexical/Utils/setFloatingElemPosi
 import { LexicalPencilFill } from '@standardnotes/icons'
 import { IconComponent } from '../../Lexical/../Lexical/Theme/IconComponent'
 import { getDOMRangeRect } from '../../Lexical/Utils/getDOMRangeRect'
+import { KeyboardKey } from '@standardnotes/ui-services'
 
 function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anchorElem: HTMLElement }): JSX.Element {
   const editorRef = useRef<HTMLDivElement | null>(null)
@@ -148,7 +149,7 @@ function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anc
             setLinkUrl(event.target.value)
           }}
           onKeyDown={(event) => {
-            if (event.key === 'Enter') {
+            if (event.key === KeyboardKey.Enter) {
               event.preventDefault()
               if (lastSelection !== null) {
                 if (linkUrl !== '') {
@@ -156,7 +157,7 @@ function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anc
                 }
                 setEditMode(false)
               }
-            } else if (event.key === 'Escape') {
+            } else if (event.key === KeyboardKey.Escape) {
               event.preventDefault()
               setEditMode(false)
             }

packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx

@@ -5,6 +5,7 @@ import { TranslateFromTopAnimation, TranslateToTopAnimation } from '@/Constants/
 import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation'
 import { ArrowDownIcon, ArrowUpIcon, CloseIcon, ArrowRightIcon } from '@standardnotes/icons'
 import {
+  KeyboardKey,
   keyboardStringForShortcut,
   SUPER_SEARCH_TOGGLE_CASE_SENSITIVE,
   SUPER_SEARCH_TOGGLE_REPLACE_MODE,
@@ -71,7 +72,7 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
       <div
         className="flex flex-col gap-2 py-2 px-2"
         onKeyDown={(event) => {
-          if (event.key === 'Escape') {
+          if (event.key === KeyboardKey.Escape) {
             closeDialog()
           }
         }}

packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -57,8 +57,9 @@ export const useListKeyboardNavigation = (
   const keyDownHandler = useCallback(
     (e: KeyboardEvent) => {
       const isFocusInInput = document.activeElement?.tagName === 'INPUT'
+      const isFocusInListbox = !!document.activeElement?.closest('[role="listbox"]')
 
-      if (isFocusInInput) {
+      if (isFocusInInput || isFocusInListbox) {
         return
       }