@manuscripts/body-editor 3.9.11 → 3.9.13

package/dist/es/components/views/FigureDropdown.js

@@ -1,8 +1,42 @@
 import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { memoGroupFiles, } from '../../lib/files';
 import { getMediaTypeInfo } from '../../lib/get-media-type';
+import { createKeyboardInteraction } from '../../lib/navigation-utils';
+function useDropdownKeyboardNav(isOpen, containerRef, onEscape, onArrowLeft) {
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!isOpen || !container) {
+            return;
+        }
+        const buttons = Array.from(container.querySelectorAll('button:not([disabled])'));
+        if (buttons.length === 0) {
+            return;
+        }
+        const removeKeydownListener = createKeyboardInteraction({
+            container: container,
+            navigation: {
+                getItems: () => Array.from(container.querySelectorAll('button:not([disabled])')),
+                arrowKeys: {
+                    forward: 'ArrowDown',
+                    backward: 'ArrowUp',
+                },
+            },
+            additionalKeys: {
+                Enter: (e) => e.target.click(),
+                Escape: () => onEscape(),
+                ...(onArrowLeft ? { ArrowLeft: () => onArrowLeft() } : {}),
+            },
+        });
+        window.requestAnimationFrame(() => {
+            buttons[0]?.focus();
+        });
+        return () => {
+            removeKeydownListener();
+        };
+    }, [isOpen, containerRef, onEscape, onArrowLeft]);
+}
 function getSupplements(getFiles, getDoc, groupFiles, isEmbed) {
     return groupFiles(getDoc(), getFiles())
         .supplements.map((s) => s.file)
@@ -21,6 +55,7 @@ function getOtherFiles(getFiles, getDoc, groupFiles, isEmbed) {
 }
 export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onReplaceEmbed, onDelete, isEmbed, hasSiblings, container, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
+    const dropdownRef = useRef(null);
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
@@ -44,12 +79,18 @@ export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onD
             container.classList.remove(activeClass);
         }
     }, [isOpen, container.classList]);
+    useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen);
     const isEmbedMode = !!onReplaceEmbed;
     const groupFiles = memoGroupFiles();
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
-        React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
+        React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    toggleOpen();
+                }
+            } },
             React.createElement(DotsIcon, null)),
-        isOpen && (React.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
+        isOpen && (React.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5, ref: dropdownRef },
             showReplace && isEmbedMode && (React.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
             showReplace && !isEmbedMode && (React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: React.createElement(React.Fragment, null,
                     getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
@@ -67,11 +108,23 @@ export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onD
 };
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
+    const nestedListRef = useRef(null);
+    const handleArrowLeft = useCallback(() => {
+        toggleOpen();
+        const parentButton = wrapperRef.current?.querySelector('.nested-list-button');
+        parentButton?.focus();
+    }, [toggleOpen, wrapperRef]);
+    useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
-        React.createElement(NestedListButton, { onClick: toggleOpen, disabled: disabled },
+        React.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+                if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    toggleOpen();
+                }
+            } },
             React.createElement("div", null, buttonText),
             React.createElement(TriangleCollapsedIcon, null)),
-        isOpen && (React.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
+        isOpen && (React.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, ref: nestedListRef, onClick: (e) => {
                 toggleOpen();
                 parentToggleOpen(e);
             } }, list))));
@@ -114,7 +167,8 @@ const ListItemButton = styled(IconTextButton) `
   justify-content: space-between;
   align-items: center;
 
-  :hover {
+  :hover,
+  :focus-visible {
     background: #f2fbfc;
   }
 
@@ -133,7 +187,8 @@ const ListItemText = styled.div `
 const NestedListButton = styled(ListItemButton) `
   width: 100%;
   &:active,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     background: #f2fbfc;
   }
   svg {
@@ -148,4 +203,8 @@ const UploadButton = styled(IconTextButton) `
   border-top: 1px solid #f2f2f2;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   justify-content: flex-start;
+
+  &:focus-visible {
+    background: #f2fbfc;
+  }
 `;

package/dist/es/configs/ManuscriptsEditor.js

@@ -49,7 +49,7 @@ export const createEditorView = (props, root, state, dispatch) => {
         handleScrollToSelection: handleScrollToSelectedTarget,
         transformCopied,
         handleClickOn: (view, pos, node, nodePos, event) => {
-            props.onEditorClick(pos, node, nodePos, event);
+            props.onEditorClick(event);
             if (event?.target &&
                 event.target.classList.contains('table-context-menu-button')) {
                 return true;

package/dist/es/index.js

@@ -25,6 +25,7 @@ export { CollabProvider } from './classes/collabProvider';
 export { PopperManager } from './lib/popper';
 export * from './toolbar';
 export * from './lib/capabilities';
+export * from './lib/navigation-utils';
 export * from './lib/comments';
 export * from './lib/files';
 export * from './lib/footnotes';

package/dist/es/keys/misc.js

@@ -20,10 +20,11 @@ import { undoInputRule } from 'prosemirror-inputrules';
 import { goToNextCell } from 'prosemirror-tables';
 import { addToStart, autoComplete, exitEditorToContainer, ignoreAtomBlockNodeBackward, ignoreAtomBlockNodeForward, ignoreEnterInSubtitles, ignoreMetaNodeBackspaceCommand, insertBlock, insertBoxElement, insertBreak, insertCrossReference, insertInlineFootnote, insertInlineCitation, insertInlineEquation, insertLink, insertSection, selectAllIsolating, } from '../commands';
 import { skipCommandTracking } from './list';
+import { focusNearestElement } from '../lib/navigation-utils';
 const customKeymap = {
     Backspace: chainCommands(undoInputRule, ignoreAtomBlockNodeBackward, ignoreMetaNodeBackspaceCommand, skipCommandTracking(joinBackward)),
     Delete: ignoreAtomBlockNodeForward,
-    Tab: goToNextCell(1),
+    Tab: chainCommands(goToNextCell(1), focusNearestElement),
     Escape: exitEditorToContainer,
     'Mod-z': undo,
     'Mod-y': redo,

package/dist/es/keys/title.js

@@ -16,7 +16,7 @@
 import { isInGraphicalAbstractSection, schema, } from '@manuscripts/transform';
 import { chainCommands } from 'prosemirror-commands';
 import { Fragment, Slice } from 'prosemirror-model';
-import { Selection, TextSelection } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
 import { autoComplete, isAtEndOfTextBlock, isAtStartOfTextBlock, isTextSelection, } from '../commands';
 const insertParagraph = (dispatch, state, $anchor) => {
     const { tr, schema: { nodes }, } = state;
@@ -31,42 +31,6 @@ const insertParagraph = (dispatch, state, $anchor) => {
     tr.setSelection(TextSelection.create(tr.doc, pos + 1)).scrollIntoView();
     dispatch(tr);
 };
-const enterNextBlock = (dispatch, state, $anchor, create) => {
-    const { schema: { nodes }, tr, } = state;
-    const pos = $anchor.after($anchor.depth - 1);
-    let selection = Selection.findFrom(tr.doc.resolve(pos), 1, true);
-    if (!selection && create) {
-        tr.insert(pos, nodes.paragraph.create());
-        selection = Selection.findFrom(tr.doc.resolve(pos), 1, true);
-    }
-    if (!selection) {
-        return false;
-    }
-    tr.setSelection(selection).scrollIntoView();
-    dispatch(tr);
-    return true;
-};
-const enterPreviousBlock = (dispatch, state, $anchor) => {
-    const { tr } = state;
-    const offset = $anchor.nodeBefore ? $anchor.nodeBefore.nodeSize : 0;
-    const $pos = tr.doc.resolve($anchor.pos - offset - 1);
-    const previous = Selection.findFrom($pos, -1, true);
-    if (!previous) {
-        return false;
-    }
-    tr.setSelection(TextSelection.create(tr.doc, previous.from)).scrollIntoView();
-    dispatch(tr);
-    return true;
-};
-const exitBlock = (direction) => (state, dispatch) => {
-    const { selection: { $anchor }, } = state;
-    if (dispatch) {
-        return direction === 1
-            ? enterNextBlock(dispatch, state, $anchor)
-            : enterPreviousBlock(dispatch, state, $anchor);
-    }
-    return true;
-};
 const leaveTitle = (state, dispatch, view) => {
     const { selection } = state;
     if (!isTextSelection(selection)) {
@@ -150,8 +114,6 @@ const keepCaption = (state) => {
 const titleKeymap = {
     Backspace: chainCommands(protectTitles, protectReferencesTitle, protectCaption),
     Enter: chainCommands(autoComplete, leaveTitle, leaveFigcaption),
-    Tab: exitBlock(1),
     Delete: chainCommands(keepCaption, protectReferencesTitle),
-    'Shift-Tab': exitBlock(-1),
 };
 export default titleKeymap;

package/dist/es/lib/comments.js

@@ -28,6 +28,7 @@ export const createCommentMarker = (tagName, key, count) => {
     element.id = getMarkerID(key);
     element.dataset.key = key;
     element.classList.add('comment-marker');
+    element.tabIndex = 0;
     if (count && count > 1) {
         element.dataset.count = String(count);
     }

package/dist/es/lib/context-menu.js

@@ -16,6 +16,7 @@
 import { TriangleCollapsedIcon } from '@manuscripts/style-guide';
 import { isInGraphicalAbstractSection, isSectionTitleNode, nodeNames, schema, } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
+import { handleEnterKey, createKeyboardInteraction } from './navigation-utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -48,7 +49,9 @@ export const contextMenuBtnClass = 'btn-context-menu';
 const contextSubmenuBtnClass = 'context-submenu-trigger';
 export class ContextMenu {
     constructor(node, view, getPos) {
+        this.menuItems = [];
         this.showAddMenu = (target) => {
+            this.menuItems = [];
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -146,6 +149,7 @@ export class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
+            this.menuItems = [];
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -156,7 +160,7 @@ export class ContextMenu {
                 const figure = getMatchingChild(this.node, (node) => node.type === schema.nodes.figure);
                 if (figure) {
                     const attrType = figure.attrs.type;
-                    const submenuOptions = createPositionOptions(schema.nodes.figure, figure, attrType, this.view);
+                    const submenuOptions = createPositionOptions(schema.nodes.figure, figure, attrType, this.view, () => popper.destroy());
                     const submenuLabel = 'Position';
                     const submenu = this.createSubmenu(submenuLabel, submenuOptions);
                     menu.appendChild(submenu);
@@ -274,16 +278,28 @@ export class ContextMenu {
         this.createSubmenuTrigger = (contents) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
+            item.tabIndex = 0;
             const textNode = document.createTextNode(contents);
             item.innerHTML = renderToStaticMarkup(createElement(TriangleCollapsedIcon));
             item.prepend(textNode);
             item.classList.add(contextSubmenuBtnClass);
             item.addEventListener('mousedown', this.toggleSubmenu);
+            item.addEventListener('keydown', handleEnterKey((e) => {
+                const target = e.target;
+                this.toggleSubmenu(e);
+                const submenuContent = target.nextElementSibling;
+                if (submenuContent?.classList.contains('show')) {
+                    const firstItem = submenuContent.querySelector('.menu-item');
+                    firstItem?.focus();
+                }
+            }));
+            this.menuItems.push(item);
             return item;
         };
         this.createMenuItem = (contents, handler, IconComponent = null, selected = false) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
+            item.setAttribute('tabindex', '0');
             selected && item.classList.add('selected');
             if (IconComponent) {
                 if (typeof IconComponent === 'string') {
@@ -299,6 +315,8 @@ export class ContextMenu {
                 event.preventDefault();
                 handler(event);
             });
+            item.addEventListener('keydown', handleEnterKey(handler));
+            this.menuItems.push(item);
             return item;
         };
         this.createMenuSection = (createMenuItems, isSubmenu = false) => {
@@ -395,14 +413,62 @@ export class ContextMenu {
                     popper.destroy();
                 });
             };
-            const keyListener = (event) => {
-                if (event.key === 'Escape') {
-                    window.removeEventListener('keydown', keyListener);
-                    popper.destroy();
-                }
-            };
             window.addEventListener('mousedown', mouseListener);
-            window.addEventListener('keydown', keyListener);
+            window.requestAnimationFrame(() => {
+                const popperContainer = popper.getContainer();
+                if (popperContainer) {
+                    createKeyboardInteraction({
+                        container: popperContainer,
+                        navigation: {
+                            getItems: () => {
+                                const activeElement = document.activeElement;
+                                const openSubmenu = activeElement?.closest('.menu-section.menu.show');
+                                if (openSubmenu) {
+                                    return this.menuItems.filter((item) => openSubmenu.contains(item));
+                                }
+                                return this.menuItems.filter((item) => {
+                                    const menuSection = item.closest('.menu-section');
+                                    if (menuSection && menuSection.classList.contains('menu')) {
+                                        return menuSection.classList.contains('show');
+                                    }
+                                    return true;
+                                });
+                            },
+                            arrowKeys: {
+                                forward: 'ArrowDown',
+                                backward: 'ArrowUp',
+                            },
+                            getCurrentElement: () => document.activeElement,
+                        },
+                        additionalKeys: {
+                            ArrowRight: (event) => {
+                                const target = event.target;
+                                if (target.classList.contains(contextSubmenuBtnClass)) {
+                                    this.toggleSubmenu(event);
+                                    const submenuContent = target.nextElementSibling;
+                                    if (submenuContent?.classList.contains('show')) {
+                                        const firstItem = submenuContent.querySelector('.menu-item');
+                                        firstItem?.focus();
+                                    }
+                                }
+                            },
+                            ArrowLeft: (event) => {
+                                const target = event.target;
+                                const submenu = target.closest('.context-submenu');
+                                if (submenu) {
+                                    const trigger = submenu.querySelector(`.${contextSubmenuBtnClass}`);
+                                    if (trigger) {
+                                        const submenuContent = trigger.nextElementSibling;
+                                        submenuContent?.classList.toggle('show');
+                                        trigger.focus();
+                                    }
+                                }
+                            },
+                        },
+                    });
+                }
+                this.menuItems[0]?.focus();
+            });
         };
         this.trimTitle = (title, max) => {
             return title.length > max ? title.substring(0, max) + '…' : title;

package/dist/es/lib/media.js

@@ -15,6 +15,7 @@
  */
 import { schema, } from '@manuscripts/transform';
 import { openEmbedDialog } from '../components/toolbar/InsertEmbedDialog';
+import { handleEnterKey } from './navigation-utils';
 import { FigureOptions, } from '../components/views/FigureDropdown';
 import { fileCorruptedIcon } from '../icons';
 import ReactSubView from '../views/ReactSubView';
@@ -50,9 +51,10 @@ const MediaLabels = {
     [MediaType.Figure]: 'figure',
     [MediaType.ExternalLink]: 'a file to link',
 };
-export const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos) => {
+export const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos, props) => {
     const element = document.createElement('div');
     element.classList.add('figure', 'placeholder');
+    element.tabIndex = 0;
     const instructions = document.createElement('div');
     instructions.classList.add('instructions');
     instructions.innerHTML = `
@@ -72,14 +74,29 @@ export const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos
   `;
     if (mediaType === MediaType.Media && view && getPos) {
         const embedLink = instructions.querySelector("[data-action='add-external-link']");
+        embedLink.tabIndex = 0;
         if (embedLink) {
             embedLink.addEventListener('click', (e) => {
                 e.stopPropagation();
                 e.preventDefault();
                 openEmbedDialog(view, getPos());
             });
+            embedLink.addEventListener('keydown', handleEnterKey((e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                openEmbedDialog(view, getPos());
+            }));
         }
     }
+    const links = instructions.querySelectorAll(`[data-action='open-other-files'], [data-action='open-supplement-files'] `);
+    links.forEach((link) => {
+        link.tabIndex = 0;
+        link.addEventListener('keydown', handleEnterKey((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props?.onEditorClick(event);
+        }));
+    });
     element.appendChild(instructions);
     return element;
 };
@@ -154,8 +171,7 @@ export const createFileUploader = (handler, accept = '*/*') => {
     return () => input.click();
 };
 export const addInteractionHandlers = (element, uploadFn, accept = '*/*') => {
-    const handlePlaceholderClick = (event) => {
-        const target = event.target;
+    const handlePlaceholderInteraction = (target) => {
         if (target.dataset && target.dataset.action) {
             return;
         }
@@ -170,7 +186,15 @@ export const addInteractionHandlers = (element, uploadFn, accept = '*/*') => {
         });
         input.click();
     };
+    const handlePlaceholderClick = (event) => {
+        const target = event.target;
+        handlePlaceholderInteraction(target);
+    };
     element.addEventListener('click', handlePlaceholderClick);
+    element.addEventListener('keydown', handleEnterKey(() => {
+        const target = document.activeElement;
+        handlePlaceholderInteraction(target);
+    }));
     element.addEventListener('mouseenter', () => {
         element.classList.toggle('over', true);
     });

package/dist/es/lib/navigation-utils.js

@@ -0,0 +1,122 @@
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { findParentNodeWithIdValue } from './utils';
+export function focusNextElement(elements, currentIndex, direction) {
+    const nextIndex = direction === 'forward'
+        ? (currentIndex + 1) % elements.length
+        : (currentIndex - 1 + elements.length) % elements.length;
+    const nextElement = elements[nextIndex];
+    nextElement?.focus();
+}
+export function handleEnterKey(action) {
+    return (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            action(event);
+        }
+    };
+}
+export function handleArrowNavigation(event, elements, currentElement, keys) {
+    const { forward, backward } = keys;
+    if (event.key !== forward && event.key !== backward) {
+        return;
+    }
+    event.preventDefault();
+    if (elements.length === 0) {
+        return;
+    }
+    const currentIndex = elements.indexOf(currentElement);
+    if (currentIndex === -1) {
+        elements[0]?.focus();
+        return;
+    }
+    const direction = event.key === forward ? 'forward' : 'backward';
+    focusNextElement(elements, currentIndex, direction);
+}
+export function createKeyboardInteraction(options) {
+    const { container, additionalKeys, navigation } = options;
+    const handleKeydown = (event) => {
+        const e = event;
+        const key = e.key;
+        const handler = additionalKeys?.[key];
+        if (handler) {
+            e.preventDefault();
+            handler(e);
+            return;
+        }
+        if (!navigation) {
+            return;
+        }
+        const { getItems, arrowKeys, getCurrentElement } = navigation;
+        const currentElement = getCurrentElement
+            ? getCurrentElement(e)
+            : e.target;
+        if (!currentElement) {
+            return;
+        }
+        const list = getItems();
+        if (!list.length) {
+            return;
+        }
+        handleArrowNavigation(e, list, currentElement, arrowKeys);
+    };
+    container.addEventListener('keydown', handleKeydown);
+    return () => {
+        container.removeEventListener('keydown', handleKeydown);
+    };
+}
+export const focusNearestElement = (state, dispatch, view) => {
+    if (!view) {
+        return false;
+    }
+    const active = document.activeElement;
+    if (!active || !active.classList.contains('manuscript-editor')) {
+        return false;
+    }
+    const { from } = view.state.selection;
+    const coords = view.coordsAtPos(from);
+    const container = getCursorContainer(view);
+    const target = findNearestTabbable(container, coords.top);
+    if (!target) {
+        return false;
+    }
+    target.focus();
+    return true;
+};
+export function getCursorContainer(view) {
+    const scoped = findParentNodeWithIdValue(view.state.selection);
+    if (scoped) {
+        const dom = view.nodeDOM(scoped.pos);
+        if (dom instanceof HTMLElement) {
+            return dom;
+        }
+    }
+    return view.dom;
+}
+export function findNearestTabbable(container, verticalPosition) {
+    const tabbables = container.querySelectorAll('a[href], button, [tabindex]:not([tabindex="-1"])');
+    let target = null;
+    let minDistance = null;
+    tabbables.forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        const distance = Math.abs(rect.top - verticalPosition);
+        if (minDistance === null || distance < minDistance) {
+            minDistance = distance;
+            target = el;
+        }
+    });
+    return target;
+}

package/dist/es/lib/popper.js

@@ -14,18 +14,36 @@
  * limitations under the License.
  */
 import { createPopper, } from '@popperjs/core';
+import { createKeyboardInteraction } from './navigation-utils';
 export class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
     show(target, contents, placement = 'bottom', showArrow = true, modifiers = []) {
         this.destroy();
+        this.triggerElement = target;
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
+            this.container = container;
             container.addEventListener('click', (e) => {
                 e.stopPropagation();
             });
+            const closeAndRestoreFocus = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.destroy();
+                if (this.triggerElement instanceof HTMLElement) {
+                    this.triggerElement.focus();
+                }
+            };
+            createKeyboardInteraction({
+                container,
+                additionalKeys: {
+                    Escape: closeAndRestoreFocus,
+                    Tab: closeAndRestoreFocus,
+                },
+            });
             if (showArrow) {
                 const arrow = document.createElement('div');
                 arrow.className = 'popper-arrow';
@@ -77,15 +95,21 @@ export class PopperManager {
                 window.removeEventListener('click', this.handleDocumentClick);
             }
             delete this.activePopper;
+            delete this.container;
         }
     }
+    getContainer() {
+        return this.container;
+    }
     update() {
         if (this.activePopper) {
             this.activePopper.update();
         }
     }
     focusInput(container) {
-        const element = container.querySelector('input');
+        const input = container.querySelector('input');
+        const button = container.querySelector('button:not([disabled])');
+        const element = input || button;
         if (element) {
             element.focus();
         }

package/dist/es/lib/position-menu.js

@@ -17,6 +17,7 @@ import { ContextMenu } from '@manuscripts/style-guide';
 import { imageDefaultIcon, imageLeftIcon, imageRightIcon } from '../icons';
 import { figurePositions } from '../views/image_element';
 import ReactSubView from '../views/ReactSubView';
+import { handleEnterKey } from './navigation-utils';
 import { updateNodeAttrs } from './view';
 export const createPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
     const createAction = (position) => () => {
@@ -104,7 +105,9 @@ export const createPositionMenuWrapper = (currentPosition, onClick, props) => {
         positionMenuButton.innerHTML = icon;
     }
     if (can.editArticle) {
+        positionMenuButton.tabIndex = 0;
         positionMenuButton.addEventListener('click', onClick);
+        positionMenuButton.addEventListener('keydown', handleEnterKey(onClick));
     }
     positionMenuWrapper.appendChild(positionMenuButton);
     return positionMenuWrapper;

package/dist/es/lib/utils.js

@@ -18,6 +18,7 @@ import { Fragment, } from 'prosemirror-model';
 import { findChildrenByType, findParentNode, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { fieldConfigMap } from '../components/references/ReferenceForm/config';
 import { arrowDown } from '../icons';
+import { handleEnterKey } from './navigation-utils';
 import { getEditorProps } from '../plugins/editor-props';
 export function* iterateChildren(node, recurse = false) {
     for (let i = 0; i < node.childCount; i++) {
@@ -140,10 +141,14 @@ export const createToggleButton = (listener, what) => {
     altTitlesButton.classList.add('toggle-button-open', 'button-reset');
     altTitlesButton.setAttribute('aria-label', `Expand ${what}`);
     altTitlesButton.innerHTML = arrowDown;
-    altTitlesButton.addEventListener('click', (e) => {
+    const activate = (e) => {
         e.preventDefault();
-        listener();
+        listener(e);
+    };
+    altTitlesButton.addEventListener('click', (e) => {
+        activate(e);
     });
+    altTitlesButton.addEventListener('keydown', handleEnterKey(activate));
     return altTitlesButton;
 };
 export const getInsertPos = (type, parent, pos) => {