From 872583b5ac0b8a34c938d7879a0094a1684450df Mon Sep 17 00:00:00 2001
From: wuyangfan <1102042793@qq.com>
Date: Sun, 17 May 2026 15:54:36 +0800
Subject: [PATCH] fix(a11y): make sidebar toggle a focusable button

Replace the sidebar hamburger <label> with a <button> so keyboard
users can Tab to it and activate it with Enter/Space. Toggle the
hidden checkbox from JavaScript and dispatch change for existing
sidebar show/hide logic.

Fixes #2615

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 crates/mdbook-html/front-end/js/book.js          | 4 +++-
 crates/mdbook-html/front-end/templates/index.hbs | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/crates/mdbook-html/front-end/js/book.js b/crates/mdbook-html/front-end/js/book.js
index fe74b7106f..9ced395bad 100644
--- a/crates/mdbook-html/front-end/js/book.js
+++ b/crates/mdbook-html/front-end/js/book.js
@@ -551,14 +551,16 @@ aria-label="Show hidden lines"></button>';
         }
     });
     sidebarToggleButton.addEventListener('click', () => {
+        sidebarCheckbox.checked = !sidebarCheckbox.checked;
         /* To allow the sidebar expansion animation, we first need to put back the display. */
-        if (!sidebarCheckbox.checked) {
+        if (sidebarCheckbox.checked) {
             sidebar.style.display = '';
             // Workaround for Safari skipping the animation when changing
             // `display` and a transform in the same event loop. This forces a
             // reflow after updating the display.
             sidebar.offsetHeight;
         }
+        sidebarCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
     });
 
     function showSidebar() {
diff --git a/crates/mdbook-html/front-end/templates/index.hbs b/crates/mdbook-html/front-end/templates/index.hbs
index b1834189f9..a947d8c17b 100644
--- a/crates/mdbook-html/front-end/templates/index.hbs
+++ b/crates/mdbook-html/front-end/templates/index.hbs
@@ -143,9 +143,9 @@
                 <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">
+                        <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"}}
-                        </label>
+                        </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>