#514: User sees content snapshot on Category Page in Admin Panel - Added function for changing focus stage on elements, added css classes for PageBuilder field in category form

Author: hannahnida

app/code/Magento/PageBuilder/view/adminhtml/ui_component/category_form.xml

@@ -18,6 +18,11 @@
                     </item>
                 </item>
             </argument>
+            <settings>
+                <additionalClasses>
+                    <class name="admin__field-wide admin__field-page-builder">true</class>
+                </additionalClasses>
+            </settings>
         </field>
     </fieldset>
 </form>

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -159,6 +159,9 @@ define([
 
             events.on('stage:' + id + ':masterFormatRenderAfter', function (args) {
                 this.value(args.value);
+                if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                    this.pageBuilder.toggleFocusableElements();
+                }
             }.bind(this));
 
             events.on('stage:' + id + ':fullScreenModeChangeAfter', function (args) {

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -80,6 +80,20 @@ export default class PageBuilder implements PageBuilderInterface {
         this.isFullScreen.subscribe(() => this.onFullScreenChange());
     }
 
+    /**
+     * Changes tabindex and content editable on stage elements.
+     */
+    public toggleFocusableElements () {
+        const stageWrapper = $("#" + this.id).parent();
+        let focusableElements = ':focusable:not(.pagebuilder-stage-overlay)';
+        let editableElements = '[contenteditable]';
+        let tabIndexValue = this.isFullScreen() ? '0' : '-1';
+        let editableValue = this.isFullScreen() ? 'true' : 'false';
+
+        stageWrapper.find(editableElements).attr('contenteditable', editableValue);
+        stageWrapper.find(focusableElements).attr('tabindex', tabIndexValue);
+    }
+
     /**
      * Tells the stage wrapper to expand to fullScreen
      *
@@ -153,6 +167,7 @@ export default class PageBuilder implements PageBuilderInterface {
             $("body").css("overflow", "");
         }
 
+        this.toggleFocusableElements();
         events.trigger(`stage:${ this.id }:fullScreenModeChangeAfter`, {
             fullScreen: this.isFullScreen(),
         });