From db7581ce49871925d73fe9a11b1ba435750b3cba Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Wed, 2 Aug 2023 12:48:47 +0800
Subject: [PATCH] FIX: intercept escape in lightbox and prevent default
 (#22923)

The escape key is used as a shortcut to escape the Discourse Lightbox. However, some browsers also use the escape key to exit fullscreen mode.

This change is to allow escaping the lightbox when browser is in fullscreen mode, while preventing any behavior associated with the Escape key (such as exiting fullscreen). This has to be done on the keydown event, as this means we can handle our logic and then preventDefault before the browser tries to exit fullscreen.
---
 .../discourse/app/components/d-lightbox.hbs          |  1 +
 .../discourse/app/components/d-lightbox.js           | 12 ++++++++----
 .../discourse/tests/acceptance/d-lightbox-test.js    |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-lightbox.hbs b/app/assets/javascripts/discourse/app/components/d-lightbox.hbs
index fc7d3ca867d..ee80d481c1e 100644
--- a/app/assets/javascripts/discourse/app/components/d-lightbox.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-lightbox.hbs
@@ -15,6 +15,7 @@
       class="d-lightbox__content"
       style={{this.CSSVars}}
       aria-labelledby={{this.titleElementId}}
+      {{on "keydown" this.onKeydown passive=false capture=true}}
       {{on "keyup" this.onKeyup passive=true capture=true}}
     >
       <div class="d-lightbox__focus-trap" tabindex="0"></div>
diff --git a/app/assets/javascripts/discourse/app/components/d-lightbox.js b/app/assets/javascripts/discourse/app/components/d-lightbox.js
index a2cb4d8a262..fa6bc0cae23 100644
--- a/app/assets/javascripts/discourse/app/components/d-lightbox.js
+++ b/app/assets/javascripts/discourse/app/components/d-lightbox.js
@@ -357,6 +357,14 @@ export default class DLightbox extends Component {
     this.hasExpandedTitle = !this.hasExpandedTitle;
   }
 
+  @bind
+  onKeydown(event) {
+    if (event.key === KEYBOARD_SHORTCUTS.CLOSE) {
+      event.preventDefault();
+      return this.close();
+    }
+  }
+
   @bind
   onKeyup({ key }) {
     if (KEYBOARD_SHORTCUTS.PREVIOUS.includes(key)) {
@@ -367,10 +375,6 @@ export default class DLightbox extends Component {
       return this.showNextItem();
     }
 
-    if (key === KEYBOARD_SHORTCUTS.CLOSE) {
-      return this.close();
-    }
-
     if (key === KEYBOARD_SHORTCUTS.ZOOM) {
       return this.toggleZoom();
     }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js b/app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js
index a5061fbfc88..edfbe94660e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js
@@ -626,7 +626,7 @@ acceptance("Experimental Lightbox - interaction", function (needs) {
     requestFullscreenStub.restore();
     exitFullscreenStub.restore();
 
-    await triggerKeyEvent(SELECTORS.LIGHTBOX_CONTENT, "keyup", "Escape");
+    await triggerKeyEvent(SELECTORS.LIGHTBOX_CONTENT, "keydown", "Escape");
 
     assert.dom(SELECTORS.LIGHTBOX_CONTENT).doesNotExist();
   });