From 0e303660dbe08418c6653059dca7fa85cdf8f770 Mon Sep 17 00:00:00 2001
From: Adarsh Manickam <amanickam@ztech.io>
Date: Fri, 15 Nov 2019 00:10:37 +0530
Subject: [PATCH] Resolved Adobe issue 691

---
 .../base/web/js/grid/columns/image-preview.js | 49 +++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js
index 1ef2ebf6594fa..7cbbfdab28ba1 100644
--- a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js
+++ b/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js
@@ -4,8 +4,9 @@
  */
 define([
     'jquery',
-    'Magento_Ui/js/grid/columns/column'
-], function ($, Column) {
+    'Magento_Ui/js/grid/columns/column',
+    'Magento_Ui/js/lib/key-codes'
+], function ($, Column, keyCodes) {
     'use strict';
 
     return Column.extend({
@@ -32,6 +33,18 @@ define([
             }
         },
 
+        /**
+         * Initialize image preview component
+         *
+         * @returns {Object}
+         */
+        initialize: function () {
+            this._super();
+            this.setNavigationListener();
+
+            return this;
+        },
+
         /**
          * Init observable variables
          * @return {Object}
@@ -174,6 +187,36 @@ define([
                 block: 'center',
                 inline: 'nearest'
             });
-        }
+        },
+
+        /**
+         * Set image preview keyboard navigation listener
+         */
+        setNavigationListener: function () {
+            var imageIndex, endIndex, key,
+                startIndex = 0,
+                imageColumnSelector = '.masonry-image-column',
+                adobeModalSelector = '.adobe-stock-modal',
+                imageGridSelector = '.masonry-image-grid';
+
+            $(document).on('keydown', function(e) {
+                key = keyCodes[e.keyCode];
+                endIndex = $(imageGridSelector)[0].children.length - 1;
+
+                if($(this.previewImageSelector).length > 0) {
+                    imageIndex = $(this.previewImageSelector)
+                        .parents(imageColumnSelector)
+                        .data('repeatIndex');
+                }
+
+                if($(adobeModalSelector).hasClass('_show')) {
+                    if(key === 'pageLeftKey' && imageIndex !== startIndex) {
+                        $(this.previewImageSelector + ' .action-previous').click();
+                    } else if (key === 'pageRightKey' && imageIndex !== endIndex) {
+                        $(this.previewImageSelector + ' .action-next').click();
+                    }
+                }
+            });
+        },
     });
 });