[FIX] website: allow keyboard events on slideshow right away

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>

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({

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">