@atlaskit/editor-core 176.0.3 → 177.0.0

package/dist/es2019/plugins/type-ahead/messages.js

@@ -1,13 +1,53 @@
 import { defineMessages } from 'react-intl-next';
 export const typeAheadListMessages = defineMessages({
-  typeAheadResultLabel: {
-    id: 'fabric.editor.typeAheadResultLabel',
-    defaultMessage: 'TypeAhead results',
+  typeAheadPopupLabel: {
+    id: 'fabric.editor.typeAhead.popupLabel',
+    defaultMessage: 'Typeahead results',
     description: 'the result of a typeahead, similar to autocomplete results+'
   },
+  quickInsertPopupLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertPopupLabel',
+    defaultMessage: 'Shortcuts for inserts and formatting',
+    description: 'the result of a quick insert typeahead, similar to autocomplete results+'
+  },
+  quickInsertInputLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertInputLabel',
+    defaultMessage: 'Begin typing to search or filter shortcut options',
+    description: 'assisitve text for typeahed input field'
+  },
+  emojiPopupLabel: {
+    id: 'fabric.editor.typeahead.emojiPopupLabel',
+    defaultMessage: 'Emoji shortcuts',
+    description: 'the result of a emoji typeahead, similar to autocomplete results+'
+  },
+  emojiInputLabel: {
+    id: 'fabric.editor.typeahead.emojiInputLabel',
+    defaultMessage: 'Begin typing to search or filter emoji options',
+    description: 'assisitve text for typeahed input field'
+  },
+  mentionPopupLabel: {
+    id: 'fabric.editor.typeahead.mentionPopupLabel',
+    defaultMessage: 'Users you can tag',
+    description: 'the aria label of a mention typeahead popup'
+  },
+  mentionInputLabel: {
+    id: 'fabric.editor.typeahead.mentionInputLabel',
+    defaultMessage: 'Begin typing to search for users to tag',
+    description: 'assisitve text for typeahed input field'
+  },
+  metionListItemLabel: {
+    id: 'fabric.editor.typeahead.metionListItemLabel',
+    defaultMessage: 'User {name} @{shortName}',
+    description: 'assistive text for user mention items username and nickname'
+  },
+  emojiListItemLabel: {
+    id: 'fabric.editor.typeahead.emojiListItemLabel',
+    defaultMessage: 'Emoji {name} Text Shortcut {shortcut}',
+    description: 'assistive text for emoji name and shortcut'
+  },
   inputQueryAssistiveLabel: {
     id: 'fabric.editor.inputQueryAssistiveTxt',
-    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.',
     description: 'Assistive text to the user when using typeahead shortcut'
   },
   searchResultsLabel: {

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -47,7 +47,6 @@ export const factoryDecorations = ({
 
       typeaheadComponent.setAttribute('id', decorationId);
       typeaheadComponent.setAttribute('role', 'search');
-      typeaheadComponent.setAttribute('aria-label', `On ${triggerHandler.id}`);
       typeaheadComponent.dataset.typeAheadQuery = 'true';
       typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
       // we need that cuz the clickAreaHelper

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -40,6 +40,22 @@ const isSelectAllShortcut = event => {
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
 
+const getAriaLabel = (triggerPrefix, intl) => {
+  switch (triggerPrefix) {
+    case '@':
+      return typeAheadListMessages.mentionInputLabel;
+
+    case '/':
+      return typeAheadListMessages.quickInsertInputLabel;
+
+    case ':':
+      return typeAheadListMessages.emojiInputLabel;
+
+    default:
+      return typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+
 export const InputQuery = /*#__PURE__*/React.memo(({
   triggerQueryPrefix,
   cancel,
@@ -426,7 +442,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
+  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -8,7 +8,7 @@ import { List } from 'react-virtualized/dist/commonjs/List';
 import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-import { moveSelectedIndex } from '../utils';
+import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
 import { updateSelectedIndex } from '../commands/update-selected-index';
 import { AssistiveText } from './AssistiveText';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
@@ -34,7 +34,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   onItemClick,
   intl,
   fitHeight,
-  decorationElement
+  decorationElement,
+  triggerHandler
 }) => {
   var _decorationElement$qu2;
 
@@ -208,6 +209,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     style,
     parent
   }) => {
+    const currentItem = items[index];
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
@@ -221,21 +223,24 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       "data-testid": `list-item-height-observed-${index}`
     }, jsx(TypeAheadListItem, {
       key: items[index].title,
-      item: items[index],
+      item: currentItem,
       itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick
+      onItemClick: actions.onItemClick,
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
 
+  const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+
   if (!Array.isArray(items)) {
     return null;
   }
 
   const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return jsx(MenuGroup, {
-    "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
+    "aria-label": popupAriaLabel,
     "aria-relevant": "additions removals"
   }, jsx("div", {
     id: menuGroupId,

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -112,7 +112,8 @@ export const TypeAheadListItem = ({
   itemsLength,
   selectedIndex,
   onItemClick,
-  itemIndex
+  itemIndex,
+  ariaLabel
 }) => {
   /**
    * To select and highlight the first Item when no item is selected
@@ -160,21 +161,23 @@ export const TypeAheadListItem = ({
     const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return jsx("div", {
       "aria-selected": isSelected,
-      "aria-label": title,
       role: "option",
+      "aria-label": ariaLabel,
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
       className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}` //CSS classes added for test cases purpose
       ,
       ref: customItemRef
+    }, jsx("div", {
+      "aria-hidden": true
     }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
       ,
       onHover: noop
-    }));
-  }, [customRenderItem, insertSelectedItem, isSelected, title, customItemRef, itemsLength]);
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
 
   if (customItem) {
     return customItem;
@@ -187,7 +190,7 @@ export const TypeAheadListItem = ({
     iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
-    "aria-label": item.title,
+    "aria-label": title,
     "aria-setsize": itemsLength,
     role: "option",
     ref: buttonItemRef

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -210,7 +210,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     onItemClick: onItemInsert,
     fitHeight: fitHeight,
     editorView: editorView,
-    decorationElement: anchorElement
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/plugins/type-ahead/utils.js

@@ -4,6 +4,7 @@ import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
+import { typeAheadListMessages } from './messages';
 export const findTypeAheadDecorations = state => {
   const {
     selection
@@ -107,4 +108,41 @@ export const moveSelectedIndex = ({
   }
 
   updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+};
+export const getTypeAheadListAriaLabels = (trigger, intl, item) => {
+  var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
+
+  switch (trigger) {
+    case '@':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.mentionPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.metionListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
+          shortName: (item === null || item === void 0 ? void 0 : (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
+        })
+      };
+
+    case '/':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.quickInsertPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : item.title) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
+        })
+      };
+
+    case ':':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.emojiPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
+        })
+      };
+
+    default:
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.typeAheadPopupLabel)
+      };
+  }
 };

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -4,12 +4,13 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
-import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
+import { undo as undoKeymap, redo as redoKeymap, ToolTipContent, tooltip } from '../../../../keymaps';
 import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { undoFromToolbar, redoFromToolbar } from '../../commands';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 const closeTypeAheadAndRunCommand = editorView => command => {
   if (!editorView) {
@@ -69,7 +70,8 @@ export class ToolbarUndoRedo extends PureComponent {
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: handleUndo,
       disabled: !canUndo || disabled,
-      "aria-label": labelUndo,
+      "aria-label": tooltip(undoKeymap, labelUndo),
+      "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
       title: jsx(ToolTipContent, {
         description: labelUndo,
         keymap: undoKeymap
@@ -91,7 +93,8 @@ export class ToolbarUndoRedo extends PureComponent {
         label: ""
       }),
       testId: "ak-editor-toolbar-button-redo",
-      "aria-label": labelRedo
+      "aria-label": tooltip(redoKeymap, labelRedo),
+      "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
     }), jsx("span", {
       css: separatorStyles
     }));

package/dist/es2019/ui/Alignment/AlignmentButton/index.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import ToolbarButton from '../../ToolbarButton';
-import { ToolTipContent } from '../../../keymaps';
+import { ToolTipContent, tooltip } from '../../../keymaps';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 class AlignmentButton extends PureComponent {
   constructor(...args) {
@@ -32,8 +33,9 @@ class AlignmentButton extends PureComponent {
         description: label,
         keymap: shortcut
       }),
-      "aria-label": label,
+      "aria-label": shortcut ? tooltip(shortcut, label) : label,
       "aria-pressed": isSelected,
+      "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
       onClick: this.onClick,
       iconBefore: content
     });

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
 const mainToolbarWrapperStyle = css`
   position: relative;
@@ -33,7 +33,7 @@ const stickyToolbarWrapperStyle = css`
   position: sticky;
   /* stylelint-enable declaration-block-no-duplicate-properties */
   padding-bottom: ${gridSize()}px;
-  z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};
+  z-index: ${akEditorMenuZIndex};
   transition: box-shadow ease-in-out 0.2s;
   &.show-keyline {
     box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -71,7 +71,8 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
 
     return jsx(ToolbarArrowKeyNavigationProvider, {
-      editorView: props.editorView
+      editorView: props.editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
     }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

package/dist/es2019/ui/CollapsedEditor/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
 import EditorWithActions from '../../labs/EditorWithActions';
@@ -40,10 +41,10 @@ export default class CollapsedEditor extends React.Component {
     }
 
     if (!this.props.isExpanded) {
-      return /*#__PURE__*/React.createElement(ChromeCollapsed, {
+      return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
         onFocus: this.props.onFocus,
         text: this.props.placeholder
-      });
+      }));
     }
 
     return /*#__PURE__*/React.cloneElement(child, {

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -88,7 +88,8 @@ const ColorPickerButton = props => {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup"
     }, jsx("div", {
-      css: colorPickerWrapper
+      css: colorPickerWrapper,
+      "data-test-id": "color-picker-menu"
     }, jsx(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -8,9 +8,7 @@ import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import Select from '@atlaskit/select';
 import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
-import { messages } from '../messages'; // eslint-disable-next-line import/no-cycle
-
-import FormContent from '../FormContent';
+import { messages } from '../messages';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
@@ -209,7 +207,8 @@ class FieldsetField extends React.Component {
       extensionManifest,
       onFieldChange,
       firstVisibleFieldName,
-      error
+      error,
+      formComponent: FormComponent
     } = this.props;
     const {
       label,
@@ -223,7 +222,7 @@ class FieldsetField extends React.Component {
     const children = this.renderActions();
     return jsx(Fragment, null, error && jsx(FieldsetError, {
       message: error
-    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
+    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
       fields: selectedFields,
       parentName: name,
       extensionManifest: extensionManifest,

package/dist/es2019/ui/ConfigPanel/FormContent.js

@@ -5,8 +5,7 @@ import Boolean from './Fields/Boolean';
 import CustomSelect from './Fields/CustomSelect';
 import Date from './Fields/Date';
 import DateRange from './Fields/DateRange';
-import Enum from './Fields/Enum'; // eslint-disable-next-line import/no-cycle
-
+import Enum from './Fields/Enum';
 import Fieldset from './Fields/Fieldset';
 import Number from './Fields/Number';
 import String from './Fields/String';
@@ -121,7 +120,8 @@ export function FieldComponent({
         onFieldChange: onFieldChange,
         extensionManifest: extensionManifest,
         parameters: defaultValue || {},
-        error: error
+        error: error,
+        formComponent: FormContent
       });
 
     case 'user':

package/dist/es2019/ui/ContentStyles/index.js

@@ -131,8 +131,13 @@ const contentStyles = props => css`
     text-align: center;
   }
 
-  .pm-table-header-content-wrap,
-  .pm-table-cell-content-wrap div.fabric-editor-block-mark {
+  .pm-table-header-content-wrap :not(.fabric-editor-alignment),
+  .pm-table-header-content-wrap
+    :not(p, .fabric-editor-block-mark)
+    + div.fabric-editor-block-mark,
+  .pm-table-cell-content-wrap
+    :not(p, .fabric-editor-block-mark)
+    + div.fabric-editor-block-mark {
     p:first-of-type {
       margin-top: 0;
     }

package/dist/es2019/ui/LinkSearch/ToolbarComponents.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 export const RECENT_SEARCH_WIDTH_IN_PX = 420;
 export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export const LINKPICKER_HEIGHT_IN_PX = 570;
 export const inputWrapper = css`
   display: flex;
   line-height: 0;

package/dist/es2019/ui/ToolbarArrowKeyNavigationProvider/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -20,33 +20,34 @@ export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
 
 export const ToolbarArrowKeyNavigationProvider = ({
   children,
-  editorView
+  editorView,
+  childComponentSelector,
+  handleEscape,
+  disableArrowKeyNavigation
 }) => {
   const wrapperRef = useRef(null);
-  const currentSelectedItemIndex = useRef(0);
-
-  const incrementIndex = list => {
-    if (currentSelectedItemIndex.current === list.length - 1) {
-      currentSelectedItemIndex.current = 0;
+  const selectedItemIndex = useRef(0);
+  const incrementIndex = useCallback(list => {
+    if (selectedItemIndex.current === list.length - 1) {
+      selectedItemIndex.current = 0;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+      selectedItemIndex.current = selectedItemIndex.current + 1;
     }
-  };
-
-  const decrementIndex = list => {
-    if (currentSelectedItemIndex.current === 0) {
-      currentSelectedItemIndex.current = list.length - 1;
+  }, []);
+  const decrementIndex = useCallback(list => {
+    if (selectedItemIndex.current === 0) {
+      selectedItemIndex.current = list.length - 1;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+      selectedItemIndex.current = selectedItemIndex.current - 1;
     }
-  };
+  }, []);
 
   const handleArrowRight = () => {
     var _filteredFocusableEle;
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
   };
 
   const handleArrowLeft = () => {
@@ -54,14 +55,23 @@ export const ToolbarArrowKeyNavigationProvider = ({
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
   };
 
   const handleTab = () => {
     var _filteredFocusableEle3;
 
     const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+
+  const focusAndScrollToElement = element => {
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+    element.focus();
   };
 
   const submenuKeydownHandleContext = {
@@ -70,7 +80,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
     handleTab
   };
   useLayoutEffect(() => {
-    if (!wrapperRef.current) {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
       return;
     }
 
@@ -83,17 +93,17 @@ export const ToolbarArrowKeyNavigationProvider = ({
      */
 
     const handleKeyDown = event => {
-      var _document$querySelect, _wrapperRef$current, _filteredFocusableEle4;
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
 
-      //To trap the focus inside the horizontal main toolbar for left and right arrow keys
-      const targetElement = event.target; //To filter out the events outside the main toolbar
+      //To trap the focus inside the horizontal toolbar for left and right arrow keys
+      const targetElement = event.target; //To filter out the events outside the child component
 
-      if (!targetElement.closest("[data-testid='ak-editor-main-toolbar']")) {
+      if (!targetElement.closest(`${childComponentSelector}`)) {
         return;
       } //The key events are from child components such as dropdown menus / popups are ignored
 
 
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
         return;
       }
 
@@ -106,25 +116,37 @@ export const ToolbarArrowKeyNavigationProvider = ({
 
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        selectedItemIndex.current = -1;
       } else {
-        currentSelectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : currentSelectedItemIndex.current;
+        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
       }
 
-      if (event.key === 'ArrowRight') {
-        incrementIndex(filteredFocusableElements);
-      } else if (event.key === 'ArrowLeft') {
-        decrementIndex(filteredFocusableElements);
-      }
+      switch (event.key) {
+        case 'ArrowRight':
+          incrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
+
+        case 'ArrowLeft':
+          decrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
 
-      (_filteredFocusableEle4 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        case 'Escape':
+          handleEscape(event);
+          break;
+
+        default:
+      }
     };
 
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return () => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, editorView]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef
@@ -144,5 +166,5 @@ function getFocusableElements(rootNode) {
 
 function getFilteredFocusableElements(rootNode) {
   //The focusable elements from child components such as dropdown menus / popups are ignored
-  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]'));
+  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons'));
 }