diff --git a/crates/mdbook-html/front-end/css/chrome.css b/crates/mdbook-html/front-end/css/chrome.css
index bab38894f4..84eb67ba80 100644
--- a/crates/mdbook-html/front-end/css/chrome.css
+++ b/crates/mdbook-html/front-end/css/chrome.css
@@ -94,6 +94,9 @@ html.sidebar-visible #mdbook-menu-bar {
 html:not(.js) .left-buttons button {
     display: none;
 }
+html.js #mdbook-sidebar-toggle-nojs {
+    display: none;
+}
 
 .menu-title {
     display: inline-block;
diff --git a/crates/mdbook-html/front-end/js/book.js b/crates/mdbook-html/front-end/js/book.js
index 62d7c4cc87..ab20472c80 100644
--- a/crates/mdbook-html/front-end/js/book.js
+++ b/crates/mdbook-html/front-end/js/book.js
@@ -548,6 +548,8 @@ aria-label="Show hidden lines"></button>';
             // reflow after updating the display.
             sidebar.offsetHeight;
         }
+        sidebarCheckbox.checked = !sidebarCheckbox.checked;
+        sidebarCheckbox.dispatchEvent(new Event('change'));
     });
 
     function showSidebar() {
diff --git a/crates/mdbook-html/front-end/templates/index.hbs b/crates/mdbook-html/front-end/templates/index.hbs
index b1834189f9..78a56c59e8 100644
--- a/crates/mdbook-html/front-end/templates/index.hbs
+++ b/crates/mdbook-html/front-end/templates/index.hbs
@@ -143,9 +143,12 @@
                 <div id="mdbook-menu-bar-hover-placeholder"></div>
                 <div id="mdbook-menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">
-                        <label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
+                        <label id="mdbook-sidebar-toggle-nojs" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
                             {{fa "solid" "bars"}}
                         </label>
+                        <button id="mdbook-sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
+                            {{fa "solid" "bars"}}
+                        </button>
                         <button id="mdbook-theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="mdbook-theme-list">
                             {{fa "solid" "paintbrush"}}
                         </button>
diff --git a/tests/gui/sidebar.goml b/tests/gui/sidebar.goml
index 50dc71a940..6c67406f5d 100644
--- a/tests/gui/sidebar.goml
+++ b/tests/gui/sidebar.goml
@@ -11,6 +11,17 @@ store-value: (sidebar_storage_value, "mdbook-sidebar")
 store-value: (sidebar_storage_hidden_value, "hidden")
 store-value: (sidebar_storage_displayed_value, "visible")
 
+focus: "#mdbook-sidebar-toggle"
+assert-document-property: {"activeElement"."id": "mdbook-sidebar-toggle"}
+press-key: 'Enter'
+wait-for-css: ("#mdbook-sidebar", {"display": "none"})
+assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_hidden_value|}
+press-key: 'Enter'
+wait-for-css-false: ("#mdbook-sidebar", {"display": "none"})
+// `transform` is 0.3s so we need to wait a bit (0.5s) to ensure the animation is done.
+wait-for: 5000
+assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
+
 define-function: (
     "hide-sidebar",
     [],