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/ContentListView/Header/ContentListHeader.tsx

@@ -65,7 +65,6 @@ const ContentListHeader = ({
           >
             <DisplayOptionsMenu
               application={application}
-              closeDisplayOptionsMenu={toggleDisplayOptionsMenu}
               isFilesSmartView={isFilesSmartView}
               isOpen={showDisplayOptionsMenu}
               selectedTag={selectedTag}

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -26,7 +26,6 @@ import MenuSwitchButtonItem from '@/Components/Menu/MenuSwitchButtonItem'
 const DailyEntryModeEnabled = true
 
 const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
-  closeDisplayOptionsMenu,
   application,
   isOpen,
   isFilesSmartView,
@@ -179,7 +178,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       <button
         className={classNames(
           'relative cursor-pointer rounded-full border-2 border-solid border-transparent px-2 text-base focus:shadow-none lg:text-sm',
-          isSelected ? 'bg-info text-info-contrast' : 'bg-transparent text-text hover:bg-info-backdrop',
+          isSelected
+            ? 'bg-info text-info-contrast'
+            : 'bg-transparent text-text hover:bg-info-backdrop focus:bg-info-backdrop',
         )}
         onClick={() => {
           setCurrentMode(mode)
@@ -200,7 +201,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   }
 
   return (
-    <Menu className="text-sm" a11yLabel="Notes list options menu" closeMenu={closeDisplayOptionsMenu} isOpen={isOpen}>
+    <Menu className="text-sm" a11yLabel="Notes list options menu" isOpen={isOpen}>
       <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Preferences for</div>
       <div className={classNames('mt-1.5 flex w-full justify-between px-3', !controlsDisabled && 'mb-3')}>
         <div className="flex items-center gap-1.5">

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx

@@ -9,7 +9,6 @@ export type DisplayOptionsMenuPositionProps = {
 export type DisplayOptionsMenuProps = {
   application: WebApplication
   selectedTag: AnyTag
-  closeDisplayOptionsMenu: () => void
   isOpen: boolean
   isFilesSmartView: boolean
 }

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
+        <Menu a11yLabel="File options panel" isOpen={isOpen}>
-          filesController={filesController}
+          <FileMenuOptions
-          selectionController={selectionController}
+            filesController={filesController}
-          closeMenu={() => {
+            selectionController={selectionController}
-            setIsOpen(false)
+            closeMenu={() => {
-          }}
+              setIsOpen(false)
-          shouldShowAttachOption={false}
+            }}
-          shouldShowRenameOption={false}
+            shouldShowAttachOption={false}
-        />
+            shouldShowRenameOption={false}
+          />
+        </Menu>
       </Popover>
     </>
   )

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>

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

@@ -87,6 +87,15 @@ const PositionedPopoverContent = ({
         }}
         ref={setPopoverElement}
         data-popover={id}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.stopPropagation()
+            togglePopover()
+            if (anchorElement) {
+              anchorElement.focus()
+            }
+          }
+        }}
       >
         <div className={classNames(disableMobileFullscreenTakeover && 'hidden', 'md:hidden')}>
           <div className="flex items-center justify-end px-3 pt-2">

packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx

@@ -2,9 +2,9 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@standardnotes/utils'
 import { TOGGLE_FOCUS_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import MenuItem from '../Menu/MenuItem'
 
 type Props = {
   application: WebApplication
@@ -36,20 +36,13 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
   }
 
   return (
-    <button
+    <MenuItem onClick={toggle}>
-      className={classNames(
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
-        'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
-        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
-      )}
-      onClick={toggle}
-    >
       <div className="flex items-center">Focus Mode</div>
-      <div className="flex">
+      <div className="ml-auto flex">
         {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
         <Switch className="px-0" checked={isEnabled} />
       </div>
-    </button>
+    </MenuItem>
   )
 }
 

packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx

@@ -24,7 +24,7 @@ const PanelSettingsSection = () => {
   return (
     <div className="hidden md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
       <MenuSwitchButtonItem
-        className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+        className="items-center"
         checked={isNavigationPaneCollapsed}
         onChange={toggleNavigationPane}
         shortcut={navigationShortcut}
@@ -32,7 +32,7 @@ const PanelSettingsSection = () => {
         Show Tags Panel
       </MenuSwitchButtonItem>
       <MenuSwitchButtonItem
-        className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+        className="items-center"
         checked={isListPaneCollapsed}
         onChange={toggleListPane}
         shortcut={listShortcut}

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

@@ -11,17 +11,17 @@ import {
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
-import Switch from '@/Components/Switch/Switch'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { ThemeItem } from './ThemeItem'
 import { sortThemes } from '@/Utils/SortThemes'
-import RadioIndicator from '../Radio/RadioIndicator'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { classNames } from '@standardnotes/utils'
+import Menu from '../Menu/Menu'
+import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
+import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 
 export const focusModeAnimationDuration = 1255
 
@@ -150,45 +150,29 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   }, [application, deactivateAnyNonLayerableTheme])
 
   return (
-    <div>
+    <Menu a11yLabel="Quick settings menu" isOpen>
       {toggleableComponents.length > 0 && (
         <>
           <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
           {toggleableComponents.map((component) => (
-            <button
+            <MenuSwitchButtonItem
-              className={classNames(
+              onChange={() => {
-                'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 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',
-              )}
-              onClick={() => {
                 toggleComponent(component)
               }}
+              checked={component.active}
               key={component.uuid}
             >
-              <div className="flex items-center">
+              <Icon type="window" className="mr-2 text-neutral" />
-                <Icon type="window" className="mr-2 text-neutral" />
+              {component.displayName}
-                {component.displayName}
+            </MenuSwitchButtonItem>
-              </div>
-              <Switch checked={component.active} className="px-0" />
-            </button>
           ))}
           <HorizontalSeparator classes="my-2" />
         </>
       )}
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
-      <button
+      <MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
-        className={classNames(
-          'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 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',
-        )}
-        onClick={toggleDefaultTheme}
-        ref={defaultThemeButtonRef}
-      >
-        <RadioIndicator checked={defaultThemeOn} className="mr-2" />
         Default
-      </button>
+      </MenuRadioButtonItem>
       {themes.map((theme) => (
         <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
       ))}
@@ -200,7 +184,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
         isEnabled={focusModeEnabled}
       />
       <PanelSettingsSection />
-    </div>
+    </Menu>
   )
 }
 

packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -3,12 +3,12 @@ import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import Switch from '@/Components/Switch/Switch'
 import { ThemeItem } from './ThemeItem'
-import RadioIndicator from '../Radio/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
+import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
+import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 
 type Props = {
   item: ThemeItem
@@ -28,22 +28,25 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
   )
   const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
 
-  const toggleTheme: MouseEventHandler<HTMLButtonElement> = useCallback(
+  const toggleTheme = useCallback(() => {
-    (e) => {
+    if (item.component && canActivateTheme) {
-      e.preventDefault()
+      const isThemeLayerable = item.component.isLayerable()
+      const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active
 
-      if (item.component && canActivateTheme) {
+      if (themeIsLayerableOrNotActive) {
-        const isThemeLayerable = item.component.isLayerable()
+        application.mutator.toggleTheme(item.component).catch(console.error)
-        const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active
-
-        if (themeIsLayerableOrNotActive) {
-          application.mutator.toggleTheme(item.component).catch(console.error)
-        }
-      } else {
-        premiumModal.activate(`${item.name} theme`)
       }
+    } else {
+      premiumModal.activate(`${item.name} theme`)
+    }
+  }, [application, canActivateTheme, item, premiumModal])
+
+  const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (event) => {
+      event.preventDefault()
+      toggleTheme()
     },
-    [application, canActivateTheme, item, premiumModal],
+    [toggleTheme],
   )
 
   const isMobile = application.isNativeMobileWeb() || isMobileScreen()
@@ -53,42 +56,27 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
     return null
   }
 
-  return (
+  return item.component?.isLayerable() ? (
-    <button
+    <MenuSwitchButtonItem checked={item.component.active} onChange={() => toggleTheme()}>
-      className={classNames(
+      {!canActivateTheme && (
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5',
+        <Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'mr-2')} />
-        'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
-        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
       )}
-      onClick={toggleTheme}
+      {item.name}
-    >
+    </MenuSwitchButtonItem>
-      {item.component?.isLayerable() ? (
+  ) : (
-        <>
+    <MenuRadioButtonItem checked={Boolean(item.component?.active)} onClick={onClick}>
-          <div className="flex items-center">
+      <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
-            {!canActivateTheme && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+      {item.component && canActivateTheme ? (
-            {item.name}
+        <div
-          </div>
+          className="ml-auto h-5 w-5 rounded-full"
-          <Switch className="px-0" checked={item.component?.active} />
+          style={{
-        </>
+            backgroundColor: item.component.package_info?.dock_icon?.background_color,
+          }}
+        ></div>
       ) : (
-        <>
+        <Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'ml-auto')} />
-          <div className="flex items-center">
-            <RadioIndicator checked={Boolean(item.component?.active)} className="mr-2" />
-            <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
-          </div>
-          {item.component && canActivateTheme ? (
-            <div
-              className="h-5 w-5 rounded-full"
-              style={{
-                backgroundColor: item.component.package_info?.dock_icon?.background_color,
-              }}
-            ></div>
-          ) : (
-            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
-          )}
-        </>
       )}
-    </button>
+    </MenuRadioButtonItem>
   )
 }