@atlaskit/editor-common 106.7.0 → 106.9.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-common
 
+## 106.9.0
+
+### Minor Changes
+
+- [#170137](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170137)
+  [`dbb4a990de7c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbb4a990de7c9) -
+  [ux] Addressed accessibility issue where the link "Explore Atlassian Marketplace" in Create Issue
+  modal for Description > Insert elements was not accessible in case of empty search results. No
+  change to existing functionality.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 106.8.0
+
+### Minor Changes
+
+- [#171561](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171561)
+  [`d0c41c462c511`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0c41c462c511) -
+  [ux] Telepointers now stay expanded even if there are other transactions received which will
+  re-create their DOM elements.
+
+### Patch Changes
+
+- [#171565](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171565)
+  [`a0cb383a8d353`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0cb383a8d353) -
+  Clean up feature flags
+- Updated dependencies
+
 ## 106.7.0
 
 ### Minor Changes

package/dist/cjs/collab/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tintDirtyTransaction = exports.telepointerStyleWithInitialOnly = exports.telepointerStyle = exports.isDirtyTransaction = exports.TELEPOINTER_PULSE_CLASS = exports.TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DATA_SESSION_ID_ATTR = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
+exports.tintDirtyTransaction = exports.telepointerStyleWithInitialOnly = exports.telepointerStyle = exports.isDirtyTransaction = exports.TELEPOINTER_PULSE_DURING_TR_DURATION_MS = exports.TELEPOINTER_PULSE_DURING_TR_CLASS = exports.TELEPOINTER_PULSE_CLASS = exports.TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DATA_SESSION_ID_ATTR = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -134,6 +134,8 @@ var telepointerColorStyle = function telepointerColorStyle(backgroundColor, text
 };
 var TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 var TELEPOINTER_PULSE_CLASS = exports.TELEPOINTER_PULSE_CLASS = 'telepointer-pulse-animate';
+var TELEPOINTER_PULSE_DURING_TR_CLASS = exports.TELEPOINTER_PULSE_DURING_TR_CLASS = 'telepointer-pulse-during-tr';
+var TELEPOINTER_PULSE_DURING_TR_DURATION_MS = exports.TELEPOINTER_PULSE_DURING_TR_DURATION_MS = 7500; // Keeping it longer so it'll be easier to spot during transactions
 var TELEPOINTER_DATA_SESSION_ID_ATTR = exports.TELEPOINTER_DATA_SESSION_ID_ATTR = 'data-telepointer-sessionid';
 
 // ED-22557: Safely convert to object styling
@@ -146,7 +148,7 @@ var telepointerStyleWithInitialOnly = exports.telepointerStyleWithInitialOnly =
 // ED-22557: Safely convert to object styling
 // Disable top: -14px since it is necessary to align to cursor
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t@keyframes pulseIn {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t\t10% {\n\t\t\ttransform: scaleX(1.4);\n\t\t\topacity: 1;\n\t\t}\n\t\t15%,\n\t\t85% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes pulseOut {\n\t\t0%,\n\t\t90%,\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t10%,\n\t\t80% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t.ProseMirror .telepointer {\n\t\tposition: relative;\n\t\ttransition: opacity 200ms;\n\n\t\t&.telepointer-selection:not(.inlineNodeView) {\n\t\t\tline-height: 1.2;\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t&.telepointer-selection-badge {\n\t\t\t.telepointer-initial,\n\t\t\t.telepointer-fullname {\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\tuser-select: none;\n\t\t\t\twhite-space: pre;\n\t\t\t\ttop: -14px;\n\t\t\t\tleft: 0px;\n\t\t\t\tfont: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\t}\n\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 1;\n\t\t\t\ttransition: opacity 0.15s ease-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: scaleX(0);\n\t\t\t\ttransform-origin: top left;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 0.15s ease-out,\n\t\t\t\t\topacity 0.15s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOut 2.5s ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseIn 2.5s ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition-delay: 150ms;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\ttransform: scaleX(1);\n\t\t\t\topacity: 1;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\topacity: 0.2;\n\t\t}\n\n\t\t", ";\n\t}\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_PULSE_CLASS, TELEPOINTER_DIM_CLASS, _editorSharedStyles.participantColors.map(function (participantColor, index) {
+var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t@keyframes pulseIn {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t\t10% {\n\t\t\ttransform: scaleX(1.4);\n\t\t\topacity: 1;\n\t\t}\n\t\t15%,\n\t\t85% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes pulseOut {\n\t\t0%,\n\t\t90%,\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t10%,\n\t\t80% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@keyframes pulseInDuringTr {\n\t\t0%,\n\t\t95% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@keyframes pulseOutDuringTr {\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t0%,\n\t\t90% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t.ProseMirror .telepointer {\n\t\tposition: relative;\n\t\ttransition: opacity 200ms;\n\n\t\t&.telepointer-selection:not(.inlineNodeView) {\n\t\t\tline-height: 1.2;\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t&.telepointer-selection-badge {\n\t\t\t.telepointer-initial,\n\t\t\t.telepointer-fullname {\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\tuser-select: none;\n\t\t\t\twhite-space: pre;\n\t\t\t\ttop: -14px;\n\t\t\t\tleft: 0px;\n\t\t\t\tfont: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\t}\n\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 1;\n\t\t\t\ttransition: opacity 0.15s ease-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: scaleX(0);\n\t\t\t\ttransform-origin: top left;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 0.15s ease-out,\n\t\t\t\t\topacity 0.15s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOut 2.5s ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseIn 2.5s ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOutDuringTr ", "ms ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseInDuringTr ", "ms ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition-delay: 150ms;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\ttransform: scaleX(1);\n\t\t\t\topacity: 1;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\topacity: 0.2;\n\t\t}\n\n\t\t", ";\n\t}\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_PULSE_CLASS, TELEPOINTER_PULSE_DURING_TR_CLASS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS, TELEPOINTER_DIM_CLASS, _editorSharedStyles.participantColors.map(function (participantColor, index) {
   return telepointerColorStyle(participantColor.backgroundColor, participantColor.textColor, index);
 }));
 var tintKey = 'collab:isDirtyTransaction';

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

@@ -63,6 +63,7 @@ function ElementList(_ref) {
     mode = _ref.mode,
     selectedItemIndex = _ref.selectedItemIndex,
     focusedItemIndex = _ref.focusedItemIndex,
+    focusOnEmptyStateButton = _ref.focusOnEmptyStateButton,
     columnCount = _ref.columnCount,
     setColumnCount = _ref.setColumnCount,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
@@ -133,7 +134,8 @@ function ElementList(_ref) {
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
   }) : (0, _react2.jsx)(_EmptyState.default, {
-    onExternalLinkClick: onExternalLinkClick
+    onExternalLinkClick: onExternalLinkClick,
+    focusOnEmptyStateButton: focusOnEmptyStateButton
   }) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
     disableWidth: true
   }, function (_ref3) {

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = EmptyState;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _primitives = require("@atlaskit/primitives");
@@ -14,49 +15,58 @@ var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustrati
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 function EmptyState(_ref) {
-  var onExternalLinkClick = _ref.onExternalLinkClick;
-  return (0, _react.jsx)("div", {
+  var onExternalLinkClick = _ref.onExternalLinkClick,
+    focusOnEmptyStateButton = _ref.focusOnEmptyStateButton;
+  var buttonRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (focusOnEmptyStateButton && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [focusOnEmptyStateButton]);
+  return (0, _react2.jsx)("div", {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
-  }, (0, _react.jsx)(_NotFoundIllustration.default, null), (0, _react.jsx)("div", {
+  }, (0, _react2.jsx)(_NotFoundIllustration.default, null), (0, _react2.jsx)("div", {
     css: emptyStateHeading
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
     description: "Empty state heading"
-  })), (0, _react.jsx)("div", {
+  })), (0, _react2.jsx)("div", {
     css: emptyStateSubHeading
-  }, (0, _react.jsx)(_primitives.Text, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+  }, (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), (0, _react.jsx)(_primitives.Box, {
+  })), (0, _react2.jsx)(_primitives.Box, {
     xcss: externalLinkWrapper
-  }, (0, _react.jsx)(_new.LinkButton, {
+  }, (0, _react2.jsx)(_new.LinkButton, {
     appearance: "primary",
     target: "_blank",
+    ref: buttonRef,
     href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
     onClick: onExternalLinkClick
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
     defaultMessage: "Explore Atlassian Marketplace",
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeading = (0, _react.css)({
+var emptyStateHeading = (0, _react2.css)({
   font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });
-var emptyStateSubHeading = (0, _react.css)({
+var emptyStateSubHeading = (0, _react2.css)({
   marginTop: "var(--ds-space-200, 16px)",
   maxWidth: '400px',
   textAlign: 'center'
 });
-var emptyStateWrapper = (0, _react.css)({
+var emptyStateWrapper = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',

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

@@ -167,6 +167,7 @@ function StatelessElementBrowser(props) {
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
     setFocusedCategoryIndex = _useSelectAndFocusOnA.setFocusedCategoryIndex,
+    focusOnEmptyStateButton = _useSelectAndFocusOnA.focusOnEmptyStateButton,
     focusedCategoryIndex = _useSelectAndFocusOnA.focusedCategoryIndex,
     focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
     focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
@@ -240,6 +241,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusedCategoryIndex: focusedCategoryIndex,
@@ -259,6 +261,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusOnSearch: focusOnSearch,
@@ -301,7 +304,9 @@ function MobileBrowser(_ref) {
     emptyStateHandler = _ref.emptyStateHandler,
     viewMoreItem = _ref.viewMoreItem,
     onViewMore = _ref.onViewMore,
-    cache = _ref.cache;
+    cache = _ref.cache,
+    _ref$focusOnEmptyStat = _ref.focusOnEmptyStateButton,
+    focusOnEmptyStateButton = _ref$focusOnEmptyStat === void 0 ? false : _ref$focusOnEmptyStat;
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _react2.jsx)("div", {
@@ -338,6 +343,7 @@ function MobileBrowser(_ref) {
       onInsertItem: onInsertItem,
       selectedItemIndex: selectedItemIndex,
       focusedItemIndex: focusedItemIndex,
+      focusOnEmptyStateButton: focusOnEmptyStateButton,
       setFocusedItemIndex: setFocusedItemIndex,
       columnCount: columnCount,
       setColumnCount: setColumnCount,
@@ -380,7 +386,9 @@ function DesktopBrowser(_ref2) {
     searchTerm = _ref2.searchTerm,
     createAnalyticsEvent = _ref2.createAnalyticsEvent,
     emptyStateHandler = _ref2.emptyStateHandler,
-    cache = _ref2.cache;
+    cache = _ref2.cache,
+    _ref2$focusOnEmptySta = _ref2.focusOnEmptyStateButton,
+    focusOnEmptyStateButton = _ref2$focusOnEmptySta === void 0 ? false : _ref2$focusOnEmptySta;
   return (0, _react2.jsx)("div", {
     css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
@@ -431,6 +439,7 @@ function DesktopBrowser(_ref2) {
     onInsertItem: onInsertItem,
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     setFocusedItemIndex: setFocusedItemIndex,
     columnCount: columnCount,
     setColumnCount: setColumnCount,

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; }
 /**
@@ -161,6 +162,30 @@ var moveReducer = function moveReducer(state, action) {
       selectedItemIndex: _selectedItemIndex
     });
   }
+  if ((0, _platformFeatureFlags.fg)('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+    // Handle empty state navigation
+    if (state.listSize === -1) {
+      // If currently on search, ArrowDown and ArrowUp moves to EmptyState button
+      if (state.focusOnSearch && action.payload.positions && action.payload.positions > 0) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: false,
+          focusOnEmptyStateButton: true
+        });
+      }
+      // If currently on EmptyState button, ArrowUp and ArrowDown moves back to search
+      if (state.focusOnEmptyStateButton && action.payload.positions && action.payload.positions < 0) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: true,
+          focusOnEmptyStateButton: false
+        });
+      }
+      // Stay on EmptyState button for other arrows
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnEmptyStateButton: true
+      });
+    }
+  }
   return _objectSpread(_objectSpread({}, state), {}, {
     focusOnSearch: false,
     focusOnViewMore: false,
@@ -171,6 +196,7 @@ var moveReducer = function moveReducer(state, action) {
 var initialState = {
   focusOnSearch: true,
   focusOnViewMore: false,
+  focusOnEmptyStateButton: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
@@ -233,7 +259,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     focusedItemIndex = state.focusedItemIndex,
     focusOnSearch = state.focusOnSearch,
     focusOnViewMore = state.focusOnViewMore,
-    focusedCategoryIndex = state.focusedCategoryIndex;
+    focusedCategoryIndex = state.focusedCategoryIndex,
+    focusOnEmptyStateButton = state.focusOnEmptyStateButton;
 
   // calls if items size changed
   var reset = (0, _react.useCallback)(function (listSize) {
@@ -310,6 +337,23 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
+    if ((0, _platformFeatureFlags.fg)('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+      // Handle empty state navigation
+      if (listSize === -1) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          dispatch({
+            type: ACTIONS.UPDATE_STATE,
+            payload: {
+              focusOnSearch: focusOnEmptyStateButton,
+              // cycle focus between search and button
+              focusOnEmptyStateButton: !focusOnEmptyStateButton // toggle
+            }
+          });
+          return;
+        }
+      }
+    }
     switch (e.key) {
       case '/':
         e.preventDefault();
@@ -342,7 +386,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
           return move(e, Math.min(-_nextItem3, -step), step);
         }
     }
-  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step]);
+  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step, focusOnEmptyStateButton]);
   (0, _react.useEffect)(function () {
     // To reset selection when user filters
     reset(listSize);
@@ -352,6 +396,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     onKeyDown: onKeyDown,
     focusOnSearch: focusOnSearch,
     focusOnViewMore: focusOnViewMore,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 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 = "106.7.0";
+var packageVersion = "106.9.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "106.7.0";
+var packageVersion = "106.9.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/collab/index.js

@@ -159,6 +159,8 @@ const telepointerColorStyle = (backgroundColor, textColor, index) => {
 };
 export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 export const TELEPOINTER_PULSE_CLASS = 'telepointer-pulse-animate';
+export const TELEPOINTER_PULSE_DURING_TR_CLASS = 'telepointer-pulse-during-tr';
+export const TELEPOINTER_PULSE_DURING_TR_DURATION_MS = 7500; // Keeping it longer so it'll be easier to spot during transactions
 export const TELEPOINTER_DATA_SESSION_ID_ATTR = 'data-telepointer-sessionid';
 
 // ED-22557: Safely convert to object styling
@@ -231,6 +233,30 @@ export const telepointerStyle = css`
 		}
 	}
 
+	@keyframes pulseInDuringTr {
+		0%,
+		95% {
+			transform: scaleX(1);
+			opacity: 1;
+		}
+		100% {
+			transform: scaleX(0);
+			opacity: 0;
+		}
+	}
+
+	@keyframes pulseOutDuringTr {
+		100% {
+			transform: scaleX(1);
+			opacity: 1;
+		}
+		0%,
+		90% {
+			transform: scaleX(0);
+			opacity: 0;
+		}
+	}
+
 	.ProseMirror .telepointer {
 		position: relative;
 		transition: opacity 200ms;
@@ -282,6 +308,16 @@ export const telepointerStyle = css`
 			}
 		}
 
+		&.${TELEPOINTER_PULSE_DURING_TR_CLASS} {
+			.telepointer-initial {
+				animation: pulseOutDuringTr ${TELEPOINTER_PULSE_DURING_TR_DURATION_MS}ms ease-in-out;
+			}
+
+			.telepointer-fullname {
+				animation: pulseInDuringTr ${TELEPOINTER_PULSE_DURING_TR_DURATION_MS}ms ease-in-out;
+			}
+		}
+
 		&:hover {
 			.telepointer-initial {
 				opacity: 0;

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

@@ -51,6 +51,7 @@ function ElementList({
   mode,
   selectedItemIndex,
   focusedItemIndex,
+  focusOnEmptyStateButton,
   columnCount,
   setColumnCount,
   createAnalyticsEvent,
@@ -121,7 +122,8 @@ function ElementList({
     selectedCategory,
     searchTerm
   }) : jsx(EmptyState, {
-    onExternalLinkClick: onExternalLinkClick
+    onExternalLinkClick: onExternalLinkClick,
+    focusOnEmptyStateButton: focusOnEmptyStateButton
   }) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, ({

package/dist/es2019/element-browser/components/ElementList/EmptyState.js

@@ -2,6 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useEffect, useRef } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
@@ -9,8 +11,15 @@ import { LinkButton } from '@atlaskit/button/new';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
-  onExternalLinkClick
+  onExternalLinkClick,
+  focusOnEmptyStateButton
 }) {
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    if (focusOnEmptyStateButton && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [focusOnEmptyStateButton]);
   return jsx("div", {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
@@ -31,6 +40,7 @@ export default function EmptyState({
   }, jsx(LinkButton, {
     appearance: "primary",
     target: "_blank",
+    ref: buttonRef,
     href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
     onClick: onExternalLinkClick
   }, jsx(FormattedMessage, {

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

@@ -156,6 +156,7 @@ function StatelessElementBrowser(props) {
     focusedItemIndex,
     setFocusedItemIndex,
     setFocusedCategoryIndex,
+    focusOnEmptyStateButton,
     focusedCategoryIndex,
     focusOnSearch,
     focusOnViewMore,
@@ -230,6 +231,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusedCategoryIndex: focusedCategoryIndex,
@@ -249,6 +251,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusOnSearch: focusOnSearch,
@@ -291,7 +294,8 @@ function MobileBrowser({
   emptyStateHandler,
   viewMoreItem,
   onViewMore,
-  cache
+  cache,
+  focusOnEmptyStateButton = false
 }) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -329,6 +333,7 @@ function MobileBrowser({
       onInsertItem: onInsertItem,
       selectedItemIndex: selectedItemIndex,
       focusedItemIndex: focusedItemIndex,
+      focusOnEmptyStateButton: focusOnEmptyStateButton,
       setFocusedItemIndex: setFocusedItemIndex,
       columnCount: columnCount,
       setColumnCount: setColumnCount,
@@ -371,7 +376,8 @@ function DesktopBrowser({
   searchTerm,
   createAnalyticsEvent,
   emptyStateHandler,
-  cache
+  cache,
+  focusOnEmptyStateButton = false
 }) {
   return jsx("div", {
     css: elementBrowserContainer,
@@ -423,6 +429,7 @@ function DesktopBrowser({
     onInsertItem: onInsertItem,
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     setFocusedItemIndex: setFocusedItemIndex,
     columnCount: columnCount,
     setColumnCount: setColumnCount,

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

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -164,6 +165,33 @@ const moveReducer = (state, action) => {
       selectedItemIndex
     };
   }
+  if (fg('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+    // Handle empty state navigation
+    if (state.listSize === -1) {
+      // If currently on search, ArrowDown and ArrowUp moves to EmptyState button
+      if (state.focusOnSearch && action.payload.positions && action.payload.positions > 0) {
+        return {
+          ...state,
+          focusOnSearch: false,
+          focusOnEmptyStateButton: true
+        };
+      }
+      // If currently on EmptyState button, ArrowUp and ArrowDown moves back to search
+      if (state.focusOnEmptyStateButton && action.payload.positions && action.payload.positions < 0) {
+        return {
+          ...state,
+          focusOnSearch: true,
+          focusOnEmptyStateButton: false
+        };
+      }
+      // Stay on EmptyState button for other arrows
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnEmptyStateButton: true
+      };
+    }
+  }
   return {
     ...state,
     focusOnSearch: false,
@@ -175,6 +203,7 @@ const moveReducer = (state, action) => {
 const initialState = {
   focusOnSearch: true,
   focusOnViewMore: false,
+  focusOnEmptyStateButton: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
@@ -232,7 +261,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     focusedItemIndex,
     focusOnSearch,
     focusOnViewMore,
-    focusedCategoryIndex
+    focusedCategoryIndex,
+    focusOnEmptyStateButton
   } = state;
 
   // calls if items size changed
@@ -311,6 +341,23 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
+    if (fg('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+      // Handle empty state navigation
+      if (listSize === -1) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          dispatch({
+            type: ACTIONS.UPDATE_STATE,
+            payload: {
+              focusOnSearch: focusOnEmptyStateButton,
+              // cycle focus between search and button
+              focusOnEmptyStateButton: !focusOnEmptyStateButton // toggle
+            }
+          });
+          return;
+        }
+      }
+    }
     switch (e.key) {
       case '/':
         e.preventDefault();
@@ -343,7 +390,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
           return move(e, Math.min(-nextItem, -step), step);
         }
     }
-  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step]);
+  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step, focusOnEmptyStateButton]);
   useEffect(() => {
     // To reset selection when user filters
     reset(listSize);
@@ -353,6 +400,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     onKeyDown,
     focusOnSearch,
     focusOnViewMore,
+    focusOnEmptyStateButton,
     setFocusOnSearch,
     focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "106.7.0";
+const packageVersion = "106.9.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "106.7.0";
+const packageVersion = "106.9.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/collab/index.js

@@ -151,6 +151,8 @@ var telepointerColorStyle = function telepointerColorStyle(backgroundColor, text
 };
 export var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 export var TELEPOINTER_PULSE_CLASS = 'telepointer-pulse-animate';
+export var TELEPOINTER_PULSE_DURING_TR_CLASS = 'telepointer-pulse-during-tr';
+export var TELEPOINTER_PULSE_DURING_TR_DURATION_MS = 7500; // Keeping it longer so it'll be easier to spot during transactions
 export var TELEPOINTER_DATA_SESSION_ID_ATTR = 'data-telepointer-sessionid';
 
 // ED-22557: Safely convert to object styling
@@ -163,7 +165,7 @@ export var telepointerStyleWithInitialOnly = css(_templateObject || (_templateOb
 // ED-22557: Safely convert to object styling
 // Disable top: -14px since it is necessary to align to cursor
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var telepointerStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t@keyframes pulseIn {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t\t10% {\n\t\t\ttransform: scaleX(1.4);\n\t\t\topacity: 1;\n\t\t}\n\t\t15%,\n\t\t85% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes pulseOut {\n\t\t0%,\n\t\t90%,\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t10%,\n\t\t80% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t.ProseMirror .telepointer {\n\t\tposition: relative;\n\t\ttransition: opacity 200ms;\n\n\t\t&.telepointer-selection:not(.inlineNodeView) {\n\t\t\tline-height: 1.2;\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t&.telepointer-selection-badge {\n\t\t\t.telepointer-initial,\n\t\t\t.telepointer-fullname {\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\tuser-select: none;\n\t\t\t\twhite-space: pre;\n\t\t\t\ttop: -14px;\n\t\t\t\tleft: 0px;\n\t\t\t\tfont: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\t}\n\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 1;\n\t\t\t\ttransition: opacity 0.15s ease-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: scaleX(0);\n\t\t\t\ttransform-origin: top left;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 0.15s ease-out,\n\t\t\t\t\topacity 0.15s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOut 2.5s ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseIn 2.5s ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition-delay: 150ms;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\ttransform: scaleX(1);\n\t\t\t\topacity: 1;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\topacity: 0.2;\n\t\t}\n\n\t\t", ";\n\t}\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_PULSE_CLASS, TELEPOINTER_DIM_CLASS, participantColors.map(function (participantColor, index) {
+export var telepointerStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t@keyframes pulseIn {\n\t\t0%,\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t\t10% {\n\t\t\ttransform: scaleX(1.4);\n\t\t\topacity: 1;\n\t\t}\n\t\t15%,\n\t\t85% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes pulseOut {\n\t\t0%,\n\t\t90%,\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t10%,\n\t\t80% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@keyframes pulseInDuringTr {\n\t\t0%,\n\t\t95% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@keyframes pulseOutDuringTr {\n\t\t100% {\n\t\t\ttransform: scaleX(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t0%,\n\t\t90% {\n\t\t\ttransform: scaleX(0);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t.ProseMirror .telepointer {\n\t\tposition: relative;\n\t\ttransition: opacity 200ms;\n\n\t\t&.telepointer-selection:not(.inlineNodeView) {\n\t\t\tline-height: 1.2;\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t&.telepointer-selection-badge {\n\t\t\t.telepointer-initial,\n\t\t\t.telepointer-fullname {\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\tuser-select: none;\n\t\t\t\twhite-space: pre;\n\t\t\t\ttop: -14px;\n\t\t\t\tleft: 0px;\n\t\t\t\tfont: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 0 2px 2px 0;\n\t\t\t}\n\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 1;\n\t\t\t\ttransition: opacity 0.15s ease-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: scaleX(0);\n\t\t\t\ttransform-origin: top left;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 0.15s ease-out,\n\t\t\t\t\topacity 0.15s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOut 2.5s ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseIn 2.5s ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.telepointer-initial {\n\t\t\t\tanimation: pulseOutDuringTr ", "ms ease-in-out;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\tanimation: pulseInDuringTr ", "ms ease-in-out;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.telepointer-initial {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition-delay: 150ms;\n\t\t\t}\n\n\t\t\t.telepointer-fullname {\n\t\t\t\ttransform: scaleX(1);\n\t\t\t\topacity: 1;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\topacity: 0.2;\n\t\t}\n\n\t\t", ";\n\t}\n"])), "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_PULSE_CLASS, TELEPOINTER_PULSE_DURING_TR_CLASS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS, TELEPOINTER_DIM_CLASS, participantColors.map(function (participantColor, index) {
   return telepointerColorStyle(participantColor.backgroundColor, participantColor.textColor, index);
 }));
 var tintKey = 'collab:isDirtyTransaction';

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

@@ -52,6 +52,7 @@ function ElementList(_ref) {
     mode = _ref.mode,
     selectedItemIndex = _ref.selectedItemIndex,
     focusedItemIndex = _ref.focusedItemIndex,
+    focusOnEmptyStateButton = _ref.focusOnEmptyStateButton,
     columnCount = _ref.columnCount,
     setColumnCount = _ref.setColumnCount,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
@@ -122,7 +123,8 @@ function ElementList(_ref) {
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
   }) : jsx(EmptyState, {
-    onExternalLinkClick: onExternalLinkClick
+    onExternalLinkClick: onExternalLinkClick,
+    focusOnEmptyStateButton: focusOnEmptyStateButton
   }) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, function (_ref3) {

package/dist/esm/element-browser/components/ElementList/EmptyState.js

@@ -2,6 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useEffect, useRef } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
@@ -9,7 +11,14 @@ import { LinkButton } from '@atlaskit/button/new';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState(_ref) {
-  var onExternalLinkClick = _ref.onExternalLinkClick;
+  var onExternalLinkClick = _ref.onExternalLinkClick,
+    focusOnEmptyStateButton = _ref.focusOnEmptyStateButton;
+  var buttonRef = useRef(null);
+  useEffect(function () {
+    if (focusOnEmptyStateButton && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [focusOnEmptyStateButton]);
   return jsx("div", {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
@@ -30,6 +39,7 @@ export default function EmptyState(_ref) {
   }, jsx(LinkButton, {
     appearance: "primary",
     target: "_blank",
+    ref: buttonRef,
     href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
     onClick: onExternalLinkClick
   }, jsx(FormattedMessage, {

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

@@ -157,6 +157,7 @@ function StatelessElementBrowser(props) {
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
     setFocusedCategoryIndex = _useSelectAndFocusOnA.setFocusedCategoryIndex,
+    focusOnEmptyStateButton = _useSelectAndFocusOnA.focusOnEmptyStateButton,
     focusedCategoryIndex = _useSelectAndFocusOnA.focusedCategoryIndex,
     focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
     focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
@@ -230,6 +231,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusedCategoryIndex: focusedCategoryIndex,
@@ -249,6 +251,7 @@ function StatelessElementBrowser(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
     focusOnSearch: focusOnSearch,
@@ -291,7 +294,9 @@ function MobileBrowser(_ref) {
     emptyStateHandler = _ref.emptyStateHandler,
     viewMoreItem = _ref.viewMoreItem,
     onViewMore = _ref.onViewMore,
-    cache = _ref.cache;
+    cache = _ref.cache,
+    _ref$focusOnEmptyStat = _ref.focusOnEmptyStateButton,
+    focusOnEmptyStateButton = _ref$focusOnEmptyStat === void 0 ? false : _ref$focusOnEmptyStat;
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsx("div", {
@@ -328,6 +333,7 @@ function MobileBrowser(_ref) {
       onInsertItem: onInsertItem,
       selectedItemIndex: selectedItemIndex,
       focusedItemIndex: focusedItemIndex,
+      focusOnEmptyStateButton: focusOnEmptyStateButton,
       setFocusedItemIndex: setFocusedItemIndex,
       columnCount: columnCount,
       setColumnCount: setColumnCount,
@@ -370,7 +376,9 @@ function DesktopBrowser(_ref2) {
     searchTerm = _ref2.searchTerm,
     createAnalyticsEvent = _ref2.createAnalyticsEvent,
     emptyStateHandler = _ref2.emptyStateHandler,
-    cache = _ref2.cache;
+    cache = _ref2.cache,
+    _ref2$focusOnEmptySta = _ref2.focusOnEmptyStateButton,
+    focusOnEmptyStateButton = _ref2$focusOnEmptySta === void 0 ? false : _ref2$focusOnEmptySta;
   return jsx("div", {
     css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
@@ -421,6 +429,7 @@ function DesktopBrowser(_ref2) {
     onInsertItem: onInsertItem,
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     setFocusedItemIndex: setFocusedItemIndex,
     columnCount: columnCount,
     setColumnCount: setColumnCount,

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -156,6 +157,30 @@ var moveReducer = function moveReducer(state, action) {
       selectedItemIndex: _selectedItemIndex
     });
   }
+  if (fg('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+    // Handle empty state navigation
+    if (state.listSize === -1) {
+      // If currently on search, ArrowDown and ArrowUp moves to EmptyState button
+      if (state.focusOnSearch && action.payload.positions && action.payload.positions > 0) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: false,
+          focusOnEmptyStateButton: true
+        });
+      }
+      // If currently on EmptyState button, ArrowUp and ArrowDown moves back to search
+      if (state.focusOnEmptyStateButton && action.payload.positions && action.payload.positions < 0) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          focusOnSearch: true,
+          focusOnEmptyStateButton: false
+        });
+      }
+      // Stay on EmptyState button for other arrows
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnEmptyStateButton: true
+      });
+    }
+  }
   return _objectSpread(_objectSpread({}, state), {}, {
     focusOnSearch: false,
     focusOnViewMore: false,
@@ -166,6 +191,7 @@ var moveReducer = function moveReducer(state, action) {
 var initialState = {
   focusOnSearch: true,
   focusOnViewMore: false,
+  focusOnEmptyStateButton: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
@@ -228,7 +254,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     focusedItemIndex = state.focusedItemIndex,
     focusOnSearch = state.focusOnSearch,
     focusOnViewMore = state.focusOnViewMore,
-    focusedCategoryIndex = state.focusedCategoryIndex;
+    focusedCategoryIndex = state.focusedCategoryIndex,
+    focusOnEmptyStateButton = state.focusOnEmptyStateButton;
 
   // calls if items size changed
   var reset = useCallback(function (listSize) {
@@ -305,6 +332,23 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
+    if (fg('jfp_a11y_fix_create_issue_no_results_link_focus')) {
+      // Handle empty state navigation
+      if (listSize === -1) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          dispatch({
+            type: ACTIONS.UPDATE_STATE,
+            payload: {
+              focusOnSearch: focusOnEmptyStateButton,
+              // cycle focus between search and button
+              focusOnEmptyStateButton: !focusOnEmptyStateButton // toggle
+            }
+          });
+          return;
+        }
+      }
+    }
     switch (e.key) {
       case '/':
         e.preventDefault();
@@ -337,7 +381,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
           return move(e, Math.min(-_nextItem3, -step), step);
         }
     }
-  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step]);
+  }, [focusOnSearch, setFocusOnSearch, move, selectedItemIndex, itemIsDisabled, listSize, step, focusOnEmptyStateButton]);
   useEffect(function () {
     // To reset selection when user filters
     reset(listSize);
@@ -347,6 +391,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
     onKeyDown: onKeyDown,
     focusOnSearch: focusOnSearch,
     focusOnViewMore: focusOnViewMore,
+    focusOnEmptyStateButton: focusOnEmptyStateButton,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "106.7.0";
+var packageVersion = "106.9.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "106.7.0";
+var packageVersion = "106.9.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/types/collab/index.d.ts

@@ -489,6 +489,8 @@ export interface CollabEventLocalStepData {
 export type Color = ReturnType<typeof token>;
 export declare const TELEPOINTER_DIM_CLASS = "telepointer-dim";
 export declare const TELEPOINTER_PULSE_CLASS = "telepointer-pulse-animate";
+export declare const TELEPOINTER_PULSE_DURING_TR_CLASS = "telepointer-pulse-during-tr";
+export declare const TELEPOINTER_PULSE_DURING_TR_DURATION_MS = 7500;
 export declare const TELEPOINTER_DATA_SESSION_ID_ATTR = "data-telepointer-sessionid";
 export declare const telepointerStyleWithInitialOnly: import("@emotion/react").SerializedStyles;
 export declare const telepointerStyle: import("@emotion/react").SerializedStyles;

package/dist/types/element-browser/components/ElementList/ElementList.d.ts

@@ -26,6 +26,7 @@ export interface Props {
     selectedCategoryIndex?: number;
     searchTerm?: string;
     cache?: CellMeasurerCache;
+    focusOnEmptyStateButton?: boolean;
 }
 type ElementItemType = {
     inlineMode: boolean;

package/dist/types/element-browser/components/ElementList/EmptyState.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 type Props = {
     onExternalLinkClick: () => void;
+    focusOnEmptyStateButton?: boolean;
 };
-export default function EmptyState({ onExternalLinkClick }: Props): JSX.Element;
+export default function EmptyState({ onExternalLinkClick, focusOnEmptyStateButton, }: Props): JSX.Element;
 export {};

package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -41,6 +41,7 @@ import type React from 'react';
 type ReducerState = {
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
+    focusOnEmptyStateButton?: boolean;
     selectedItemIndex?: number;
     focusedItemIndex?: number;
     listSize: number;
@@ -64,6 +65,7 @@ export type useSelectAndFocusReturnType = {
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
+    focusOnEmptyStateButton?: boolean;
     focusedItemIndex?: number;
     focusedCategoryIndex?: number;
     setFocusedItemIndex: (index?: number) => void;

package/dist/types-ts4.5/collab/index.d.ts

@@ -489,6 +489,8 @@ export interface CollabEventLocalStepData {
 export type Color = ReturnType<typeof token>;
 export declare const TELEPOINTER_DIM_CLASS = "telepointer-dim";
 export declare const TELEPOINTER_PULSE_CLASS = "telepointer-pulse-animate";
+export declare const TELEPOINTER_PULSE_DURING_TR_CLASS = "telepointer-pulse-during-tr";
+export declare const TELEPOINTER_PULSE_DURING_TR_DURATION_MS = 7500;
 export declare const TELEPOINTER_DATA_SESSION_ID_ATTR = "data-telepointer-sessionid";
 export declare const telepointerStyleWithInitialOnly: import("@emotion/react").SerializedStyles;
 export declare const telepointerStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/element-browser/components/ElementList/ElementList.d.ts

@@ -26,6 +26,7 @@ export interface Props {
     selectedCategoryIndex?: number;
     searchTerm?: string;
     cache?: CellMeasurerCache;
+    focusOnEmptyStateButton?: boolean;
 }
 type ElementItemType = {
     inlineMode: boolean;

package/dist/types-ts4.5/element-browser/components/ElementList/EmptyState.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 type Props = {
     onExternalLinkClick: () => void;
+    focusOnEmptyStateButton?: boolean;
 };
-export default function EmptyState({ onExternalLinkClick }: Props): JSX.Element;
+export default function EmptyState({ onExternalLinkClick, focusOnEmptyStateButton, }: Props): JSX.Element;
 export {};

package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -41,6 +41,7 @@ import type React from 'react';
 type ReducerState = {
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
+    focusOnEmptyStateButton?: boolean;
     selectedItemIndex?: number;
     focusedItemIndex?: number;
     listSize: number;
@@ -64,6 +65,7 @@ export type useSelectAndFocusReturnType = {
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
+    focusOnEmptyStateButton?: boolean;
     focusedItemIndex?: number;
     focusedCategoryIndex?: number;
     setFocusedItemIndex: (index?: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "106.7.0",
+	"version": "106.9.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -161,7 +161,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/profilecard": "^23.18.0",
+		"@atlaskit/profilecard": "^23.19.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/smart-card": "^38.9.0",
@@ -293,9 +293,6 @@
 		"platform_editor_elements_dnd_multi_select_patch_1": {
 			"type": "boolean"
 		},
-		"forge-ui-macro-autoconvert": {
-			"type": "boolean"
-		},
 		"platform_editor_add_media_from_url_rollout": {
 			"type": "boolean"
 		},
@@ -395,6 +392,9 @@
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
 		},
+		"jfp_a11y_fix_create_issue_no_results_link_focus": {
+			"type": "boolean"
+		},
 		"platform_editor_fix_unsubscribe_of_provider": {
 			"type": "boolean"
 		}