@manuscripts/body-editor 3.12.2 → 3.12.4

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/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.2';
+exports.VERSION = '3.12.4';
 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/footnote.js

@@ -41,15 +41,15 @@ class FootnoteView extends base_node_view_1.BaseNodeView {
             this.dom.tabIndex = 0;
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
-            this.dom.addEventListener('mousedown', this.handleClick);
-            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(this.handleClick));
+            this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false));
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)((e) => this.handleClick(e, true)));
             this.updateContents();
         };
-        this.handleClick = (event) => {
+        this.handleClick = (event, fromKeyboard = false) => {
             const element = event.target;
             const item = element.closest('.footnote');
             if (item) {
-                this.showContextMenu(item);
+                this.showContextMenu(item, fromKeyboard);
             }
         };
         this.handleMarkerClick = (e) => {
@@ -140,7 +140,7 @@ class FootnoteView extends base_node_view_1.BaseNodeView {
         const fn = (0, footnotes_1.getFootnotesElementState)(this.view.state, id);
         return { id, fn };
     }
-    showContextMenu(element) {
+    showContextMenu(element, autoFocus) {
         this.props.popper.destroy();
         const can = this.props.getCapabilities();
         const { id, fn } = this.getFootnoteState();
@@ -162,7 +162,7 @@ class FootnoteView extends base_node_view_1.BaseNodeView {
             });
         }
         this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start');
+        this.props.popper.show(element, this.contextMenu, 'right-start', true, [], autoFocus);
     }
 }
 exports.FootnoteView = FootnoteView;

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 = () => {

package/dist/es/components/affiliations/AffiliationItem.js

@@ -1,7 +1,7 @@
-import { AffiliationIcon, CrclTickAnimation, DeleteIcon, } from '@manuscripts/style-guide';
+import { AffiliationIcon, CrclTickAnimation, DeleteIcon, SecondaryIconButton, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useRef } from 'react';
 import styled from 'styled-components';
-const AffiliationContainer = styled.div `
+const AffiliationContainer = withNavigableListItem(styled.div `
   padding: ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -19,7 +19,7 @@ const AffiliationContainer = styled.div `
   &.active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
-`;
+`);
 const AffiliationName = styled.div `
   margin-left: 12px;
   flex: 1;
@@ -43,15 +43,11 @@ const AffiliationBox = styled.div `
   flex-direction: column;
   margin-left: 4px;
 `;
-const RemoveButton = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
+const RemoveButton = styled(SecondaryIconButton) `
   svg {
-    cursor: pointer;
-  }
-  .icon_element {
-    fill: #6e6e6e;
+    path[fill='white'] {
+      fill: white;
+    }
   }
 `;
 export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSuccessIcon, }) => {
@@ -75,6 +71,6 @@ export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, sh
                     affiliation.country ? ', ' : '')),
                 affiliation.country && React.createElement(React.Fragment, null, affiliation.country))),
         showSuccessIcon && (React.createElement(CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (React.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             React.createElement(DeleteIcon, { fill: '#6E6E6E' })))));
 };

package/dist/es/components/affiliations/AffiliationList.js

@@ -16,18 +16,16 @@
 import React from 'react';
 import styled from 'styled-components';
 import { AffiliationItem } from './AffiliationItem';
-const AffiliationListContainer = styled.div `
+import { withListNavigation } from '@manuscripts/style-guide';
+const AffiliationListContainer = withListNavigation(styled.div `
   flex: 1;
   overflow-y: visible;
-  margin-left: 16px;
-`;
+`);
 const AffiliationListTitle = styled.h2 `
   color: #6e6e6e;
   font-size: 18px;
   font-weight: 400;
   line-height: 24px;
-  margin-left: 14px;
-  margin-top: 20px;
 `;
 export const AffiliationList = ({ affiliation, affiliations, onSelect, onDelete, lastSavedAffiliationId, }) => {
     return (React.createElement(React.Fragment, null,

package/dist/es/components/affiliations/AffiliationsModal.js

@@ -1,4 +1,4 @@
-import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -328,7 +328,9 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                         React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AffiliationTabs, null,
-                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                                !(showConfirmationDialog ||
+                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         React.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
                             React.createElement(InspectorTab, null, "Authors")),
@@ -363,9 +365,15 @@ function createEmptyAffiliation(priority) {
     };
 }
 const StyledSidebarContent = styled(SidebarContent) `
-  padding: 0;
+  padding: 8px;
 `;
-const AddAffiliationButton = styled.div `
+const AddAffiliationButton = styled.button `
+  background: none;
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 12px 8px 12px 12px;
@@ -376,6 +384,7 @@ const AddAffiliationButton = styled.div `
     border-left: 0;
     border-right: 0;
   }
+  ${outlineStyle}
 `;
 const ActionTitle = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
@@ -383,7 +392,7 @@ const ActionTitle = styled.div `
 const AffiliationTabs = styled(InspectorTabs) `
   position: relative;
 `;
-const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
+const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ tabIndex: -1, unmount: false }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
 const StyledModalBody = styled(ModalBody) `

package/dist/es/components/authors/AuthorList.js

@@ -18,10 +18,12 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import styled from 'styled-components';
 import { DraggableAuthor } from './DraggableAuthor';
-const AuthorListContainer = styled.div `
+import { withListNavigation } from '@manuscripts/style-guide';
+const AuthorListContainer = withListNavigation(styled.div `
   flex: 1;
   overflow-y: visible;
-`;
+  padding: 0 6px;
+`);
 const AuthorListTitle = styled.h2 `
   color: #6e6e6e;
   font-size: 18px;