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
2022-11-28 02:17:55 +05:30
parent 6db6079790
commit ac91621271
13 changed files with 88 additions and 113 deletions
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/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}
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/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">
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx
+++ b/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
 }
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
+++ b/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>
  )
 })
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/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>
    </>
  )
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/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])

--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/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,
--- a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
+++ b/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>
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/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">
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/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
-      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}
-    >
+    <MenuItem 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>
  )
 }

--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx
+++ b/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}
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/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
-              className={classNames(
-                '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={() => {
+            <MenuSwitchButtonItem
+              onChange={() => {
                toggleComponent(component)
              }}
+              checked={component.active}
              key={component.uuid}
            >
-              <div className="flex items-center">
-                <Icon type="window" className="mr-2 text-neutral" />
-                {component.displayName}
-              </div>
-              <Switch checked={component.active} className="px-0" />
-            </button>
+              <Icon type="window" className="mr-2 text-neutral" />
+              {component.displayName}
+            </MenuSwitchButtonItem>
          ))}
          <HorizontalSeparator classes="my-2" />
        </>
      )}
      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
-      <button
-        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" />
+      <MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
        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>
  )
 }

--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/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(
-    (e) => {
-      e.preventDefault()
+  const toggleTheme = useCallback(() => {
+    if (item.component && canActivateTheme) {
+      const isThemeLayerable = item.component.isLayerable()
+      const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active

-      if (item.component && canActivateTheme) {
-        const isThemeLayerable = item.component.isLayerable()
-        const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active
-
-        if (themeIsLayerableOrNotActive) {
-          application.mutator.toggleTheme(item.component).catch(console.error)
-        }
-      } else {
-        premiumModal.activate(`${item.name} theme`)
+      if (themeIsLayerableOrNotActive) {
+        application.mutator.toggleTheme(item.component).catch(console.error)
      }
+    } 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 (
-    <button
-      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',
+  return item.component?.isLayerable() ? (
+    <MenuSwitchButtonItem checked={item.component.active} onChange={() => toggleTheme()}>
+      {!canActivateTheme && (
+        <Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'mr-2')} />
      )}
-      onClick={toggleTheme}
-    >
-      {item.component?.isLayerable() ? (
-        <>
-          <div className="flex items-center">
-            {!canActivateTheme && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
-            {item.name}
-          </div>
-          <Switch className="px-0" checked={item.component?.active} />
-        </>
+      {item.name}
+    </MenuSwitchButtonItem>
+  ) : (
+    <MenuRadioButtonItem checked={Boolean(item.component?.active)} onClick={onClick}>
+      <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
+      {item.component && canActivateTheme ? (
+        <div
+          className="ml-auto h-5 w-5 rounded-full"
+          style={{
+            backgroundColor: item.component.package_info?.dock_icon?.background_color,
+          }}
+        ></div>
      ) : (
-        <>
-          <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} />
-          )}
-        </>
+        <Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'ml-auto')} />
      )}
-    </button>
+    </MenuRadioButtonItem>
  )
 }