MC-3775: Button editable state is not consistent with the options panel appearing

- Improve focusing and tabbing on buttons

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/button-item/preview.js

@@ -15,9 +15,9 @@
        css="data.link.css"
        click="function (context, event) { onClick($index(), event); }">
         <span class="button-item-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
-        <span attr="Object.assign({tabindex: $index()}, data.link_text.attributes)"
+        <span attr="data.link_text.attributes"
               data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }, hasFocusNoScroll: $parent.parent.preview.focusedButton() === $index()"
-              event="{ focusin: function () { $parent.parent.preview.focusedButton($index()) }, focusout: function () { window.getSelection().removeAllRanges(); $parent.parent.preview.focusedButton(null); } }">>
+              event="{ focusin: function (context, event) { onFocusIn($index(), event); }, focusout: function (context, event) { onFocusOut($index(), event); } }">
         </span>
     </a>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

@@ -4,6 +4,7 @@
  */
 
 import $ from "jquery";
+import ko from "knockout";
 import $t from "mage/translate";
 import ConditionalRemoveOption from "../../content-type-menu/conditional-remove-option";
 import {OptionsInterface} from "../../content-type-menu/option.d";
@@ -43,6 +44,44 @@ export default class Preview extends BasePreview {
         event.stopPropagation();
     }
 
+    /**
+     * On focus out
+     *
+     * @param {number} index
+     * @param {Event} event
+     */
+    public onFocusOut(index: number, event: JQueryEventObject): void {
+        const parentPreview = this.parent.parent.preview as ButtonsPreview;
+        if (!event.relatedTarget) {
+            if (parentPreview.focusedButton() === index) {
+                window.getSelection().removeAllRanges();
+                parentPreview.focusedButton(null);
+            }
+        } else {
+            // Have we moved the focus onto another button in the current group?
+            if ($.contains(parentPreview.wrapperElement, event.relatedTarget)) {
+                const buttonItem = ko.dataFor(event.relatedTarget) as Preview;
+                if (buttonItem) {
+                    $(buttonItem.wrapperElement).find("[contenteditable]").focus();
+                }
+            } else {
+                window.getSelection().removeAllRanges();
+                parentPreview.focusedButton(null);
+            }
+        }
+    }
+
+    /**
+     * On focus in set the focused button
+     *
+     * @param {number} index
+     * @param {Event} event
+     */
+    public onFocusIn(index: number, event: Event): void {
+        const parentPreview = this.parent.parent.preview as ButtonsPreview;
+        parentPreview.focusedButton(index);
+    }
+
     /**
      * If the button is displayed we need to show the options menu on hover
      *

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/button-item/preview.ts

@@ -19,11 +19,11 @@ import ContentTypeInterface from "../../content-type.d";
 import StageUpdateAfterParamsInterface from "../../stage-update-after-params.d";
 import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params.d";
 import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
+import ContentTypeDuplicateEventParamsInterface from "../content-type-duplicate-event-params";
+import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
 import ContentTypeRedrawAfterEventParamsInterface from "../content-type-redraw-after-event-params";
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
-import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
-import ContentTypeDuplicateEventParamsInterface from "../content-type-duplicate-event-params";
 
 /**
  * @api