@atlaskit/editor-plugin-toolbar 2.1.4 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.5
+
+### Patch Changes
+
+- [`bb498825fca37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb498825fca37) -
+  [ux] [ED-29266] add ToolbarKeyboardNavigationProvider to selection toolbar with Alt+F10 shortcut
+  to focus
+- Updated dependencies
+
 ## 2.1.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/ui/SelectionToolbar/index.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectionToolbar = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _browserApis = require("@atlaskit/browser-apis");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
@@ -20,6 +23,7 @@ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _consts = require("../consts");
+var _toolbar2 = require("../utils/toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
@@ -76,10 +80,14 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     shouldShowToolbar = _usePluginState.shouldShowToolbar,
     editorViewMode = _usePluginState.editorViewMode,
     selection = _usePluginState.selection;
+  var intl = (0, _reactIntlNext.useIntl)();
   var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
+  var keyboardNavigation = (0, _react.useMemo)(function () {
+    return getKeyboardNavigationConfig(editorView, intl, api);
+  }, [editorView, intl, api]);
   var isOffline = connectivityStateMode === 'offline';
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
@@ -118,7 +126,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     fireAnalyticsEvent: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? function (payload) {
       var _api$analytics;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
-    } : undefined
+    } : undefined,
+    keyboardNavigation: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
   }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -160,4 +169,47 @@ var getDomRefFromSelection = function getDomRefFromSelection(view
     // 	dispatchAnalyticsEvent(payload);
     // }
   }
+};
+var getKeyboardNavigationConfig = function getKeyboardNavigationConfig(editorView, intl, api) {
+  if (!(editorView.dom instanceof HTMLElement)) {
+    return;
+  }
+  var toolbarSelector = "[data-testid='editor-floating-toolbar']";
+  return {
+    childComponentSelector: toolbarSelector,
+    dom: editorView.dom,
+    isShortcutToFocusToolbar: _toolbar2.isShortcutToFocusToolbar,
+    handleFocus: function handleFocus(event) {
+      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+      var toolbar = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+      if (!(toolbar instanceof HTMLElement)) {
+        return;
+      }
+      var filteredFocusableElements = (0, _toolbar2.getFocusableElements)(toolbar);
+      (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
+
+      // the button element removes the focus ring so this class adds it back
+      if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
+        filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+      }
+      (_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    handleEscape: function handleEscape(event) {
+      var isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
+      if (isDropdownOpen) {
+        return;
+      }
+      api === null || api === void 0 || api.core.actions.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    ariaControls: _ui.EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
+  };
 };

package/dist/cjs/ui/toolbar-components.js

@@ -25,7 +25,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       var children = _ref.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.Toolbar, {
         label: _consts.SELECTION_TOOLBAR_LABEL,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
+        testId: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
   }, {
@@ -40,7 +41,11 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
   }, {
     type: _toolbar.TEXT_SECTION.type,
     key: _toolbar.TEXT_SECTION.key,
-    parents: [{
+    parents: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
+    }] : [{
       type: 'toolbar',
       key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
@@ -69,7 +74,35 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         testId: "text-section"
       }, children);
     }
-  }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+  }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+    type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
+      if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+          above: "md"
+        }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
+      return /*#__PURE__*/_react.default.createElement(_Section.Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children);
+    }
+  }] : []), (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
     type: _toolbar.TEXT_SECTION_COLLAPSED.type,
     key: _toolbar.TEXT_SECTION_COLLAPSED.key,
     parents: [{
@@ -81,9 +114,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
         below: "md"
       }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
@@ -118,9 +151,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref5) {
-      var children = _ref5.children,
-        parents = _ref5.parents;
+    component: function component(_ref6) {
+      var children = _ref6.children,
+        parents = _ref6.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -141,9 +174,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children,
-        parents = _ref6.parents;
+    component: function component(_ref7) {
+      var children = _ref7.children,
+        parents = _ref7.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "link-section",
         parents: parents,
@@ -175,8 +208,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.OVERFLOW_GROUP.key,
       rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
     }],
-    component: function component(_ref7) {
-      var children = _ref7.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
     }
   }, {
@@ -197,8 +230,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
         rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref8) {
-        var children = _ref8.children;
+      component: function component(_ref9) {
+        var children = _ref9.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
       }
     }, {
@@ -217,8 +250,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
         rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref9) {
-        var children = _ref9.children;
+      component: function component(_ref0) {
+        var children = _ref0.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
       }
     });

package/dist/cjs/ui/utils/toolbar.js

@@ -3,11 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isEventInContainer = void 0;
+exports.isShortcutToFocusToolbar = exports.isEventInContainer = exports.getFocusableElements = void 0;
 var isEventInContainer = exports.isEventInContainer = function isEventInContainer(event, containerSelector) {
   var target = event.target instanceof Element ? event.target : null;
   if (!target) {
     return false;
   }
   return !!target.closest(containerSelector);
+};
+var isShortcutToFocusToolbar = exports.isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+  return event.altKey && event.key === 'F10';
+};
+var getFocusableElements = exports.getFocusableElements = function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var focusableElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
+  var focusableElementsArray = Array.from(focusableElements);
+
+  // filter out focusable elements from child components such as dropdown menus / popups
+  return focusableElementsArray.filter(function (elm) {
+    var style = window.getComputedStyle(elm);
+
+    // filter out invisible elements
+    return style.visibility !== 'hidden' && style.display !== 'none';
+  });
 };

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

@@ -1,8 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { fullPageMessages } from '@atlaskit/editor-common/messages';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { Popup, EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -13,6 +16,7 @@ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react'
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
+import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
 const isToolbarComponent = component => {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
@@ -70,8 +74,12 @@ export const SelectionToolbar = ({
     // @ts-expect-error
     selection
   } = usePluginState(api);
+  const intl = useIntl();
   const components = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   const toolbar = components === null || components === void 0 ? void 0 : components.find(component => isToolbarComponent(component));
+  const keyboardNavigation = useMemo(() => {
+    return getKeyboardNavigationConfig(editorView, intl, api);
+  }, [editorView, intl, api]);
   const isOffline = connectivityStateMode === 'offline';
   const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   const isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
@@ -110,7 +118,8 @@ export const SelectionToolbar = ({
     fireAnalyticsEvent: expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? payload => {
       var _api$analytics;
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
-    } : undefined
+    } : undefined,
+    keyboardNavigation: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -152,4 +161,47 @@ const getDomRefFromSelection = (view
     // 	dispatchAnalyticsEvent(payload);
     // }
   }
+};
+const getKeyboardNavigationConfig = (editorView, intl, api) => {
+  if (!(editorView.dom instanceof HTMLElement)) {
+    return;
+  }
+  const toolbarSelector = "[data-testid='editor-floating-toolbar']";
+  return {
+    childComponentSelector: toolbarSelector,
+    dom: editorView.dom,
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleFocus: event => {
+      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+      const toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+      if (!(toolbar instanceof HTMLElement)) {
+        return;
+      }
+      const filteredFocusableElements = getFocusableElements(toolbar);
+      (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+
+      // the button element removes the focus ring so this class adds it back
+      if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
+        filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+      }
+      (_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    handleEscape: event => {
+      const isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
+      if (isDropdownOpen) {
+        return;
+      }
+      api === null || api === void 0 ? void 0 : api.core.actions.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    ariaControls: EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
+  };
 };

package/dist/es2019/ui/toolbar-components.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
@@ -18,7 +18,8 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
     }) => {
       return /*#__PURE__*/React.createElement(Toolbar, {
         label: SELECTION_TOOLBAR_LABEL,
-        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR
+        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
+        testId: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
   }, {
@@ -32,7 +33,11 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
   }, {
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
-    parents: [{
+    parents: expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }] : [{
       type: 'toolbar',
       key: TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION.key]
@@ -62,7 +67,36 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
         testId: "text-section"
       }, children);
     }
-  }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+  }, ...(expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }],
+    component: ({
+      children,
+      parents
+    }) => {
+      if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/React.createElement(Show, {
+          above: "md"
+        }, /*#__PURE__*/React.createElement(Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
+      return /*#__PURE__*/React.createElement(Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children);
+    }
+  }] : []), ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
     type: TEXT_SECTION_COLLAPSED.type,
     key: TEXT_SECTION_COLLAPSED.key,
     parents: [{

package/dist/es2019/ui/utils/toolbar.js

@@ -4,4 +4,22 @@ export const isEventInContainer = (event, containerSelector) => {
     return false;
   }
   return !!target.closest(containerSelector);
+};
+export const isShortcutToFocusToolbar = event => {
+  return event.altKey && event.key === 'F10';
+};
+export const getFocusableElements = rootNode => {
+  if (!rootNode) {
+    return [];
+  }
+  const focusableElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
+  const focusableElementsArray = Array.from(focusableElements);
+
+  // filter out focusable elements from child components such as dropdown menus / popups
+  return focusableElementsArray.filter(elm => {
+    const style = window.getComputedStyle(elm);
+
+    // filter out invisible elements
+    return style.visibility !== 'hidden' && style.display !== 'none';
+  });
 };

package/dist/esm/ui/SelectionToolbar/index.js

@@ -1,8 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { fullPageMessages } from '@atlaskit/editor-common/messages';
 import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { Popup, EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -13,6 +16,7 @@ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react'
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
+import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
@@ -68,10 +72,14 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     shouldShowToolbar = _usePluginState.shouldShowToolbar,
     editorViewMode = _usePluginState.editorViewMode,
     selection = _usePluginState.selection;
+  var intl = useIntl();
   var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
+  var keyboardNavigation = useMemo(function () {
+    return getKeyboardNavigationConfig(editorView, intl, api);
+  }, [editorView, intl, api]);
   var isOffline = connectivityStateMode === 'offline';
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
@@ -110,7 +118,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     fireAnalyticsEvent: expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? function (payload) {
       var _api$analytics;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
-    } : undefined
+    } : undefined,
+    keyboardNavigation: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? keyboardNavigation : undefined
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -152,4 +161,47 @@ var getDomRefFromSelection = function getDomRefFromSelection(view
     // 	dispatchAnalyticsEvent(payload);
     // }
   }
+};
+var getKeyboardNavigationConfig = function getKeyboardNavigationConfig(editorView, intl, api) {
+  if (!(editorView.dom instanceof HTMLElement)) {
+    return;
+  }
+  var toolbarSelector = "[data-testid='editor-floating-toolbar']";
+  return {
+    childComponentSelector: toolbarSelector,
+    dom: editorView.dom,
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleFocus: function handleFocus(event) {
+      var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
+      var toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
+      if (!(toolbar instanceof HTMLElement)) {
+        return;
+      }
+      var filteredFocusableElements = getFocusableElements(toolbar);
+      (_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
+
+      // the button element removes the focus ring so this class adds it back
+      if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
+        filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
+      }
+      (_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    handleEscape: function handleEscape(event) {
+      var isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
+      if (isDropdownOpen) {
+        return;
+      }
+      api === null || api === void 0 || api.core.actions.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    ariaControls: EDIT_AREA_ID,
+    ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
+  };
 };

package/dist/esm/ui/toolbar-components.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
@@ -18,7 +18,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       var children = _ref.children;
       return /*#__PURE__*/React.createElement(Toolbar, {
         label: SELECTION_TOOLBAR_LABEL,
-        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR
+        actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
+        testId: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
   }, {
@@ -33,7 +34,11 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
   }, {
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
-    parents: [{
+    parents: expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }] : [{
       type: 'toolbar',
       key: TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION.key]
@@ -62,7 +67,35 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         testId: "text-section"
       }, children);
     }
-  }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+  }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
+      if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/React.createElement(Show, {
+          above: "md"
+        }, /*#__PURE__*/React.createElement(Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
+      return /*#__PURE__*/React.createElement(Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children);
+    }
+  }] : []), _toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
     type: TEXT_SECTION_COLLAPSED.type,
     key: TEXT_SECTION_COLLAPSED.key,
     parents: [{
@@ -74,9 +107,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       return /*#__PURE__*/React.createElement(Show, {
         below: "md"
       }, /*#__PURE__*/React.createElement(Section, {
@@ -111,9 +144,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref5) {
-      var children = _ref5.children,
-        parents = _ref5.parents;
+    component: function component(_ref6) {
+      var children = _ref6.children,
+        parents = _ref6.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -134,9 +167,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[LINKING_SECTION.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children,
-        parents = _ref6.parents;
+    component: function component(_ref7) {
+      var children = _ref7.children,
+        parents = _ref7.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "link-section",
         parents: parents,
@@ -168,8 +201,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: OVERFLOW_GROUP.key,
       rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
     }],
-    component: function component(_ref7) {
-      var children = _ref7.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
   }, {
@@ -190,8 +223,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         key: TOOLBARS.PRIMARY_TOOLBAR,
         rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref8) {
-        var children = _ref8.children;
+      component: function component(_ref9) {
+        var children = _ref9.children;
         return /*#__PURE__*/React.createElement(OverflowSection, null, children);
       }
     }, {
@@ -210,8 +243,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
         rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref9) {
-        var children = _ref9.children;
+      component: function component(_ref0) {
+        var children = _ref0.children;
         return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
       }
     });

package/dist/esm/ui/utils/toolbar.js

@@ -4,4 +4,22 @@ export var isEventInContainer = function isEventInContainer(event, containerSele
     return false;
   }
   return !!target.closest(containerSelector);
+};
+export var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+  return event.altKey && event.key === 'F10';
+};
+export var getFocusableElements = function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var focusableElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
+  var focusableElementsArray = Array.from(focusableElements);
+
+  // filter out focusable elements from child components such as dropdown menus / popups
+  return focusableElementsArray.filter(function (elm) {
+    var style = window.getComputedStyle(elm);
+
+    // filter out invisible elements
+    return style.visibility !== 'hidden' && style.display !== 'none';
+  });
 };

package/dist/types/ui/utils/toolbar.d.ts

@@ -1 +1,3 @@
 export declare const isEventInContainer: (event: Event, containerSelector: string) => boolean;
+export declare const isShortcutToFocusToolbar: (event: KeyboardEvent) => boolean;
+export declare const getFocusableElements: (rootNode: HTMLElement | null) => Array<HTMLElement>;

package/dist/types-ts4.5/ui/utils/toolbar.d.ts

@@ -1 +1,3 @@
 export declare const isEventInContainer: (event: Event, containerSelector: string) => boolean;
+export declare const isShortcutToFocusToolbar: (event: KeyboardEvent) => boolean;
+export declare const getFocusableElements: (rootNode: HTMLElement | null) => Array<HTMLElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "2.1.4",
+	"version": "3.0.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,23 +28,24 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/editor-plugin-analytics": "^5.2.0",
-		"@atlaskit/editor-plugin-connectivity": "^5.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
-		"@atlaskit/editor-plugin-selection": "^5.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^3.0.0",
-		"@atlaskit/editor-plugin-user-preferences": "^3.0.0",
+		"@atlaskit/browser-apis": "^0.0.1",
+		"@atlaskit/editor-plugin-analytics": "^6.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^6.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
+		"@atlaskit/editor-plugin-selection": "^6.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
+		"@atlaskit/editor-plugin-user-preferences": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-toolbar": "^0.9.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^12.24.0",
+		"@atlaskit/tmp-editor-statsig": "^12.31.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.8.0",
+		"@atlaskit/editor-common": "^110.0.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {