diff --git a/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx index 4f44a9659..99f8f6134 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx +++ b/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 = ({ const handleKeyDown: KeyboardEventHandler = 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], diff --git a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx index 02b2522a5..6fb843c75 100644 --- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx +++ b/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 ( -
+
{ + if (event.key === KeyboardKey.Escape) { + event.stopPropagation() + select.toggle() + } + }} + > {label} diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx index 828c6d23b..22a7dbeb0 100644 --- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx +++ b/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) { diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx index 25d95726a..097ffd757 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx +++ b/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(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) } diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx index b63893a2e..eef86e053 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx +++ b/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
{ - if (event.key === 'Escape') { + if (event.key === KeyboardKey.Escape) { closeDialog() } }} diff --git a/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts b/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts index 14a6d3f9c..6e44c2dd2 100644 --- a/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts +++ b/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 }