@manuscripts/body-editor 3.12.1 → 3.12.3

package/dist/es/components/references/CitationEditor.js

@@ -1,4 +1,4 @@
-import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, IconTextButton, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import React, { useMemo, useReducer, useState } from 'react';
 import styled from 'styled-components';
@@ -9,6 +9,7 @@ import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ReferenceLine } from './ReferenceLine';
 import { ReferenceSearch } from './ReferenceSearch';
 import { ReferencesModal } from './ReferencesModal';
+const Container = withFocusTrap(styled.div ``);
 const CitedItemActions = styled.div `
   display: flex;
   align-items: center;
@@ -41,10 +42,10 @@ const ActionButton = styled(IconButton).attrs({
 const EditReferenceButton = styled(ActionButton) `
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const Actions = styled.div `
+const Actions = styled(ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 const itemsReducer = attrsReducer();
@@ -132,7 +133,7 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
     if (!rids.length) {
         return (React.createElement(ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
     }
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(Container, null,
         React.createElement(Dialog, { isOpen: deleteDialog.show, category: Category.confirmation, header: "Remove cited item", message: "Are you sure you want to remove this cited item? It will still exist in the reference list.", actions: {
                 secondary: {
                     action: () => {
@@ -156,8 +157,6 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
                 React.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
                     React.createElement(DeleteSolidIcon, { className: 'remove-icon' }))))))),
         React.createElement(Actions, null,
-            React.createElement(IconTextButton, null),
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
-                React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));
+            React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
+            React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };

package/dist/es/components/references/ImportBibliographyForm.js

@@ -13,15 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FormActionsBar, FormRow, Label, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
+import { FormActionsBar, FormRow, Label, outlineStyle, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
 import { useFormik } from 'formik';
 import { debounce } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
 import { importBibliographyItems } from '../../lib/references';
 import { ReferenceLine } from './ReferenceLine';
 export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
     const [dragging, setDragging] = useState(false);
+    const fileInputRef = useRef(null);
     const formik = useFormik({
         initialValues: {
             content: '',
@@ -80,13 +81,19 @@ export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         };
         reader.readAsText(file);
     };
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            fileInputRef?.current?.click();
+        }
+    };
     return (React.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
         React.createElement(FormRow, null,
-            React.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+            React.createElement(DropContainer, { tabIndex: 0, role: "button", onDrop: handleDrop, onDragOver: (e) => {
                     e.preventDefault();
                     setDragging(true);
-                }, onDragLeave: () => setDragging(false), active: dragging },
-                React.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, active: dragging },
+                React.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }),
                 React.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
         React.createElement(FormRow, null,
             React.createElement(Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
@@ -134,4 +141,6 @@ const DropContainer = styled.div `
     font-family: ${(props) => props.theme.font.family.Lato};
     color: ${(props) => props.theme.colors.text.onLight};
   }
+
+  ${outlineStyle}
 `;

package/dist/es/components/references/ReferenceForm/PersonDropDown.js

@@ -13,7 +13,7 @@ export const PersonDropDown = (props) => {
             React.createElement(ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), isOpen: isOpen },
                 React.createElement(DropdownIndicator, null),
                 title),
-            React.createElement(RemoveButton, { type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
+            React.createElement(RemoveButton, { size: 13, type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
                 React.createElement(DeleteIcon, null))),
         isOpen && (React.createElement(PersonForm, null,
             React.createElement(FormRow, null,

package/dist/es/components/references/ReferenceForm/styled-components.js

@@ -1,4 +1,4 @@
-import { ArrowDownIcon, IconButton, TextArea, TextField, } from '@manuscripts/style-guide';
+import { ArrowDownIcon, IconButton, outlineStyle, SecondaryIconButton, TextArea, TextField, } from '@manuscripts/style-guide';
 import styled from 'styled-components';
 export const Button = styled(IconButton).attrs({
     defaultColor: true,
@@ -86,7 +86,7 @@ export const ToggleButton = styled.button `
   text-align: left;
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: 1rem;
-  padding: 0.6em 0.5em;
+  margin: 0.6em;
 
   outline: none;
 
@@ -97,11 +97,20 @@ export const ToggleButton = styled.button `
   svg {
     transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
   }
+  ${outlineStyle}
 `;
-export const RemoveButton = styled.button `
+export const RemoveButton = styled(SecondaryIconButton) `
   border: none;
   background: transparent;
   padding: 0;
-
   outline: none;
+  svg {
+    path[fill='white'] {
+      fill: white;
+    }
+    rect[fill],
+    path:not([fill='white']) {
+      fill: #f35143;
+    }
+  }
 `;

package/dist/es/components/references/ReferenceSearch.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, UploadIcon, } from '@manuscripts/style-guide';
+import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, UploadIcon, withFocusTrap, } from '@manuscripts/style-guide';
 import { debounce } from 'lodash';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -31,10 +31,10 @@ const Actions = styled(ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddReferenceActions = styled(ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;

package/dist/es/components/references/ReferenceSearchResults.js

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, SecondaryButton } from '@manuscripts/style-guide';
-import React from 'react';
+import { AddedIcon, AddIcon, SecondaryButton, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { ReferenceLine } from './ReferenceLine';
 const StatusIcon = styled.div `
@@ -36,12 +36,14 @@ const MoreButton = styled(SecondaryButton) `
   margin-left: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.button.default.color.default};
 `;
-export const ReferenceSearchResultsContainer = styled.div `
-  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+export const ReferenceSearchResultsContainer = withListNavigation(styled.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
   flex: 1;
   overflow-y: auto;
-`;
-export const ReferenceSearchResult = styled.div `
+  outline: none;
+`);
+export const ReferenceSearchResult = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
@@ -49,9 +51,21 @@ export const ReferenceSearchResult = styled.div `
   &:not(:last-of-type) {
     border-bottom: 1px solid #f6f6f6;
   }
-`;
-export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => (React.createElement(ReferenceSearchResultsContainer, null,
-    items.map((item) => (React.createElement(ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
-        React.createElement(StatusIcon, null, isSelected(item) ? (React.createElement(AddedIcon, { width: 24, height: 24 })) : (React.createElement(AddIcon, { width: 24, height: 24 }))),
-        React.createElement(ReferenceLine, { item: item })))),
-    items.length < 25 && total > items.length ? (React.createElement(MoreButton, { onClick: onShowMore, "data-cy": 'more-button' }, "Show more")) : undefined));
+`);
+export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
+    const list = useRef(null);
+    const onExpandReferenceList = () => {
+        const element = list.current;
+        if (element) {
+            element.setAttribute('tabindex', '0');
+            element.focus();
+            element.setAttribute('tabindex', '-1');
+        }
+        onShowMore();
+    };
+    return (React.createElement(ReferenceSearchResultsContainer, { ref: list },
+        items.map((item) => (React.createElement(ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
+            React.createElement(StatusIcon, null, isSelected(item) ? (React.createElement(AddedIcon, { width: 24, height: 24 })) : (React.createElement(AddIcon, { width: 24, height: 24 }))),
+            React.createElement(ReferenceLine, { item: item })))),
+        items.length < 25 && total > items.length ? (React.createElement(MoreButton, { onClick: onExpandReferenceList, "data-cy": 'more-button' }, "Show more")) : undefined));
+};

package/dist/es/components/references/ReferenceSearchSection.js

@@ -13,24 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
+import { IconTextButton, TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ReferenceSearchResults } from './ReferenceSearchResults';
 import { ReferenceSearchResultsPlaceholder } from './ReferenceSearchResultsPlaceholder';
-const SearchSourceLabel = styled.div `
-  margin: 0 ${(props) => props.theme.grid.unit * 4}px
+const SearchSourceLabel = styled(IconTextButton) `
+  margin: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px
     ${(props) => props.theme.grid.unit * 2}px;
   color: ${(props) => props.theme.colors.text.secondary};
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  .icon {
-    margin-left: 8px;
-    margin-right: 13px;
-  }
 
   &:hover {
     color: ${(props) => props.theme.colors.text.muted};

package/dist/es/components/references/ReferencesModal.js

@@ -1,4 +1,4 @@
-import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, } from '@manuscripts/style-guide';
+import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -13,10 +13,11 @@ const ReferencesSidebar = styled(ModalSidebar) `
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
 `;
-const ReferencesInnerWrapper = styled.div `
+const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
-`;
-const ReferenceButton = styled.div `
+  padding: 12px 0;
+`);
+const ReferenceButton = withNavigableListItem(styled.div `
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
@@ -43,7 +44,7 @@ const ReferenceButton = styled.div `
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
-`;
+`);
 const IconContainer = styled.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
   position: relative;

package/dist/es/components/toolbar/InsertTableDialog.js

@@ -38,7 +38,15 @@ const OptionWrapper = styled.div `
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+  background-color: ${(props) => {
+    if (props.selected) {
+        return props.theme.colors.background.selected;
+    }
+    if (props.focused) {
+        return props.theme.colors.background.fifth;
+    }
+    return 'transparent';
+}};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.fifth};
@@ -59,8 +67,8 @@ export const InsertTableDialog = ({ state, dispatch, }) => {
         value: index + 1,
         label: `${index + 1}`,
     }));
-    const OptionComponent = ({ innerProps, data, }) => {
-        return (React.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+    const OptionComponent = ({ innerProps, data, innerRef, isFocused, isSelected, }) => {
+        return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
     };
     const actions = {
         primary: {

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

@@ -13,30 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
+import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   padding: ${(props) => props.theme.grid.unit * 3}px
     ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
   flex-direction: column;
   max-height: 60vh;
   overflow: hidden;
-`;
+`);
 const Actions = styled.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
 `;
-const Items = styled.div `
+const Items = withListNavigation(styled.div `
   flex: 1;
   overflow-y: auto;
-  margin: ${(props) => props.theme.grid.unit * 4}px 0;
-`;
-const CrossReferenceItem = styled.div `
-  position: relative;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`);
+const CrossReferenceItem = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   background-color: ${(props) => props.isSelected
@@ -48,17 +47,12 @@ const CrossReferenceItem = styled.div `
     ? props.theme.colors.brand.medium
     : props.theme.colors.border.secondary};
   border-width: 1px 0;
-  margin-top: -1px;
   z-index: ${(props) => (props.isSelected ? '1' : '0')};
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &:hover {
     background-color: ${(props) => props.theme.colors.background.selected};
   }
-`;
+`);
 const Label = styled.span `
   color: ${(props) => props.theme.colors.text.primary};
 `;
@@ -105,7 +99,7 @@ export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, curre
     }, [currentTargetId]);
     return (React.createElement(Container, null,
         React.createElement(Heading, null, "Insert Cross-reference"),
-        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onMouseDown: () => setSelectedItem(target.id) },
+        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
             React.createElement(DefaultLabelWrapper, null,
                 React.createElement(Label, null, target.label),
                 React.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { isDeleted } from '../../lib/track-changes-utils';
@@ -29,10 +29,10 @@ const Actions = styled(ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddNewFootnote = styled(ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;
@@ -113,17 +113,17 @@ const Separator = styled.div `
   border-bottom: 1px solid #e2e2e2;
   margin: 4px 0;
 `;
-const NotesListContainer = styled.div `
+const NotesListContainer = withListNavigation(styled.div `
   padding: ${(props) => props.theme.grid.unit * 6}px
     ${(props) => props.theme.grid.unit * 5}px;
   flex: 1;
   overflow-y: auto;
-`;
-const FootnoteItemContainer = styled.div `
+`);
+const FootnoteItemContainer = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
-`;
+`);
 const StatusIcon = styled.div `
   flex-shrink: 1;
   margin-right: ${(props) => props.theme.grid.unit * 3}px;

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

@@ -1,4 +1,4 @@
-import { ButtonGroup, CloseButton, IconButton, IconButtonGroup, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { ButtonGroup, CloseButton, IconButton, IconButtonGroup, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, withNavigableListItem, withListNavigation, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import Select from 'react-select';
 import styled from 'styled-components';
@@ -39,8 +39,8 @@ const InsertSpecialCharacterDialog = ({ view }) => {
                     React.createElement(ButtonsContainer, null,
                         React.createElement(PrimaryButton, { onClick: handleClose }, "Close")))))));
 };
-const OptionComponent = ({ innerProps, data, }) => {
-    return (React.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+const OptionComponent = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
+    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
 };
 const Container = styled(ModalContainer) `
   padding: 8px;
@@ -64,7 +64,15 @@ const OptionWrapper = styled.div `
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+  background-color: ${(props) => {
+    if (props.selected) {
+        return props.theme.colors.background.selected;
+    }
+    if (props.focused) {
+        return props.theme.colors.background.fifth;
+    }
+    return 'transparent';
+}};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.fifth};
@@ -74,19 +82,20 @@ const CharactersSetContainer = styled.div `
   flex: 1;
   overflow-y: scroll;
   margin: 18px 0;
-  border: 1px solid #ddd;
+  padding: 8px;
 `;
-const CharactersSet = styled(IconButtonGroup) `
+const CharactersSet = withListNavigation(styled(IconButtonGroup) `
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
-  height: ${(props) => props.theme.grid.unit * 8}px;
-`;
-const Character = styled(IconButton) `
+  border: 1px solid #ddd;
+`);
+const Character = withNavigableListItem(styled(IconButton) `
   border-bottom: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-radius: unset;
 
-  :hover {
+  :hover,
+  :focus {
     background-color: #f0f0f0 !important;
   }
 
@@ -96,7 +105,12 @@ const Character = styled(IconButton) `
     border-bottom: 1px solid #ddd !important;
     border-right: 1px solid #ddd !important;
   }
-`;
+
+  &&:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+`);
 export const openInsertSpecialCharacterDialog = (view) => {
     if (!view) {
         return;

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, } from '@manuscripts/style-guide';
+import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { allowedHref } from '../../lib/url';
@@ -44,6 +44,7 @@ const RemoveButton = styled(SecondaryButton) `
 export const Open = styled.a `
   display: inline-block;
   margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: 4px;
   text-transform: uppercase;
   color: inherit;
   font-size: ${(props) => props.theme.font.size.small};
@@ -53,7 +54,13 @@ export const Open = styled.a `
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
     margin-left: 4px;
   }
+
+  &&:not([disabled]):focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 3px;
+  }
 `;
+const Form = withFocusTrap(styled.form ``);
 export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
     const [href, setHref] = useState(value.href);
     const [text, setText] = useState(value.text);
@@ -93,7 +100,7 @@ export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
             onSave({ href, text, title });
         }
     }, [href, text, title, onSave, validate]);
-    return (React.createElement("form", { onSubmit: handleSubmit, noValidate: true },
+    return (React.createElement(Form, { onSubmit: handleSubmit, noValidate: true },
         React.createElement(FormContainer, null,
             React.createElement(FormRow, null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },

package/dist/es/lib/normalize.js

@@ -14,21 +14,23 @@
  * limitations under the License.
  */
 import { generateNodeID, schema } from '@manuscripts/transform';
+const trim = (value) => (value ?? '').trim();
 export const normalizeAuthor = (author) => {
     const basic = {
         id: author.id,
-        role: author.role || '',
+        role: trim(author.role),
         affiliationIDs: (author.affiliationIDs || []).sort(),
-        given: author.given || '',
-        family: author.family || '',
-        email: author.email || '',
+        given: trim(author.given),
+        family: trim(author.family),
+        email: trim(author.email),
         isCorresponding: author.isCorresponding || false,
-        ORCID: author.ORCID || '',
+        ORCID: trim(author.ORCID),
         priority: author.priority,
         isJointContributor: author.isJointContributor || false,
         footnoteIDs: author.footnoteIDs || [],
         correspIDs: author.correspIDs || [],
-        prefix: author.prefix || '',
+        prefix: trim(author.prefix),
+        suffix: trim(author.suffix),
     };
     if (author.creditRoles && Array.isArray(author.creditRoles)) {
         basic.creditRoles = author.creditRoles;

package/dist/es/lib/popper.js

@@ -37,11 +37,13 @@ export class PopperManager {
                     this.triggerElement.focus();
                 }
             };
+            const isMenu = contents.classList.contains('context-menu') ||
+                contents.classList.contains('menu');
             createKeyboardInteraction({
                 container,
                 additionalKeys: {
                     Escape: closeAndRestoreFocus,
-                    Tab: closeAndRestoreFocus,
+                    Tab: isMenu ? closeAndRestoreFocus : undefined,
                 },
             });
             if (showArrow) {
@@ -113,7 +115,7 @@ export class PopperManager {
             return;
         }
         if (autoFocus) {
-            const button = container.querySelector('button:not([disabled])');
+            const button = container.querySelector('button:not([disabled]), [tabindex]:not([tabindex="-1"])');
             button?.focus();
         }
     }

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.12.1';
+export const VERSION = '3.12.3';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/cross_reference_editable.js

@@ -39,6 +39,7 @@ export class CrossReferenceEditableView extends CrossReferenceView {
                 currentCustomLabel: this.node.attrs.label,
             };
             this.popperContainer = ReactSubView(this.props, CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
+            this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
         this.destroy = () => {

package/dist/es/views/equation_editable.js

@@ -30,6 +30,12 @@ export class EquationEditableView extends EquationView {
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
+                extraKeys: {
+                    Esc: () => {
+                        this.props.popper.destroy();
+                        this.view.focus();
+                    },
+                },
             });
             input.on('changes', async () => {
                 const contents = input.getValue();

package/dist/es/views/inline_equation_editable.js

@@ -30,6 +30,12 @@ export class InlineEquationEditableView extends InlineEquationView {
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
+                extraKeys: {
+                    Esc: () => {
+                        this.props.popper.destroy();
+                        this.view.focus();
+                    },
+                },
             });
             input.on('changes', async () => {
                 const contents = input.getValue();

package/dist/es/views/inline_footnote.js

@@ -98,6 +98,7 @@ export class InlineFootnoteView extends BaseNodeView {
                 onInsert: this.handleInsert,
             };
             this.popperContainer = ReactSubView(this.props, FootnotesSelector, props, this.node, this.getPos, this.view, ['footnote-editor']);
+            this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.initialise = () => {