diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/ClickInsertEditImageTinyMCEButtonActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/ClickInsertEditImageTinyMCEButtonActionGroup.xml new file mode 100644 index 0000000000000..1685898743596 --- /dev/null +++ b/app/code/Magento/Cms/Test/Mftf/ActionGroup/ClickInsertEditImageTinyMCEButtonActionGroup.xml @@ -0,0 +1,19 @@ + + + + + + + Clicks on the 'Insert/edit image' TinyMCE button. + + + + + + diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/CreateImageFolderByEnterKeyActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/CreateImageFolderByEnterKeyActionGroup.xml new file mode 100644 index 0000000000000..5d8138b9c9cc7 --- /dev/null +++ b/app/code/Magento/Cms/Test/Mftf/ActionGroup/CreateImageFolderByEnterKeyActionGroup.xml @@ -0,0 +1,18 @@ + + + + + + + Creates a folder (by enter key) in the Media Gallery based on the provided Folder. + + + + + diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/DeleteFolderActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/DeleteFolderActionGroup.xml new file mode 100644 index 0000000000000..4c33b3d8ce35d --- /dev/null +++ b/app/code/Magento/Cms/Test/Mftf/ActionGroup/DeleteFolderActionGroup.xml @@ -0,0 +1,28 @@ + + + + + + + Deletes the provided folder by name from the Media Gallery. + + + + + + + + + + + + + + + diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/PressEscImageFolderActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/PressEscImageFolderActionGroup.xml new file mode 100644 index 0000000000000..85f83193e64e3 --- /dev/null +++ b/app/code/Magento/Cms/Test/Mftf/ActionGroup/PressEscImageFolderActionGroup.xml @@ -0,0 +1,27 @@ + + + + + + + Opens the 'create folder' modal, fills 'folder name' input with provided folder name, + presses escape key to cancel folder creation (close modal). + + + + + + + + + + + + + diff --git a/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml b/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml index b85c7554b58ae..aebed8c9efec0 100644 --- a/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml +++ b/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml @@ -51,6 +51,7 @@ + diff --git a/app/code/Magento/Cms/Test/Mftf/Test/AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest.xml b/app/code/Magento/Cms/Test/Mftf/Test/AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest.xml new file mode 100644 index 0000000000000..8114310e46f73 --- /dev/null +++ b/app/code/Magento/Cms/Test/Mftf/Test/AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest.xml @@ -0,0 +1,53 @@ + + + + + + + + + + <description value="Admin should be able to cancel and close 'create folder' modal window using ESC key and + to add image to new folder (using enter key) for WYSIWYG content of Block"/> + </annotations> + + <before> + <createData entity="_defaultBlock" stepKey="createPreReqBlock" /> + <actionGroup ref="LoginActionGroup" stepKey="login"/> + <actionGroup ref="EnabledWYSIWYGActionGroup" stepKey="enableWYSIWYG"/> + <actionGroup ref="SwitchToVersion4ActionGroup" stepKey="switchToTinyMCE4" /> + </before> + + <after> + <deleteData createDataKey="createPreReqBlock" stepKey="deletePreReqBlock" /> + <actionGroup ref="DisabledWYSIWYGActionGroup" stepKey="disableWYSIWYG"/> + <actionGroup ref="logout" stepKey="logout"/> + </after> + + <actionGroup ref="NavigateToCreatedCMSBlockPageActionGroup" stepKey="navigateToCreatedCMSBlockPage"> + <argument name="CMSBlockPage" value="$$createPreReqBlock$$"/> + </actionGroup> + <actionGroup ref="ClickInsertEditImageTinyMCEButtonActionGroup" stepKey="clickInsertImageIcon"/> + <actionGroup ref="ClickBrowseBtnOnUploadPopupActionGroup" stepKey="clickBrowserBtn"/> + <actionGroup ref="VerifyMediaGalleryStorageActionsActionGroup" stepKey="VerifyMediaGalleryStorageBtn"/> + + <actionGroup ref="CreateImageFolderByEnterKeyActionGroup" stepKey="CreateImageFolderByEnterKeyPress"> + <argument name="ImageFolder" value="ImageFolder"/> + </actionGroup> + + <actionGroup ref="DeleteFolderActionGroup" stepKey="DeleteCreatedFolder"> + <argument name="ImageFolder" value="ImageFolder"/> + </actionGroup> + + <actionGroup ref="PressEscImageFolderActionGroup" stepKey="CancelImageFolderCreation"> + <argument name="ImageFolder" value="ImageFolder"/> + </actionGroup> + </test> +</tests> diff --git a/app/code/Magento/Ui/view/base/web/js/modal/prompt.js b/app/code/Magento/Ui/view/base/web/js/modal/prompt.js index 13b4d55ea2787..443d35f1b0ded 100644 --- a/app/code/Magento/Ui/view/base/web/js/modal/prompt.js +++ b/app/code/Magento/Ui/view/base/web/js/modal/prompt.js @@ -27,6 +27,44 @@ define([ value: '', validation: false, validationRules: [], + keyEventHandlers: { + + /** + * Enter key press handler, + * submit result and close modal window + * @param {Object} event - event + */ + enterKey: function (event) { + if (this.options.isOpen && this.modal.find(document.activeElement).length || + this.options.isOpen && this.modal[0] === document.activeElement) { + this.closeModal(true); + event.preventDefault(); + } + }, + + /** + * Tab key press handler, + * set focus to elements + */ + tabKey: function () { + if (document.activeElement === this.modal[0]) { + this._setFocus('start'); + } + }, + + /** + * Escape key press handler, + * cancel and close modal window + * @param {Object} event - event + */ + escapeKey: function (event) { + if (this.options.isOpen && this.modal.find(document.activeElement).length || + this.options.isOpen && this.modal[0] === document.activeElement) { + this.closeModal(); + event.preventDefault(); + } + } + }, actions: { /**