Merge pull request #554 from magento/514_5_content-snapshot-category-admin-page

User sees content snapshot on Category Page in Admin Panel - Add accessibility support for stage overlay

Author: hannahnida

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

@@ -17,6 +17,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/css/source/_common.less

@@ -48,35 +48,3 @@
         display: none !important;
     }
 }
-
-//
-//  Category Description
-//  ---------------------------------------------
-
-.catalog-category-edit {
-    .admin__fieldset {
-        > .admin__field {
-            &[data-index="description"] {
-                > .admin__field-label {
-                    text-align: left;
-                    
-                    label {
-                        span {
-                            &:before {
-                                left: 0;
-                            }
-                        }
-                    }
-                }
-                
-                > .admin__field-control {
-                    float: right;
-
-                    button.action-default {
-                        float: right;
-                    }
-                }
-            }
-        }
-    }
-}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_config.less

@@ -45,3 +45,35 @@
         }
     }
 }
+
+
+//
+//  Page Builder full width field
+//   _____________________________________________
+
+
+.admin__fieldset {
+    > .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {
+        > .admin__field-label {
+            margin-bottom: @indent__xs;
+            margin-top: @indent__xs;
+            min-height: 32px;
+
+            span[data-config-scope] {
+                &:before {
+                    left: 0;
+                }
+            }
+        }
+    }
+}
+
+.admin__field-wide.admin__field-page-builder {
+    margin-bottom: 32px;
+
+    button.action-default {
+        position: absolute;
+        right: 0;
+        top: @indent__xs;
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -4,8 +4,11 @@
 //  */
 
 @border-size: 2px;
+@wysiwyg-overlay-background: rgba(0, 120, 249, 0.08);
+@wysiwyg-overlay-border: #4181E4;
 
 .pagebuilder-header {
+    display: none;
     opacity: 0;
     text-align: right;
 
@@ -20,6 +23,7 @@
     }
 
     &.visible {
+        display: block;
         opacity: 1;
         visibility: visible;
     }
@@ -67,6 +71,7 @@
             background: @color-very-dark-grayish-orange;
             border: none;
             border-bottom: 1px solid @color-brownie-almost;
+            display: block;
             left: 150px;
             opacity: 0;
             padding: 0;
@@ -93,11 +98,13 @@
             &.visible {
                 opacity: 1;
                 visibility: visible;
+                display: block;
             }
         }
 
         .pagebuilder-canvas {
             padding-top: 30px;
+            padding-bottom: 120px;
         }
 
         .pagebuilder-panel-wrapper {
@@ -139,27 +146,45 @@
     }
 }
 
-.page-builder-wysiwyg-wrapper {
-    position: relative;
 
-    .pagebuilder-wysiwyg-overlay {
-        display: none;
-        height: 0;
-        left: 0;
-        position: absolute;
-        top: 0;
-        visibility: hidden;
-        width: 0;
+.pagebuilder-wysiwyg-overlay {
+    display: none;
+    height: 0;
+    left: -1px;
+    position: absolute;
+    top: -1px;
+    visibility: hidden;
+    width: 0;
 
-        &.active {
-            cursor: pointer;
-            display: block;
-            height: 100%;
-            visibility: visible;
-            width: 100%;
-            z-index: @z-index-2;
-        }
+    &.visible {
+        -moz-transition: .175s ease-in-out;
+        -webkit-transition: .175s ease-in-out;
+        border: 2px solid transparent;
+        border-radius: 2px;
+        cursor: pointer;
+        display: block;
+        height: calc(~"100% + 2px");
+        transform: translateY(-2px);
+        transition: .175s ease-in-out;
+        visibility: visible;
+        width: calc(~"100% + 2px");
+        z-index: @z-index-2;
     }
+
+    &._hover {
+        background-color: @wysiwyg-overlay-background;
+        border-color: @wysiwyg-overlay-border;
+        transform: translateY(0);
+    }
+
+    ._keyfocus & {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pagebuilder-wysiwyg-wrapper {
+    position: relative;
 }
 
 .pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
@@ -192,17 +217,13 @@
 }
 
 .pagebuilder-stage {
-    -moz-transition: margin-left .35s ease-in-out;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    -webkit-transition: margin-left .35s ease-in-out;
     -webkit-user-select: none;
     font-size: 0;
-    margin-left: 170px;
     min-height: 200px;
     padding: 0;
-    transition: margin-left .35s ease-in-out;
     user-select: none;
 
     &.stage-full-screen {
@@ -238,7 +259,7 @@
         -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         opacity: 0;
-        padding-bottom: 120px;
+        padding-top: 8px;
         transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;
 

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

@@ -58,6 +58,7 @@
     transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     visibility: hidden;
     width: 150px;
+    display: none;
 
     &.no-position-sticky {
         top: 0;
@@ -66,6 +67,7 @@
     &.visible {
         opacity: 1;
         visibility: visible;
+        display: block;
 
         &.sticky-top {
             position: fixed;

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

@@ -24,6 +24,8 @@ define([
             transitionOut: false,
             elementSelector: '> textarea',
             stageSelector: '.pagebuilder-stage-wrapper',
+            overlaySelector: '.pagebuilder-wysiwyg-overlay',
+            overlayMouseover: false,
             pageBuilder: false,
             visiblePageBuilder: false,
             isComponentInitialized: false,
@@ -118,6 +120,22 @@ define([
             domObserver.disableNode(node);
         },
 
+        /**
+         * Changes tabindex and content editable on stage elements
+         */
+        toggleFocusableElements: function () {
+            var pageBuilderSelector = '#' + this.pageBuilder.id,
+                editableSelector = ' [contenteditable]',
+                focusableSelector = ' :focusable:not(' + this.overlaySelector + ')',
+                mediaSelector = pageBuilderSelector + ' iframe,' + pageBuilderSelector + ' video',
+                tabIndexValue = this.pageBuilder.isFullScreen() ? '0' : '-1',
+                editableValue = this.pageBuilder.isFullScreen();
+
+            $(pageBuilderSelector + editableSelector).attr('contenteditable', editableValue);
+            $(pageBuilderSelector + focusableSelector).attr('tabindex', tabIndexValue).blur();
+            $(mediaSelector).attr('tabindex', tabIndexValue);
+        },
+
         /**
          * Determine if the current instance is within a modal
          *
@@ -134,6 +152,26 @@ define([
             }
         },
 
+        /**
+         * Overlay MouseOver
+         */
+        onOverlayMouseOver: function () {
+            if (!this.overlayMouseover && !$(this.overlaySelector).hasClass('_hover')) {
+                $(this.overlaySelector).addClass('_hover');
+            }
+            this.overlayMouseover = true;
+        },
+
+        /**
+         * Overlay MouseOut
+         */
+        onOverlayMouseOut: function () {
+            if (this.overlayMouseover && $(this.overlaySelector).hasClass('_hover')) {
+                $(this.overlaySelector).removeClass('_hover');
+            }
+            this.overlayMouseover = false;
+        },
+
         /**
          * Toggle Page Builder full screen mode
          */
@@ -163,6 +201,10 @@ define([
 
             events.on('stage:' + id + ':masterFormatRenderAfter', function (args) {
                 this.value(args.value);
+
+                if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                    this.toggleFocusableElements();
+                }
             }.bind(this));
 
             events.on('stage:' + id + ':fullScreenModeChangeAfter', function (args) {
@@ -213,6 +255,10 @@ define([
                         /* eslint-enable max-depth */
                     }
                 }
+
+                if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                    this.toggleFocusableElements();
+                }
             }.bind(this));
 
             // Wait until the stage is rendered and full screen mode is activated

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

@@ -5,26 +5,29 @@
  */
 -->
 
-<div visible="visible" css="{'_disabled': disabled}" class="page-builder-wysiwyg-wrapper">
+<div visible="visible" css="{'_disabled': disabled}">
     <button if="wysiwygConfigData()['pagebuilder_button'] || wysiwygConfigData()['pagebuilder_content_snapshot']"
             type="button"
             class="action-default action"
             ko-disabled="disabled"
-            click="pageBuilderEditButtonClick.bind($data)">
+            click="pageBuilderEditButtonClick.bind($data)"
+            event="{ mouseover: onOverlayMouseOver, mouseout: onOverlayMouseOut }, mouseoverBubble: false">
         <span translate="pageBuilderEditButtonText" />
     </button>
     <if args="isComponentInitialized">
         <div visible="visiblePageBuilder"
              class="pagebuilder-wysiwyg-wrapper"
              css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'] && !wysiwygConfigData()['pagebuilder_content_snapshot'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut}">
-        <with args="pageBuilder">
+            <div if="wysiwygConfigData()['pagebuilder_content_snapshot']"
+                 class="pagebuilder-wysiwyg-overlay"
+                 click="pageBuilderEditButtonClick.bind($data)"
+                 css="'visible': !pageBuilder.isFullScreen()"
+                 event="{ mouseover: onOverlayMouseOver, mouseout: onOverlayMouseOut }, mouseoverBubble: false"
+                 tabindex="0">
+            </div>
+            <with args="pageBuilder">
                 <render />
             </with>
         </div>
     </if>
-    <div if="wysiwygConfigData()['pagebuilder_content_snapshot']"
-         class="pagebuilder-wysiwyg-overlay"
-         click="pageBuilderEditButtonClick.bind($data)"
-         css="'active': !pageBuilder.isFullScreen()">
-    </div>
 </div>