@manuscripts/body-editor 3.12.1 → 3.12.3

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

@@ -48,6 +48,7 @@ const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferenceSearch_1 = require("./ReferenceSearch");
 const ReferencesModal_1 = require("./ReferencesModal");
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div ``);
 const CitedItemActions = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -80,10 +81,10 @@ const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).
 const EditReferenceButton = (0, styled_components_1.default)(ActionButton) `
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const Actions = styled_components_1.default.div `
+const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 const itemsReducer = (0, array_reducer_1.attrsReducer)();
@@ -171,7 +172,7 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
     if (!rids.length) {
         return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(Container, null,
         react_1.default.createElement(style_guide_1.Dialog, { isOpen: deleteDialog.show, category: style_guide_1.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: () => {
@@ -195,9 +196,7 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
                 react_1.default.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
                     react_1.default.createElement(style_guide_1.DeleteSolidIcon, { className: 'remove-icon' }))))))),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(style_guide_1.IconTextButton, null),
-            react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));
+            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
+            react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };
 exports.CitationEditor = CitationEditor;

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

@@ -58,6 +58,7 @@ const references_1 = require("../../lib/references");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ImportBibliographyForm = ({ onCancel, onSave, }) => {
     const [dragging, setDragging] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
     const formik = (0, formik_1.useFormik)({
         initialValues: {
             content: '',
@@ -116,13 +117,19 @@ const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         };
         reader.readAsText(file);
     };
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            fileInputRef?.current?.click();
+        }
+    };
     return (react_1.default.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
         react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+            react_1.default.createElement(DropContainer, { tabIndex: 0, role: "button", onDrop: handleDrop, onDragOver: (e) => {
                     e.preventDefault();
                     setDragging(true);
-                }, onDragLeave: () => setDragging(false), active: dragging },
-                react_1.default.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, active: dragging },
+                react_1.default.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }),
                 react_1.default.createElement(style_guide_1.Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
         react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(style_guide_1.Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
@@ -171,4 +178,6 @@ const DropContainer = styled_components_1.default.div `
     font-family: ${(props) => props.theme.font.family.Lato};
     color: ${(props) => props.theme.colors.text.onLight};
   }
+
+  ${style_guide_1.outlineStyle}
 `;

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

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

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

@@ -92,7 +92,7 @@ exports.ToggleButton = styled_components_1.default.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;
 
@@ -103,11 +103,20 @@ exports.ToggleButton = styled_components_1.default.button `
   svg {
     transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
   }
+  ${style_guide_1.outlineStyle}
 `;
-exports.RemoveButton = styled_components_1.default.button `
+exports.RemoveButton = (0, styled_components_1.default)(style_guide_1.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/cjs/components/references/ReferenceSearch.js

@@ -70,10 +70,10 @@ const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled_components_1.default.div `
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddReferenceActions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;

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

@@ -14,13 +14,46 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferenceSearchResults = exports.ReferenceSearchResult = exports.ReferenceSearchResultsContainer = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ReferenceLine_1 = require("./ReferenceLine");
 const StatusIcon = styled_components_1.default.div `
@@ -42,12 +75,14 @@ const MoreButton = (0, styled_components_1.default)(style_guide_1.SecondaryButto
   margin-left: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.button.default.color.default};
 `;
-exports.ReferenceSearchResultsContainer = styled_components_1.default.div `
-  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+exports.ReferenceSearchResultsContainer = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
   flex: 1;
   overflow-y: auto;
-`;
-exports.ReferenceSearchResult = styled_components_1.default.div `
+  outline: none;
+`);
+exports.ReferenceSearchResult = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
@@ -55,10 +90,22 @@ exports.ReferenceSearchResult = styled_components_1.default.div `
   &:not(:last-of-type) {
     border-bottom: 1px solid #f6f6f6;
   }
-`;
-const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => (react_1.default.createElement(exports.ReferenceSearchResultsContainer, null,
-    items.map((item) => (react_1.default.createElement(exports.ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
-        react_1.default.createElement(StatusIcon, null, isSelected(item) ? (react_1.default.createElement(style_guide_1.AddedIcon, { width: 24, height: 24 })) : (react_1.default.createElement(style_guide_1.AddIcon, { width: 24, height: 24 }))),
-        react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item })))),
-    items.length < 25 && total > items.length ? (react_1.default.createElement(MoreButton, { onClick: onShowMore, "data-cy": 'more-button' }, "Show more")) : undefined));
+`);
+const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
+    const list = (0, react_1.useRef)(null);
+    const onExpandReferenceList = () => {
+        const element = list.current;
+        if (element) {
+            element.setAttribute('tabindex', '0');
+            element.focus();
+            element.setAttribute('tabindex', '-1');
+        }
+        onShowMore();
+    };
+    return (react_1.default.createElement(exports.ReferenceSearchResultsContainer, { ref: list },
+        items.map((item) => (react_1.default.createElement(exports.ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
+            react_1.default.createElement(StatusIcon, null, isSelected(item) ? (react_1.default.createElement(style_guide_1.AddedIcon, { width: 24, height: 24 })) : (react_1.default.createElement(style_guide_1.AddIcon, { width: 24, height: 24 }))),
+            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item })))),
+        items.length < 25 && total > items.length ? (react_1.default.createElement(MoreButton, { onClick: onExpandReferenceList, "data-cy": 'more-button' }, "Show more")) : undefined));
+};
 exports.ReferenceSearchResults = ReferenceSearchResults;

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

@@ -57,19 +57,11 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ReferenceSearchResults_1 = require("./ReferenceSearchResults");
 const ReferenceSearchResultsPlaceholder_1 = require("./ReferenceSearchResultsPlaceholder");
-const SearchSourceLabel = styled_components_1.default.div `
-  margin: 0 ${(props) => props.theme.grid.unit * 4}px
+const SearchSourceLabel = (0, styled_components_1.default)(style_guide_1.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/cjs/components/references/ReferencesModal.js

@@ -52,10 +52,11 @@ const ReferencesSidebar = (0, styled_components_1.default)(style_guide_1.ModalSi
 const ReferencesSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
   overflow-y: auto;
 `;
-const ReferencesInnerWrapper = styled_components_1.default.div `
+const ReferencesInnerWrapper = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   width: 100%;
-`;
-const ReferenceButton = styled_components_1.default.div `
+  padding: 12px 0;
+`);
+const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
@@ -82,7 +83,7 @@ const ReferenceButton = styled_components_1.default.div `
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
-`;
+`);
 const IconContainer = styled_components_1.default.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
   position: relative;

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

@@ -77,7 +77,15 @@ const OptionWrapper = styled_components_1.default.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};
@@ -98,8 +106,8 @@ const InsertTableDialog = ({ state, dispatch, }) => {
         value: index + 1,
         label: `${index + 1}`,
     }));
-    const OptionComponent = ({ innerProps, data, }) => {
-        return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+    const OptionComponent = ({ innerProps, data, innerRef, isFocused, isSelected, }) => {
+        return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
     };
     const actions = {
         primary: {

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

@@ -55,27 +55,26 @@ exports.CrossReferenceItems = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Container = styled_components_1.default.div `
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.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_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
 `;
-const Items = styled_components_1.default.div `
+const Items = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   flex: 1;
   overflow-y: auto;
-  margin: ${(props) => props.theme.grid.unit * 4}px 0;
-`;
-const CrossReferenceItem = styled_components_1.default.div `
-  position: relative;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`);
+const CrossReferenceItem = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   background-color: ${(props) => props.isSelected
@@ -87,17 +86,12 @@ const CrossReferenceItem = styled_components_1.default.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_components_1.default.span `
   color: ${(props) => props.theme.colors.text.primary};
 `;
@@ -144,7 +138,7 @@ const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTarge
     }, [currentTargetId]);
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(Heading, null, "Insert Cross-reference"),
-        react_1.default.createElement(Items, null, targets.length ? (targets.map((target) => (react_1.default.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onMouseDown: () => setSelectedItem(target.id) },
+        react_1.default.createElement(Items, null, targets.length ? (targets.map((target) => (react_1.default.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
             react_1.default.createElement(DefaultLabelWrapper, null,
                 react_1.default.createElement(Label, null, target.label),
                 react_1.default.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),

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

@@ -68,10 +68,10 @@ const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled_components_1.default.div `
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddNewFootnote = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;
@@ -153,17 +153,17 @@ const Separator = styled_components_1.default.div `
   border-bottom: 1px solid #e2e2e2;
   margin: 4px 0;
 `;
-const NotesListContainer = styled_components_1.default.div `
+const NotesListContainer = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   padding: ${(props) => props.theme.grid.unit * 6}px
     ${(props) => props.theme.grid.unit * 5}px;
   flex: 1;
   overflow-y: auto;
-`;
-const FootnoteItemContainer = styled_components_1.default.div `
+`);
+const FootnoteItemContainer = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
-`;
+`);
 const StatusIcon = styled_components_1.default.div `
   flex-shrink: 1;
   margin-right: ${(props) => props.theme.grid.unit * 3}px;

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

@@ -78,8 +78,8 @@ const InsertSpecialCharacterDialog = ({ view }) => {
                     react_1.default.createElement(ButtonsContainer, null,
                         react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClose }, "Close")))))));
 };
-const OptionComponent = ({ innerProps, data, }) => {
-    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+const OptionComponent = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
+    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
 };
 const Container = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
   padding: 8px;
@@ -103,7 +103,15 @@ const OptionWrapper = styled_components_1.default.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};
@@ -113,19 +121,20 @@ const CharactersSetContainer = styled_components_1.default.div `
   flex: 1;
   overflow-y: scroll;
   margin: 18px 0;
-  border: 1px solid #ddd;
+  padding: 8px;
 `;
-const CharactersSet = (0, styled_components_1.default)(style_guide_1.IconButtonGroup) `
+const CharactersSet = (0, style_guide_1.withListNavigation)((0, styled_components_1.default)(style_guide_1.IconButtonGroup) `
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
-  height: ${(props) => props.theme.grid.unit * 8}px;
-`;
-const Character = (0, styled_components_1.default)(style_guide_1.IconButton) `
+  border: 1px solid #ddd;
+`);
+const Character = (0, style_guide_1.withNavigableListItem)((0, styled_components_1.default)(style_guide_1.IconButton) `
   border-bottom: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-radius: unset;
 
-  :hover {
+  :hover,
+  :focus {
     background-color: #f0f0f0 !important;
   }
 
@@ -135,7 +144,12 @@ const Character = (0, styled_components_1.default)(style_guide_1.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;
+  }
+`);
 const openInsertSpecialCharacterDialog = (view) => {
     if (!view) {
         return;

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

@@ -83,6 +83,7 @@ const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryBut
 exports.Open = styled_components_1.default.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};
@@ -92,7 +93,13 @@ exports.Open = styled_components_1.default.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 = (0, style_guide_1.withFocusTrap)(styled_components_1.default.form ``);
 const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
     const [href, setHref] = (0, react_1.useState)(value.href);
     const [text, setText] = (0, react_1.useState)(value.text);
@@ -132,7 +139,7 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
             onSave({ href, text, title });
         }
     }, [href, text, title, onSave, validate]);
-    return (react_1.default.createElement("form", { onSubmit: handleSubmit, noValidate: true },
+    return (react_1.default.createElement(Form, { onSubmit: handleSubmit, noValidate: true },
         react_1.default.createElement(style_guide_1.FormContainer, null,
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },

package/dist/cjs/lib/normalize.js

@@ -17,21 +17,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkID = exports.normalizeAuthor = void 0;
 const transform_1 = require("@manuscripts/transform");
+const trim = (value) => (value ?? '').trim();
 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/cjs/lib/popper.js

@@ -40,11 +40,13 @@ class PopperManager {
                     this.triggerElement.focus();
                 }
             };
+            const isMenu = contents.classList.contains('context-menu') ||
+                contents.classList.contains('menu');
             (0, navigation_utils_1.createKeyboardInteraction)({
                 container,
                 additionalKeys: {
                     Escape: closeAndRestoreFocus,
-                    Tab: closeAndRestoreFocus,
+                    Tab: isMenu ? closeAndRestoreFocus : undefined,
                 },
             });
             if (showArrow) {
@@ -116,7 +118,7 @@ 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/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.12.1';
+exports.VERSION = '3.12.3';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/cross_reference_editable.js

@@ -45,6 +45,7 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
                 currentCustomLabel: this.node.attrs.label,
             };
             this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.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/cjs/views/equation_editable.js

@@ -66,6 +66,12 @@ class EquationEditableView extends equation_1.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/cjs/views/inline_equation_editable.js

@@ -66,6 +66,12 @@ class InlineEquationEditableView extends inline_equation_1.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/cjs/views/inline_footnote.js

@@ -104,6 +104,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
                 onInsert: this.handleInsert,
             };
             this.popperContainer = (0, ReactSubView_1.default)(this.props, FootnotesSelector_1.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 = () => {