From 9cbc7a2dc7324645a255b78eb50ebe4a36aede81 Mon Sep 17 00:00:00 2001
From: "Robin Lejeune (role)" <role@odoo.com>
Date: Wed, 28 Feb 2024 10:01:31 +0000
Subject: [PATCH] [FIX] website: allow keyboard events on slideshow right away
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a slideshow opens, the keyboard events don't work right off the
bat. You first need to click on one of the arrows before being able to
interact with the keyboard, which defeats the purpose.

Steps to reproduce:
- Drop an Images Wall snippet and save.
- Click on an image: the slideshow appears.
=> Pressing left, right or escape doesn't work.
- Switch to the next image.
=> Pressing left, right or escape now works.

closes odoo/odoo#157126

X-original-commit: 32c6f7e7688eb3b05d569e1895e8fc102f71baf4
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
---
 .../static/src/snippets/s_image_gallery/000.js     | 14 ++++++++++++++
 .../static/src/snippets/s_image_gallery/000.xml    |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index 7334d992f0e..45d9e624c64 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -67,9 +67,11 @@ const GalleryWidget = publicWidget.Widget.extend({
             interval: milliseconds || 0,
             id: uniqueId("slideshow_"),
         }));
+        this.__onModalKeydown = this._onModalKeydown.bind(this);
         this.$modal.on('hidden.bs.modal', function () {
             $(this).hide();
             $(this).siblings().filter('.modal-backdrop').remove(); // bootstrap leaves a modal-backdrop
+            this.removeEventListener("keydown", self.__onModalKeydown);
             $(this).remove();
             self.$modal = undefined;
         });
@@ -78,11 +80,23 @@ const GalleryWidget = publicWidget.Widget.extend({
                 editableMode: false,
                 $target: self.$modal.find('.modal-body.o_slideshow'),
             });
+            this.addEventListener("keydown", self.__onModalKeydown);
         });
         this.$modal.appendTo(document.body);
         const modalBS = new Modal(this.$modal[0], {keyboard: true, backdrop: true});
         modalBS.show();
     },
+    _onModalKeydown(ev) {
+        if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
+            const side = ev.key === "ArrowLeft" ? "prev" : "next";
+            this.$modal[0].querySelector(`.carousel-control-${side}`).click();
+        }
+        if (ev.key === "Escape") {
+            // If the user is connected as an editor, prevent the backend header
+            // from collapsing.
+            ev.stopPropagation();
+        }
+    },
 });
 
 const GallerySliderWidget = publicWidget.Widget.extend({
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.xml b/addons/website/static/src/snippets/s_image_gallery/000.xml
index e78d7b1c5d3..12fd7657206 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.xml
+++ b/addons/website/static/src/snippets/s_image_gallery/000.xml
@@ -53,7 +53,7 @@
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow.lightbox">
-        <div role="dialog" class="modal o_technical_modal fade s_gallery_lightbox p-0" aria-label="Image Gallery Dialog">
+        <div role="dialog" class="modal o_technical_modal fade s_gallery_lightbox p-0" aria-label="Image Gallery Dialog" tabindex="-1">
             <div class="modal-dialog m-0" role="Picture Gallery"
                 t-attf-style="">
                 <div class="modal-content bg-transparent modal-fullscreen">