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/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>
  )
 }