@atlaskit/editor-plugin-find-replace 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 0.3.1
+
+### Patch Changes
+
+- [#71136](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71136) [`c803fea1e6a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c803fea1e6a4) - Move all plugin translations to editor-common
+- Updated dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#67595](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67595) [`3bb66071a333`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3bb66071a333) - [ux] ECA11Y-75: Updated UX/UI for "Find and Replace" modal window, added Focus trap to Find and Replace popup, added return focus to the search button when pressing ESC, update selected match and all matches highlighted colors, added Screan Reader announcements for repeated button clicks ( subtickets: ECA11Y-144, ECA11Y-145, ECA11Y-146, ECA11Y-147, ECA11Y-148, ECA11Y-149 )
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/cjs/styles.js

@@ -5,13 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectedSearchMatchClass = exports.searchMatchClass = exports.findReplaceStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _css;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable */
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4290
 var searchMatchClass = exports.searchMatchClass = 'search-match';
 var selectedSearchMatchClass = exports.selectedSearchMatchClass = 'selected-search-match';
-var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, _colors.B75, selectedSearchMatchClass, _colors.B200);
+var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".".concat(searchMatchClass), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? {
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+  boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px 0 ".concat(_colors.N50A, ", 0 0 1px 0 ").concat(_colors.N60A), ")") + ', inset 0 0 0 1px ' + "var(--ds-border-input, ".concat("".concat(_colors.N40A), ")")
+} : {
+  backgroundColor: _colors.B75
+}), (0, _defineProperty2.default)(_css, ".".concat(selectedSearchMatchClass), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? {
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+} : {
+  backgroundColor: _colors.B200,
+  color: 'white'
+}), _css));

package/dist/cjs/ui/Find.js

@@ -18,6 +18,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _form = require("@atlaskit/form");
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 var _keyboard = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji/keyboard"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
@@ -29,43 +31,6 @@ var _styles = require("./styles");
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */ /** @jsx jsx */
 var FIND_DEBOUNCE_MS = exports.FIND_DEBOUNCE_MS = 100;
-var messages = (0, _reactIntlNext.defineMessages)({
-  find: {
-    id: 'fabric.editor.find',
-    defaultMessage: 'Find',
-    description: 'The word or phrase to search for on the document'
-  },
-  matchCase: {
-    id: 'fabric.editor.matchCase',
-    defaultMessage: 'Match case',
-    description: 'Toggle whether should also match case when searching for text'
-  },
-  findNext: {
-    id: 'fabric.editor.findNext',
-    defaultMessage: 'Find next',
-    description: 'Locate the next occurrence of the word or phrase that was searched for'
-  },
-  findPrevious: {
-    id: 'fabric.editor.findPrevious',
-    defaultMessage: 'Find previous',
-    description: 'Locate the previous occurrence of the word or phrase that was searched for'
-  },
-  closeFindReplaceDialog: {
-    id: 'fabric.editor.closeFindReplaceDialog',
-    defaultMessage: 'Close',
-    description: 'Cancel search and close the "Find and Replace" dialog'
-  },
-  noResultsFound: {
-    id: 'fabric.editor.noResultsFound',
-    defaultMessage: 'No results',
-    description: 'No matches were found for the word or phrase that was searched for'
-  },
-  resultsCount: {
-    id: 'fabric.editor.resultsCount',
-    description: 'Text for selected search match position and total results count',
-    defaultMessage: '{selectedMatchPosition} of {totalResultsCount}'
-  }
-});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Find = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Find, _React$Component);
@@ -110,6 +75,7 @@ var Find = /*#__PURE__*/function (_React$Component) {
         onSynced && onSynced();
         _this.debouncedFind(value);
       });
+      _this.props.setFindTyped(true);
     });
     // throtlle between animation frames gives better experience on Enter compared to arbitrary value
     // it adjusts based on performance (and document size)
@@ -175,14 +141,15 @@ var Find = /*#__PURE__*/function (_React$Component) {
       }
     });
     var formatMessage = props.intl.formatMessage;
-    _this.find = formatMessage(messages.find);
-    _this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
-    _this.noResultsFound = formatMessage(messages.noResultsFound);
-    _this.findNext = formatMessage(messages.findNext);
-    _this.findPrevious = formatMessage(messages.findPrevious);
-    _this.matchCase = formatMessage(messages.matchCase);
+    _this.find = formatMessage(_messages.findReplaceMessages.find);
+    _this.closeFindReplaceDialog = formatMessage(_messages.findReplaceMessages.closeFindReplaceDialog);
+    _this.noResultsFound = formatMessage(_messages.findReplaceMessages.noResultsFound);
+    _this.findNext = formatMessage(_messages.findReplaceMessages.findNext);
+    _this.findPrevious = formatMessage(_messages.findReplaceMessages.findPrevious);
+    _this.matchCase = formatMessage(_messages.findReplaceMessages.matchCase);
     _this.matchCaseIcon = (0, _react2.jsx)(_keyboard.default, {
-      label: _this.matchCase
+      label: _this.matchCase,
+      size: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? 'small' : 'medium'
     });
     _this.findNextIcon = (0, _react2.jsx)(_chevronDown.default, {
       label: _this.findNext
@@ -222,21 +189,19 @@ var Find = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this3 = this;
+      var _this$state2,
+        _this3 = this;
       // focus on update if find text did not change
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
-        var _this$state2;
-        if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
-          this.focusFindTextfield();
-        }
-        if (this.props.findText !== prevProps.findText) {
-          this.syncFindText(function () {
-            // focus after input is synced if find text provided
-            if (_this3.props.findText) {
-              _this3.focusFindTextfield();
-            }
-          });
-        }
+      if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
+        this.focusFindTextfield();
+      }
+      if (this.props.findText !== prevProps.findText) {
+        this.syncFindText(function () {
+          // focus after input is synced if find text provided
+          if (_this3.props.findText) {
+            _this3.focusFindTextfield();
+          }
+        });
       }
     }
   }, {
@@ -254,54 +219,94 @@ var Find = /*#__PURE__*/function (_React$Component) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         formatMessage = _this$props.intl.formatMessage;
-      var resultsCount = formatMessage(messages.resultsCount, {
+      var resultsCount = formatMessage(_messages.findReplaceMessages.resultsCount, {
         selectedMatchPosition: count.index + 1,
         totalResultsCount: count.total
       });
-      return (0, _react2.jsx)("div", {
-        css: _styles.sectionWrapperStyles
-      }, (0, _react2.jsx)(_textfield.default, {
-        name: "find",
-        appearance: "none",
-        placeholder: this.find,
-        value: this.state.localFindText,
-        ref: this.findTextfieldRef,
-        autoComplete: "off",
-        onChange: this.handleFindChange,
-        onKeyDown: this.handleFindKeyDown,
-        onKeyUp: this.handleFindKeyUp,
-        onBlur: this.props.onFindBlur,
-        onCompositionStart: this.handleCompositionStart,
-        onCompositionEnd: this.handleCompositionEnd
-      }), (0, _react2.jsx)("div", {
-        css: _styles.countWrapperStyles,
-        "aria-live": "polite"
-      }, findText && (0, _react2.jsx)("span", {
-        "data-testid": "textfield-count",
-        css: _styles.countStyles
-      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.matchCase,
-        icon: this.matchCaseIcon,
-        onClick: this.handleMatchCaseClick,
-        isPressed: shouldMatchCase
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findNext,
-        icon: this.findNextIcon,
-        keymapDescription: 'Enter',
-        onClick: this.handleFindNextClick,
-        disabled: count.total <= 1
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findPrevious,
-        icon: this.findPrevIcon,
-        keymapDescription: 'Shift Enter',
-        onClick: this.handleFindPrevClick,
-        disabled: count.total <= 1
-      }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.closeFindReplaceDialog,
-        icon: this.closeIcon,
-        keymapDescription: 'Escape',
-        onClick: this.clearSearch
-      }));
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        var elemAfterInput = (0, _react2.jsx)("div", {
+          css: _styles.afterInputSection
+        }, (0, _react2.jsx)("div", {
+          "aria-live": "polite"
+        }, findText && (0, _react2.jsx)("span", {
+          "data-testid": "textfield-count",
+          css: [_styles.countStyles, _styles.countStylesAlternateStyles]
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)("div", {
+          css: _styles.matchCaseSection
+        }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.matchCase,
+          appearance: "default",
+          icon: this.matchCaseIcon,
+          onClick: this.handleMatchCaseClick,
+          isPressed: shouldMatchCase
+        })));
+        return (0, _react2.jsx)("div", {
+          css: [_styles.sectionWrapperStyles, _styles.sectionWrapperStylesAlternate]
+        }, (0, _react2.jsx)("div", {
+          css: _styles.textFieldWrapper
+        }, (0, _react2.jsx)(_form.Label, {
+          htmlFor: "find-text-field"
+        }, this.find), (0, _react2.jsx)(_textfield.default, {
+          name: "find",
+          id: "find-text-field",
+          appearance: "standard",
+          value: this.state.localFindText,
+          ref: this.findTextfieldRef,
+          autoComplete: "off",
+          onChange: this.handleFindChange,
+          onKeyDown: this.handleFindKeyDown,
+          onKeyUp: this.handleFindKeyUp,
+          onBlur: this.props.onFindBlur,
+          onCompositionStart: this.handleCompositionStart,
+          onCompositionEnd: this.handleCompositionEnd,
+          elemAfterInput: elemAfterInput
+        })));
+      } else {
+        return (0, _react2.jsx)("div", {
+          css: _styles.sectionWrapperStyles
+        }, (0, _react2.jsx)(_textfield.default, {
+          name: "find",
+          appearance: "none",
+          placeholder: this.find,
+          value: this.state.localFindText,
+          ref: this.findTextfieldRef,
+          autoComplete: "off",
+          onChange: this.handleFindChange,
+          onKeyDown: this.handleFindKeyDown,
+          onKeyUp: this.handleFindKeyUp,
+          onBlur: this.props.onFindBlur,
+          onCompositionStart: this.handleCompositionStart,
+          onCompositionEnd: this.handleCompositionEnd
+        }), (0, _react2.jsx)("div", {
+          css: _styles.countWrapperStyles,
+          "aria-live": "polite"
+        }, findText && (0, _react2.jsx)("span", {
+          "data-testid": "textfield-count",
+          css: _styles.countStyles
+        }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.matchCase,
+          icon: this.matchCaseIcon,
+          onClick: this.handleMatchCaseClick,
+          isPressed: shouldMatchCase
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.findNext,
+          icon: this.findNextIcon,
+          keymapDescription: 'Enter',
+          onClick: this.handleFindNextClick,
+          disabled: count.total <= 1
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.findPrevious,
+          icon: this.findPrevIcon,
+          keymapDescription: 'Shift Enter',
+          onClick: this.handleFindPrevClick,
+          disabled: count.total <= 1
+        }), (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+          title: this.closeFindReplaceDialog,
+          icon: this.closeIcon,
+          keymapDescription: 'Escape',
+          onClick: this.clearSearch
+        }));
+      }
     }
   }]);
   return Find;

package/dist/cjs/ui/FindReplace.js

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Find = _interopRequireDefault(require("./Find"));
 var _Replace = _interopRequireDefault(require("./Replace"));
 var _styles = require("./styles");
@@ -23,15 +24,45 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(FindReplace, _React$PureComponent);
   var _super = _createSuper(FindReplace);
-  function FindReplace() {
+  function FindReplace(props) {
     var _this;
     (0, _classCallCheck2.default)(this, FindReplace);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "findTextfield", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "replaceTextfield", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTabNavigation", function (event) {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        var modalFindReplace = _this.modalRef.current;
+        if (!modalFindReplace || !modalFindReplace.contains(document.activeElement)) {
+          return;
+        }
+        var focusableElements = Array.from(modalFindReplace.querySelectorAll('[tabindex]:not([tabindex="-1"]), input, button')).filter(function (el) {
+          return el.getAttribute('tabindex') !== '-1';
+        });
+        var currentIndex = focusableElements.findIndex(function (el) {
+          return el === document.activeElement;
+        });
+        var isShiftPressed = event.shiftKey;
+        if (isShiftPressed) {
+          var prevIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+          focusableElements[prevIndex].focus();
+        } else {
+          var nextIndex = (currentIndex + 1) % focusableElements.length;
+          focusableElements[nextIndex].focus();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      findTyped: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFindTyped", function (value) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        _this.setState({
+          findTyped: value
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFindTextfieldRef", function (findTextfieldRef) {
       _this.findTextfield = findTextfieldRef.current;
     });
@@ -48,9 +79,26 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         _this.replaceTextfield.focus();
       }
     });
+    _this.modalRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(FindReplace, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.addEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.removeEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -69,8 +117,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         onToggleMatchCase = _this$props.onToggleMatchCase;
+      var focusToolbarButton = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? this.props.focusToolbarButton || function () {} : function () {};
       return (0, _react2.jsx)("div", {
-        css: _styles.wrapperStyles
+        ref: this.modalRef,
+        css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? [_styles.wrapperStyles, _styles.wrapperPaddingStyles] : _styles.wrapperStyles
       }, (0, _react2.jsx)(_Find.default, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
@@ -84,8 +134,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onFindNext: onFindNext,
         onFindTextfieldRefSet: this.setFindTextfieldRef,
         onCancel: onCancel,
-        onArrowDown: this.setFocusToReplace
-      }), (0, _react2.jsx)("hr", {
+        onArrowDown: this.setFocusToReplace,
+        findTyped: this.state.findTyped,
+        setFindTyped: this.setFindTyped
+      }), !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') && (0, _react2.jsx)("hr", {
         css: _styles.ruleStyles,
         id: "replace-hr-element"
       }), (0, _react2.jsx)(_Replace.default, {
@@ -95,7 +147,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onReplaceAll: onReplaceAll,
         onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
         onArrowUp: this.setFocusToFind,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+        onCancel: onCancel,
+        count: count,
+        onFindPrev: onFindPrev,
+        onFindNext: onFindNext,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        findTyped: this.state.findTyped,
+        setFindTyped: this.setFindTyped,
+        focusToolbarButton: focusToolbarButton
       }));
     }
   }]);

package/dist/cjs/ui/FindReplaceToolbarButton.js

@@ -19,9 +19,11 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FindReplace = _interopRequireDefault(require("./FindReplace"));
 var _templateObject, _templateObject2, _templateObject3;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
@@ -31,13 +33,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 ", ";\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-var messages = (0, _reactIntlNext.defineMessages)({
-  findReplaceToolbarButton: {
-    id: 'fabric.editor.findReplaceToolbarButton',
-    defaultMessage: 'Find and replace',
-    description: '"Find" highlights all instances of a word or phrase on the document, and "Replace" changes one or all of those instances to something else'
-  }
-});
+var dropdownWidthNewDesign = 382;
+var dropdownWidthOldDesign = 352;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(FindReplaceToolbarButton, _React$PureComponent);
@@ -49,15 +46,30 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      openedByClick: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
       if (_this.props.isActive) {
         _this.props.onCancel({
           triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
         });
       } else {
+        _this.setState({
+          openedByClick: true
+        });
         _this.props.onActivate();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusToolbarButton", function () {
+      if (_this.state.openedByClick && _this.toolbarButtonRef.current) {
+        _this.toolbarButtonRef.current.focus();
+      }
+      _this.setState({
+        openedByClick: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarButtonRef", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
   (0, _createClass2.default)(FindReplaceToolbarButton, [{
@@ -76,7 +88,7 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
         numMatches = _this$props.numMatches,
         formatMessage = _this$props.intl.formatMessage,
         takeFullWidth = _this$props.takeFullWidth;
-      var title = formatMessage(messages.findReplaceToolbarButton);
+      var title = formatMessage(_messages.findReplaceMessages.findReplaceToolbarButton);
       var stackBelowOtherEditorFloatingPanels = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
       var keymap = (0, _keymaps.findKeymapByDescription)('Find');
       return (0, _react2.jsx)("div", {
@@ -91,9 +103,17 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
             _this2.props.onCancel({
               triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
             });
+            if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+              if (_this2.state.openedByClick && _this2.toolbarButtonRef.current) {
+                _this2.toolbarButtonRef.current.focus();
+              }
+              _this2.setState({
+                openedByClick: false
+              });
+            }
           }
         },
-        fitWidth: 352,
+        fitWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? dropdownWidthNewDesign : dropdownWidthOldDesign,
         zIndex: stackBelowOtherEditorFloatingPanels,
         arrowKeyNavigationProviderOptions: {
           type: _uiMenu.ArrowKeyNavigationType.MENU,
@@ -114,7 +134,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           "aria-expanded": isActive,
           "aria-haspopup": true,
           "aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
-          "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap)
+          "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap),
+          ref: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? this.toolbarButtonRef : null
         })
       }, (0, _react2.jsx)("div", {
         css: wrapper
@@ -124,7 +145,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
         count: {
           index: index,
           total: numMatches
-        }
+        },
+        focusToolbarButton: this.focusToolbarButton
       }, this.props)))));
     }
   }]);

package/dist/cjs/ui/FindReplaceTooltipButton.js

@@ -46,7 +46,8 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
         icon = _this$props.icon,
         keymapDescription = _this$props.keymapDescription,
         disabled = _this$props.disabled,
-        isPressed = _this$props.isPressed;
+        isPressed = _this$props.isPressed,
+        appearance = _this$props.appearance;
       var pressedProps = _objectSpread({}, typeof isPressed === 'boolean' && {
         'aria-pressed': isPressed
       });
@@ -58,8 +59,9 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
         hideTooltipOnClick: true,
         position: 'top'
       }, /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+        id: "afterInputSection",
         label: title,
-        appearance: "subtle",
+        appearance: appearance,
         testId: title,
         ref: this.buttonRef,
         iconBefore: icon,
@@ -73,5 +75,6 @@ var FindReplaceTooltipButton = exports.FindReplaceTooltipButton = /*#__PURE__*/f
   return FindReplaceTooltipButton;
 }(_react.default.PureComponent);
 (0, _defineProperty2.default)(FindReplaceTooltipButton, "defaultProps", {
-  keymapDescription: 'no-keymap'
+  keymapDescription: 'no-keymap',
+  appearance: 'subtle'
 });