ACP2E-1542: Pagebuilder floating editor adds "tabindex" attribute when editing hyperlink and saving the template

Author: bubasuma

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

@@ -131,7 +131,26 @@ define([
                 editableValue = this.pageBuilder.isFullScreen();
 
             editable.attr('contenteditable', editableValue);
-            $(pageBuilderSelector + focusableSelector).attr('tabindex', tabIndexValue);
+            if (this.pageBuilder.isFullScreen()) {
+                $(pageBuilderSelector + focusableSelector)
+                    .each(function () {
+                        if ($(this).data('original-tabindex')) {
+                            $(this).attr('tabindex', $(this).data('original-tabindex'));
+                        } else if ($(this).data('original-tabindex') === '') {
+                            $(this).removeAttr('tabindex');
+                        }
+                        $(this).removeData('original-tabindex');
+                    });
+            } else {
+                $(pageBuilderSelector + focusableSelector).each(function () {
+                    if ($(this).attr('tabindex')) {
+                        $(this).data('original-tabindex', $(this).attr('tabindex'));
+                    } else {
+                        $(this).data('original-tabindex', '');
+                    }
+                    $(this).attr('tabindex', '-1');
+                });
+            }
             $(mediaSelector).attr('tabindex', tabIndexValue);
         },
 

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/form/element/image-uploader.test.js

@@ -6,9 +6,8 @@
 
 /* eslint-disable max-nested-callbacks */
 define([
-    'jquery',
     'squire'
-], function ($, Squire) {
+], function (Squire) {
     'use strict';
 
     var uploader,
@@ -73,7 +72,7 @@ define([
 
     beforeEach(function (done) {
         injector.mock(mocks);
-        injector.require(['Magento_PageBuilder/js/form/element/image-uploader'], function (ImageUploader) {
+        injector.require(['Magento_PageBuilder/js/form/element/image-uploader', 'jquery'], function (ImageUploader, $) {
             /**
              * A stub constructor to bypass the original
              * @constructor
@@ -114,7 +113,7 @@ define([
                 expect(uploader.$uploadArea.removeClass).toHaveBeenCalledWith('foo bar');
             });
 
-            $.each(scenarios, function (i, scenario) {
+            scenarios.forEach(function (scenario, i) {
                 it('Should add modifier classes if configuration is met in scenario ' + i, function () {
                     uploader.elementWidthModifierClasses = scenario.config;
                     spyOn(uploader.$uploadArea, 'is').and.returnValue(true);

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/form/element/wysiwyg.test.js

@@ -0,0 +1,73 @@
+/**
+ *
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'squire'
+], function (Squire) {
+    'use strict';
+
+    var injector = new Squire(),
+        mocks = {
+            'Magento_PageBuilder/js/events': jasmine.createSpyObj('events',['on', 'trigger']),
+            'Magento_PageBuilder/js/page-builder': function () {}
+        },
+        wysiwyg,
+        $;
+
+    beforeEach(function (done) {
+        injector.mock(mocks);
+        injector.require(['Magento_PageBuilder/js/form/element/wysiwyg', 'jquery'], function (UiWysiwyg, jq) {
+            var MockWysiwyg = function () {};
+
+            MockWysiwyg.prototype = Object.create(UiWysiwyg.prototype);
+            MockWysiwyg.prototype.constructor = MockWysiwyg;
+            wysiwyg = new MockWysiwyg();
+            $ = jq;
+            $.extend(wysiwyg, UiWysiwyg.defaults, {pageBuilder: {id: 'pb-wysiwyg-test'}});
+            $(document.body).append(
+                $('<div><div contenteditable="true"><a href="/login"></a><span tabindex="0"></span></div></div>')
+                    .attr('id', wysiwyg.pageBuilder.id)
+            );
+            done();
+        });
+    });
+
+    afterEach(function () {
+        try {
+            injector.clean();
+            injector.remove();
+        } catch (e) {}
+        $('#' + wysiwyg.pageBuilder.id).remove();
+    });
+
+    describe('Magento_PageBuilder/js/form/element/wysiwyg', function () {
+        describe('toggleFocusableElements', function () {
+            it('Should restore tabindex and contenteditable in fullscreen mode', function () {
+                var $div = $('#' + wysiwyg.pageBuilder.id);
+
+                wysiwyg.pageBuilder.isFullScreen = jasmine.createSpy().and.returnValue(false);
+                wysiwyg.toggleFocusableElements();
+                expect($div.find('a').attr('tabindex')).toBe('-1');
+                expect($div.find('a').data('original-tabindex')).toBe('');
+                expect($div.find('span').attr('tabindex')).toBe('-1');
+                expect($div.find('span').data('original-tabindex')).toBe('0');
+                expect($div.find('[contenteditable]').attr('contenteditable')).toBe('false');
+
+                // check full screen mode
+                wysiwyg.pageBuilder.isFullScreen = jasmine.createSpy().and.returnValue(true);
+                wysiwyg.toggleFocusableElements();
+                // check that taindex is removed from "a"
+                expect($div.find('a').attr('tabindex')).toBe(undefined);
+                expect($div.find('a').data('original-tabindex')).toBe(undefined);
+                // check that taindex is restored for "span"
+                expect($div.find('span').attr('tabindex')).toBe('0');
+                expect($div.find('span').data('original-tabindex')).toBe(undefined);
+                expect($div.find('[contenteditable]').attr('contenteditable')).toBe('true');
+            });
+        });
+    });
+});