@atlaskit/editor-common 78.37.0 → 78.37.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 78.37.2
+
+### Patch Changes
+
+-   [#93090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93090)
+    [`cd31395a7c4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd31395a7c4d) -
+    ECA11Y-204 fix element browser focus order
+
+## 78.37.1
+
+### Patch Changes
+
+-   [#95715](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95715)
+    [`f036f2fd9ccf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f036f2fd9ccf) -
+    [ED-23102] Added global styles that map the custom CSS variables to background color for
+    background color mark
+-   [#96198](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96198)
+    [`b69d14268915`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b69d14268915) -
+    [ux] EDF-629 fixed floating toolbar elements stealing selection from editor
+-   [#96234](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96234)
+    [`d414d3e7503b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d414d3e7503b) -
+    Update copy for Loom toolbar tooltip item and quickinsert description
+-   Updated dependencies
+
 ## 78.37.0
 
 ### Minor Changes

package/dist/cjs/element-browser/components/CategoryList.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../analytics");
 var _constants = require("../constants");
@@ -25,22 +26,56 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var arrowsKeys = new Set(['ArrowUp', 'ArrowDown']);
 function CategoryList(_ref) {
   var _ref$categories = _ref.categories,
     categories = _ref$categories === void 0 ? [] : _ref$categories,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = _react.default.useState(null),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    focusedCategoryIndex = _React$useState2[0],
-    setFocusedCategoryIndex = _React$useState2[1];
+    focusedCategoryIndexState = _React$useState2[0],
+    setFocusedCategoryIndexState = _React$useState2[1];
+  var focusedCategoryIndexProp = props.focusedCategoryIndex,
+    setFocusedCategoryIndexProp = props.setFocusedCategoryIndex,
+    onSelectCategory = props.onSelectCategory;
+  var focusedCategoryIndex = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
+  var setFocusedCategoryIndex = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
   return (0, _react2.jsx)(_react.Fragment, null, categories.map(function (category, index) {
+    var categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
+    var selectNextCategory;
+    var selectPreviousCategory;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') && categoriesLength > 1) {
+      selectNextCategory = function selectNextCategory() {
+        if (index !== categoriesLength - 1) {
+          setFocusedCategoryIndex(index + 1);
+          onSelectCategory(categories[index + 1]);
+        } else {
+          setFocusedCategoryIndex(0);
+          onSelectCategory(categories[0]);
+        }
+        return;
+      };
+      selectPreviousCategory = function selectPreviousCategory() {
+        if (index !== 0) {
+          setFocusedCategoryIndex(index - 1);
+          onSelectCategory(categories[index - 1]);
+        } else {
+          setFocusedCategoryIndex(categoriesLength - 1);
+          onSelectCategory(categories[categoriesLength - 1]);
+        }
+        return;
+      };
+    }
     return (0, _react2.jsx)(CategoryListItem, (0, _extends2.default)({
       key: category.title,
       index: index,
       category: category,
-      focus: focusedCategoryIndex === index,
-      setFocusedCategoryIndex: setFocusedCategoryIndex
-    }, props));
+      focus: focusedCategoryIndex === index
+    }, props, {
+      setFocusedCategoryIndex: setFocusedCategoryIndex,
+      selectPreviousCategory: selectPreviousCategory,
+      selectNextCategory: selectNextCategory
+    }));
   }));
 }
 function CategoryListItem(_ref2) {
@@ -50,10 +85,16 @@ function CategoryListItem(_ref2) {
     index = _ref2.index,
     focus = _ref2.focus,
     setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
-    createAnalyticsEvent = _ref2.createAnalyticsEvent;
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    setFocusOnSearch = _ref2.setFocusOnSearch,
+    selectPreviousCategory = _ref2.selectPreviousCategory,
+    selectNextCategory = _ref2.selectNextCategory;
   var ref = (0, _useFocus.default)(focus);
   var onClick = (0, _react.useCallback)(function () {
-    onSelectCategory(category);
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      onSelectCategory(category);
+    }
     /**
      * When user double clicks on same category, focus on first item.
      */
@@ -62,6 +103,9 @@ function CategoryListItem(_ref2) {
     } else {
       setFocusedCategoryIndex(index);
     }
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      onSelectCategory(category);
+    }
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
       payload: {
         action: _analytics.ACTION.CLICKED,
@@ -92,6 +136,41 @@ function CategoryListItem(_ref2) {
       })
     }, rest);
   }, [category.name, selectedCategory]);
+  var onTabPress = (0, _react.useCallback)(function (e) {
+    var isShiftPressed = e.shiftKey;
+    if (!isShiftPressed) {
+      // set focus from focused category to first item in it
+      if (setFocusedItemIndex) {
+        setFocusedItemIndex(0);
+        e.preventDefault();
+      }
+    } else {
+      // jump from first category back to search
+      if (setFocusOnSearch) {
+        setFocusOnSearch();
+        e.preventDefault();
+      }
+    }
+    return;
+  }, [setFocusedItemIndex, setFocusOnSearch]);
+  var onArrowPress = (0, _react.useCallback)(function (e) {
+    if (e.key === 'ArrowUp' && selectPreviousCategory) {
+      return selectPreviousCategory();
+    }
+    if (e.key === 'ArrowDown' && selectNextCategory) {
+      return selectNextCategory();
+    }
+  }, [selectPreviousCategory, selectNextCategory]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var isTabPressed = e.key === 'Tab';
+    var isArrowPressed = arrowsKeys.has(e.key);
+    if (isTabPressed) {
+      return onTabPress(e);
+    }
+    if (isArrowPressed) {
+      return onArrowPress(e);
+    }
+  }, [onTabPress, onArrowPress]);
   return (0, _react2.jsx)("div", {
     css: buttonWrapper,
     role: "presentation"
@@ -100,13 +179,15 @@ function CategoryListItem(_ref2) {
     isSelected: selectedCategory === category.name,
     onClick: onClick,
     onFocus: onFocus,
+    onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onKeyDown : undefined,
     theme: getTheme,
     role: "tab",
     "aria-selected": selectedCategory === category.name ? 'true' : 'false',
     "aria-controls": "browse-category-".concat(category.name, "-tab"),
     id: "browse-category--".concat(category.name, "-button"),
     ref: ref,
-    testId: "element-browser-category-item"
+    testId: "element-browser-category-item",
+    tabIndex: -1
   }, category.title));
 }
 var buttonWrapper = (0, _react2.css)((0, _defineProperty2.default)({

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -18,6 +18,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -30,7 +31,7 @@ var _types = require("../../types");
 var _cellSizeAndPositionGetter = _interopRequireDefault(require("./cellSizeAndPositionGetter"));
 var _EmptyState = _interopRequireDefault(require("./EmptyState"));
 var _utils = require("./utils");
-var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
+var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"];
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -60,7 +61,10 @@ function ElementList(_ref) {
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     emptyStateHandler = _ref.emptyStateHandler,
     selectedCategory = _ref.selectedCategory,
+    selectedCategoryIndex = _ref.selectedCategoryIndex,
     searchTerm = _ref.searchTerm,
+    setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
+    setFocusedItemIndex = _ref.setFocusedItemIndex,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
@@ -104,16 +108,38 @@ function ElementList(_ref) {
         style: style,
         key: key,
         className: "element-item-wrapper",
-        css: elementItemWrapper
+        css: elementItemWrapper,
+        onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? function (e) {
+          if (e.key === 'Tab') {
+            if (e.shiftKey && index === 0) {
+              if (setFocusedCategoryIndex) {
+                if (!!selectedCategoryIndex) {
+                  setFocusedCategoryIndex(selectedCategoryIndex);
+                } else {
+                  setFocusedCategoryIndex(0);
+                }
+                e.preventDefault();
+              }
+            }
+            // before focus jumps from elements list we need to rerender react-virtualized collection.
+            // Otherwise on the next render 'scrollToCell' will have same cached value
+            // and collection will not be scrolled to top.
+            // So Tab press on category will not work anymore due to invisible 1-t element.
+            else if (index === items.length - 2) {
+              setFocusedItemIndex(items.length - 1);
+            }
+          }
+        } : undefined
       }, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
         inlineMode: !fullMode,
         index: index,
         item: items[index],
         selected: selectedItemIndex === index,
-        focus: focusedItemIndex === index
+        focus: focusedItemIndex === index,
+        setFocusedItemIndex: setFocusedItemIndex
       }, props)));
     };
-  }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
+  }, [items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
     css: elementItemsWrapper,
     "data-testid": "element-items",

package/dist/cjs/element-browser/components/StatelessElementBrowser.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _constants = require("../constants");
 var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
@@ -101,18 +102,43 @@ function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
     onInsertItem = props.onInsertItem,
-    viewMoreItem = props.viewMoreItem;
+    viewMoreItem = props.viewMoreItem,
+    selectedCategory = props.selectedCategory,
+    onSelectCategory = props.onSelectCategory,
+    searchTerm = props.searchTerm,
+    showCategories = props.showCategories;
   var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
     ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
+  var categoryBeenChosen = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     columnCount = _useState2[0],
     setColumnCount = _useState2[1];
-  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem),
+  var selectedCategoryIndex;
+  var isFocusSearch;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+    var _props$categories;
+    selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
+      return category.name === selectedCategory;
+    });
+    if (showCategories) {
+      var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
+      if (!isEmptySearchTerm) {
+        // clear the flag if the search happens after a user has chosen the category
+        categoryBeenChosen.current = false;
+      }
+      // A11Y: if categories exists, on the initial render search element should receive focus.
+      // After user pick some category the category should stay focused.
+      isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
+    }
+  }
+  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch),
     selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
+    setFocusedCategoryIndex = _useSelectAndFocusOnA.setFocusedCategoryIndex,
+    focusedCategoryIndex = _useSelectAndFocusOnA.focusedCategoryIndex,
     focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
     focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
     onKeyDown = _useSelectAndFocusOnA.onKeyDown,
@@ -146,15 +172,29 @@ function StatelessElementBrowser(props) {
    * The actual enter key press is handled on individual items level.
    */
   var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
-  var onItemsEnterKeyPress = (0, _react.useCallback)(function (e) {
-    if (e.key !== 'Enter') {
-      return;
+  var onItemsEnterTabKeyPress = (0, _react.useCallback)(function (e) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
+        return;
+      }
+    } else {
+      if (e.key !== 'Enter') {
+        return;
+      }
+    }
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
+        // A11Y: Set focus on first category if tab pressed on search
+        setFocusedCategoryIndex(selectedCategoryIndex);
+        e.preventDefault();
+        return;
+      }
     }
     if (onInsertItem && selectedItem != null) {
       onInsertItem(selectedItem);
     }
     e.preventDefault();
-  }, [onInsertItem, selectedItem]);
+  }, [onInsertItem, selectedItem, setFocusedCategoryIndex, showCategories, selectedCategoryIndex]);
 
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
@@ -165,6 +205,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
+  var onSelectCategoryCB = (0, _react.useCallback)(function (category) {
+    onSelectCategory(category);
+    categoryBeenChosen.current = true;
+  }, [categoryBeenChosen, onSelectCategory]);
   return (0, _react2.jsx)("div", {
     css: wrapper,
     "data-testid": "element-browser"
@@ -172,10 +216,12 @@ function StatelessElementBrowser(props) {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
     focusOnSearch: focusOnSearch,
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
+    onKeyPress: onItemsEnterTabKeyPress,
     onKeyDown: onKeyDown,
     viewMoreItem: viewMoreItem,
     focusOnViewMore: focusOnViewMore
@@ -186,8 +232,12 @@ function StatelessElementBrowser(props) {
     focusOnSearch: focusOnSearch,
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown
+    onKeyPress: onItemsEnterTabKeyPress,
+    onKeyDown: onKeyDown,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    selectedCategoryIndex: selectedCategoryIndex,
+    onSelectCategory: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onSelectCategoryCB : onSelectCategory
   })));
 }
 function MobileBrowser(_ref) {
@@ -203,6 +253,8 @@ function MobileBrowser(_ref) {
     selectedItemIndex = _ref.selectedItemIndex,
     focusedItemIndex = _ref.focusedItemIndex,
     setFocusedItemIndex = _ref.setFocusedItemIndex,
+    focusedCategoryIndex = _ref.focusedCategoryIndex,
+    setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
     focusOnSearch = _ref.focusOnSearch,
     focusOnViewMore = _ref.focusOnViewMore,
     setColumnCount = _ref.setColumnCount,
@@ -234,7 +286,11 @@ function MobileBrowser(_ref) {
   }, (0, _react2.jsx)(_CategoryList.default, {
     categories: categories,
     onSelectCategory: onSelectCategory,
-    selectedCategory: selectedCategory
+    selectedCategory: selectedCategory,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setFocusOnSearch: setFocusOnSearch
   }))), (0, _react2.jsx)("div", {
     css: mobileMainContent
   }, (0, _react2.jsx)(_ElementList.default, {
@@ -267,6 +323,9 @@ function DesktopBrowser(_ref2) {
     selectedItemIndex = _ref2.selectedItemIndex,
     focusedItemIndex = _ref2.focusedItemIndex,
     setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    focusedCategoryIndex = _ref2.focusedCategoryIndex,
+    setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
+    selectedCategoryIndex = _ref2.selectedCategoryIndex,
     focusOnSearch = _ref2.focusOnSearch,
     setColumnCount = _ref2.setColumnCount,
     setFocusOnSearch = _ref2.setFocusOnSearch,
@@ -296,7 +355,11 @@ function DesktopBrowser(_ref2) {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setFocusOnSearch: setFocusOnSearch
   }))), (0, _react2.jsx)("div", {
     css: mainContent,
     onKeyDown: onKeyDown,
@@ -325,7 +388,9 @@ function DesktopBrowser(_ref2) {
     createAnalyticsEvent: createAnalyticsEvent,
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
-    searchTerm: searchTerm
+    selectedCategoryIndex: selectedCategoryIndex,
+    searchTerm: searchTerm,
+    setFocusedCategoryIndex: showCategories ? setFocusedCategoryIndex : undefined
   })));
 }
 var MemoizedElementBrowser = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -8,6 +8,7 @@ exports.ensureSafeIndex = exports.default = exports.ACTIONS = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -62,6 +63,7 @@ var reducer = function reducer(state, action) {
     case ACTIONS.FOCUS_SEARCH:
       return _objectSpread(_objectSpread({}, state), {}, {
         focusedItemIndex: undefined,
+        focusedCategoryIndex: undefined,
         focusOnSearch: true,
         focusOnViewMore: false
       });
@@ -171,7 +173,7 @@ var getInitialState = function getInitialState(listSize, canFocusViewMore) {
     });
   };
 };
-function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, isFocusSearch) {
   var _useReducer = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     state = _useReducer2[0],
@@ -187,16 +189,26 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
   var selectedItemIndex = state.selectedItemIndex,
     focusedItemIndex = state.focusedItemIndex,
     focusOnSearch = state.focusOnSearch,
-    focusOnViewMore = state.focusOnViewMore;
+    focusOnViewMore = state.focusOnViewMore,
+    focusedCategoryIndex = state.focusedCategoryIndex;
+
+  // calls if items size changed
   var reset = (0, _react.useCallback)(function (listSize) {
     var payload = _objectSpread(_objectSpread({}, initialState), {}, {
       listSize: listSize
     });
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      // A11Y: if categories exist ,on the initial render search element should receive focus.
+      // After user pick some category the category should stay focused.
+      payload = Object.assign(payload, {
+        focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
+      });
+    }
     dispatch({
       type: ACTIONS.UPDATE_STATE,
       payload: payload
     });
-  }, []);
+  }, [isFocusSearch]);
   var removeFocusFromSearchAndSetOnItem = (0, _react.useCallback)(function (index) {
     var payload = {
       focusedItemIndex: index,
@@ -204,6 +216,26 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
       focusOnSearch: false,
       focusOnViewMore: false
     };
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      payload = Object.assign(payload, {
+        focusedCategoryIndex: undefined
+      });
+    }
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, [dispatch]);
+  var setFocusedCategoryIndex = (0, _react.useCallback)(function (index) {
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      return;
+    }
+    var payload = {
+      focusOnSearch: false,
+      focusOnViewMore: false,
+      focusedCategoryIndex: index,
+      focusedItemIndex: undefined
+    };
     dispatch({
       type: ACTIONS.UPDATE_STATE,
       payload: payload
@@ -268,7 +300,9 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
     focusOnViewMore: focusOnViewMore,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
+    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex
   };
 }
 var ensureSafeIndex = exports.ensureSafeIndex = function ensureSafeIndex(index, listSize) {

package/dist/cjs/messages/insert-block.js

@@ -203,12 +203,17 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
   },
   addLoomVideo: {
     id: 'fabric.editor.addLoomVideo',
-    defaultMessage: 'Add Loom Video',
-    description: 'Record a new Loom video'
+    defaultMessage: 'Record a Loom video',
+    description: 'Record a Loom video'
+  },
+  addLoomVideoComment: {
+    id: 'fabric.editor.addLoomVideoComment',
+    defaultMessage: 'Record a Loom video comment',
+    description: 'Record a Loom video comment'
   },
   recordVideoDescription: {
     id: 'fabric.editor.recordVideo.description',
-    defaultMessage: 'Record your screen and camera',
-    description: 'Record your screen and camera'
+    defaultMessage: 'Record and share your screen and thoughts',
+    description: 'Record and share your screen and thoughts'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.37.0";
+var packageVersion = "78.37.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -135,6 +135,12 @@ Object.defineProperty(exports, "annotationSharedStyles", {
     return _annotation.annotationSharedStyles;
   }
 });
+Object.defineProperty(exports, "backgroundColorStyles", {
+  enumerable: true,
+  get: function get() {
+    return _backgroundColor.backgroundColorStyles;
+  }
+});
 Object.defineProperty(exports, "blockMarksSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -424,6 +430,7 @@ Object.defineProperty(exports, "wrapperStyle", {
   }
 });
 var _textColor = require("./shared/text-color");
+var _backgroundColor = require("./shared/background-color");
 var _table = require("./shared/table");
 var _annotation = require("./shared/annotation");
 var _columnLayout = require("./shared/column-layout");

package/dist/cjs/styles/shared/background-color.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.backgroundColorStyles = void 0;
+var _react = require("@emotion/react");
+var backgroundColorStyles = exports.backgroundColorStyles = (0, _react.css)({
+  '.fabric-background-color-mark': {
+    backgroundColor: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-background-color-mark': {
+    backgroundColor: 'unset'
+  }
+});

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

@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.37.0";
+var packageVersion = "78.37.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/FloatingToolbar/Separator.js

@@ -13,7 +13,8 @@ var separator = (0, _react.css)({
   width: '1px',
   height: '20px',
   margin: "0 ".concat("var(--ds-space-050, 4px)"),
-  alignSelf: 'center'
+  alignSelf: 'center',
+  pointerEvents: 'none'
 });
 var _default = exports.default = function _default() {
   return (0, _react.jsx)("div", {