MC-3314: Cannot sort slides on slider

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml

@@ -32,6 +32,8 @@
         <element name="firstSlideNavigationDot" type="button" selector="(//div[contains(@class, 'navigation-dot')])[1]"/>
         <element name="activeSlideTooltip" type="button" selector="//div[contains(@class, 'navigation-dot')]//span[contains(@role, 'tooltip')]"/>
         <element name="slideNavigationDot" type="button" selector="(//div[contains(@class, 'navigation-dot')])[{{arg1}}]" parameterized="true"/>
+        <element name="slideNavigationDragHandle" type="button" selector="a.navigation-dot-anchor"/>
+        <element name="slideNavigationDragHandleArgs" type="button" selector="(//a[contains(@class, 'navigation-dot-anchor')])[{{arg1}}]" parameterized="true"/>
         <element name="allNavigationDots" type="button" selector="(//div[contains(@class, 'navigation-dot')])"/>
         <element name="activeSlideNavigationDot" type="button" selector="//div[contains(@class, 'navigation-dot active')]"/>
         <element name="slideNavigationDotNameTooltip" type="button" selector="(//span[contains(@class, 'tooltip-content')])"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideCommonTest.xml

@@ -696,6 +696,19 @@
         <see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltip"/>
         <moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('1')}}" stepKey="moveMouseOverFirstSlideNavigationDot"/>
         <see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltip"/>
+        <comment userInput="User sorts slides using drag and drop" stepKey="AC16"/>
+        <executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[0].clientWidth / 4" stepKey="xCoordinateToMoveTo"/>
+        <comment userInput="xCoordinateToMoveTo: $xCoordinateToMoveTo" stepKey="commentXCoordinate"/>
+        <executeJS function="return document.querySelectorAll('{{SliderInAdmin.slideNavigationDragHandle}}')[1].clientHeight / 2" stepKey="yCoordinateToMoveTo"/>
+        <comment userInput="yCoordinateToMoveTo: $yCoordinateToMoveTo" stepKey="commentYCoordinate"/>
+        <click selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="clickButton"/>
+        <dragAndDrop selector1="{{SliderInAdmin.slideNavigationDragHandleArgs('2')}}" selector2="{{SliderInAdmin.slideNavigationDot('1')}}" x="$xCoordinateToMoveTo" y="$yCoordinateToMoveTo" stepKey="dragAndDropSlide"/>
+        <comment userInput="User hovers each slide dot, user sees tooltip displayed with Slide name after sorting" stepKey="AC17"/>
+        <click selector="{{SliderInAdmin.sliderContainer}}" stepKey="unfocusNavigationAfterSort"/>
+        <moveMouseOver selector="{{SliderInAdmin.activeSlideNavigationDot}}" stepKey="mouseOverActiveSlide2AfterSort"/>
+        <see userInput="{{PageBuilderSlideItemName2.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName2InTooltipAfterSort"/>
+        <moveMouseOver selector="{{SliderInAdmin.slideNavigationDot('2')}}" stepKey="moveMouseOverSecondSlideNavigationDot"/>
+        <see userInput="{{PageBuilderSlideItemName1.value}}" selector="{{SliderInAdmin.slideNavigationDotNameTooltip}}" stepKey="seeSlideName1InTooltipAfterSort"/>
     </test>
     <test name="SliderDelete">
         <annotations>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -292,7 +292,7 @@
     opacity: 1;
     transform: translate(-50%, -50%);
     transition-delay: 200ms;
-    visibility: visible;
+    z-index: 30;
 }
 
 .pagebuilder-options {
@@ -307,8 +307,7 @@
     top: 0;
     transform: translate(-50%, -50%);
     transition: opacity 200ms, visibility 200ms;
-    visibility: hidden;
-    z-index: 30;
+    z-index: -1;
 
     &.pagebuilder-options-visible {
         .pagebuilder-options-visible;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -207,7 +207,7 @@
                     }
                 }
 
-                &:focus {
+                &.focus {
                     outline: 1px solid @color-blue-pure;
 
                     .pagebuilder-options {

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/sortable-children.js

@@ -16,18 +16,16 @@
         <render args="previewChildTemplate" />
     </div>
     <div class="slider-controls focus-options">
-        <div if="$parent.children().length > 0"
-             class="slider-navigation"
+        <div class="slider-navigation"
              each="$parent.getChildren()"
-             data-bind="previewSortable: {handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: function () { onSortStart.apply($parent.preview, arguments); }, stop: function () { onSortStop.apply($parent.preview, arguments); } }">
+             data-bind="sortableChildren: { handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: onSortStart.bind($parent.preview), stop: onSortStop.bind($parent.preview) }">
             <div class="navigation-dot"
-                 attr="{id: 'navigation-' + parent.id, tabindex: $index}"
-                 css="{active: $parent.activeSlide() === $index()}"
-                 data-bind="hasFocusNoScroll: $parent.focusedSlide() === $index(), event: { focusin: function () { $parent.setFocusedSlide($index()) }, focusout: function () { $parent.setFocusedSlide(null) } }">
+                 event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.setFocusedSlide.bind($parent, null, false)"
+                 css="active: $parent.activeSlide() === $index(), focus: $parent.focusedSlide() === $index()">
+                <a class="navigation-dot-anchor" href="#" tabindex="0" click="$parent.onControlClick.bind($parent, $index())"/>
                 <with args="preview">
                     <render with="preview" args="getOptions().template" />
                 </with>
-                <a class="navigation-dot-anchor" href="#" data-bind="click: function () { $parent.navigateToSlide($index()); $parent.setFocusedSlide($index()); }"></a>
                 <span if="preview.previewData.slide_name() !== ''"
                       class="tooltip-content"
                       role="tooltip"

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

@@ -40,13 +40,14 @@ ko.bindingHandlers.sortableChildren = {
                     ui,
                 });
             })
-            .on("sortstop", (event: Event, ui: JQueryUI.SortableUIParams) => {
+            .on("sortstop", (event: JQueryEventObject, ui: JQueryUI.SortableUIParams) => {
                 events.trigger("childContentType:sortStop", {
                     instance,
                     ui,
+                    originalPosition,
                 });
             })
-            .on("sortupdate", function(event: Event, ui: JQueryUI.SortableUIParams) {
+            .on("sortupdate", function(event: JQueryEventObject, ui: JQueryUI.SortableUIParams) {
                 if (this === ui.item.parent()[0]) {
                     const index = ui.item.index();
                     const targetParent = ko.dataFor(ui.item.parent()[0]).parent;
@@ -62,6 +63,7 @@ ko.bindingHandlers.sortableChildren = {
                             newPosition: index,
                             originalPosition,
                             ui,
+                            event,
                         });
                     }
                 }
@@ -74,4 +76,5 @@ export interface PreviewSortableSortUpdateEventParams {
     newPosition: number;
     originalPosition: number;
     ui: JQueryUI.SortableUIParams;
+    event: JQueryEventObject;
 }

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

@@ -210,10 +210,13 @@ export default class Preview extends PreviewCollection {
      * On sort stop ensure the focused slide and the active slide are in sync, as the focus can be lost in this
      * operation
      */
-    public onSortStop(): void {
+    public onSortStop(event: JQueryEventObject, params: JQueryUI.SortableUIParams): void {
         if (this.activeSlide() !== this.focusedSlide()) {
             this.setFocusedSlide(this.activeSlide(), true);
         }
+        if (params.item.index() !== -1) {
+            _.defer(this.focusElement.bind(this, event, params.item.index()));
+        }
     }
 
     /**
@@ -247,6 +250,19 @@ export default class Preview extends PreviewCollection {
         return false;
     }
 
+    /**
+     * Slider navigation click handler.
+     *
+     * @param {number} index
+     * @param {Preview} context
+     * @param {Event} event
+     */
+    public onControlClick(index: number, context: Preview, event: Event) {
+        $(event.target).focus();
+        this.navigateToSlide(index);
+        this.setFocusedSlide(index);
+    }
+
     /**
      * Bind events
      */
@@ -265,6 +281,7 @@ export default class Preview extends PreviewCollection {
             if (args.instance.id === this.parent.id) {
                 $(args.ui.item).remove(); // Remove the item as the container's children is controlled by knockout
                 this.setActiveSlide(args.newPosition);
+                _.defer(this.focusElement.bind(this, args.event, args.newPosition));
             }
         });
 
@@ -336,6 +353,18 @@ export default class Preview extends PreviewCollection {
         });
     }
 
+    /**
+     * Take dropped element on focus.
+     *
+     * @param {JQueryEventObject} event
+     * @param {number} index
+     */
+    private focusElement(event: JQueryEventObject, index: number) {
+        const handleClassName = $(event.target).data("sortable").options.handle;
+
+        $($(event.target).find(handleClassName)[index]).focus();
+    }
+
     /**
      * To ensure smooth animations we need to lock the container height
      */