From 73d6edfcafc08beee2ca22beae24a0e28fc21a2f Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <contact@guillaume-gomez.fr>
Date: Tue, 26 May 2026 18:10:36 +0200
Subject: [PATCH] Add possibility to "zoom out" using the escape key

---
 crates/mdbook-html/front-end/js/book.js |  9 +++++++++
 tests/gui/image-zoom.goml               | 27 +++++++++++++++++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/crates/mdbook-html/front-end/js/book.js b/crates/mdbook-html/front-end/js/book.js
index fe74b710..3790ccd8 100644
--- a/crates/mdbook-html/front-end/js/book.js
+++ b/crates/mdbook-html/front-end/js/book.js
@@ -658,6 +658,12 @@ aria-label="Show hidden lines"></button>';
 })();
 
 (function chapterNavigation() {
+    function zoomOutImages() {
+        for (const elem of Array.from(document.querySelectorAll('input.checkbox-img'))) {
+            elem.checked = false;
+        }
+    }
+
     document.addEventListener('keydown', function(e) {
         if (e.altKey ||
             e.ctrlKey ||
@@ -724,6 +730,9 @@ aria-label="Show hidden lines"></button>';
             e.preventDefault();
             showHelp();
             break;
+        case 'Escape':
+            zoomOutImages();
+            break;
         }
 
         // Rest of the keys are only active when the Shift key is not pressed
diff --git a/tests/gui/image-zoom.goml b/tests/gui/image-zoom.goml
index 0dfe9d9e..79df878c 100644
--- a/tests/gui/image-zoom.goml
+++ b/tests/gui/image-zoom.goml
@@ -11,17 +11,36 @@ define-function: (
     },
 )
 
+define-function: (
+    "check-image-zoomed-in",
+    [],
+    block {
+        // The image wrapper should now be displayed and have a "zoom-out" cursor.
+        assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
+        // Same for the image it contains.
+        assert-css: (
+            ".checkbox-label > .img-wrapper img",
+            {"display": "block", "cursor": "zoom-out"},
+        )
+    },
+)
+
 go-to: |DOC_PATH| + "basic/index.html"
 call-function: ("check-image-not-zoomed-in", {})
 
 // We click on the image to "zoom in".
 click: ".checkbox-label > img"
-// The image wrapper should now be displayed and have a "zoom-out" cursor.
-assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
-// Same for the image it contains.
-assert-css: (".checkbox-label > .img-wrapper img", {"display": "block", "cursor": "zoom-out"})
+call-function: ("check-image-zoomed-in", {})
 
 // We click on the wrapper to "zoom out".
 click: ".checkbox-label > img"
 // We check that everything is back to the previous state.
 call-function: ("check-image-not-zoomed-in", {})
+
+// We test that the "escape" key also hides the "zoomed in" image.
+// We click on the image to "zoom in".
+click: ".checkbox-label > img"
+call-function: ("check-image-zoomed-in", {})
+press-key: "Escape"
+// We check that everything is back to the previous state.
+call-function: ("check-image-not-zoomed-in", {})