From b7ca6db531ec54144f604b89e9e697d6d6475f7d Mon Sep 17 00:00:00 2001
From: Hidde de Vries <hidde@hiddedevries.nl>
Date: Thu, 21 Nov 2024 11:23:00 +0100
Subject: [PATCH 1/2] fix: only render secondaryMenu if it should be shown

fixes #10704

Issue was that with keyboard, you could reach the primary menu, while it was made invisible by CSS. By not rendering secondaryMenu based on the secondaryMenuShown logic, , we make sure it isn't accessible by keyboard while it is hidden.
---
 .../src/theme/Navbar/MobileSidebar/Layout/index.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index b3bbaec8fae0..84ebde5e9cc6 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -19,12 +19,12 @@ export default function NavbarMobileSidebarLayout({
   return (
     <div className="navbar-sidebar">
       {header}
-      <div
-        className={clsx('navbar-sidebar__items', {
-          'navbar-sidebar__items--show-secondary': secondaryMenuShown,
-        })}>
-        <div className="navbar-sidebar__item menu">{primaryMenu}</div>
-        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
+      <div className={clsx('navbar-sidebar__items')}>
+        {secondaryMenuShown ? (
+          <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
+        ) : (
+          <div className="navbar-sidebar__item menu">{primaryMenu}</div>
+        )}
       </div>
     </div>
   );

From 38ea9ae6ab06cc364807b83d7dc714693cea9b54 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 27 Feb 2025 16:29:16 +0100
Subject: [PATCH 2/2] use HTML inert on invisible mobile drawer pane

---
 .../Navbar/MobileSidebar/Layout/index.tsx     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index 9d623fcd83a8..7afe2f823c6f 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -5,19 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {version, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 
-function NavbarMobileSidebarPanel({children}: {children: ReactNode}) {
+// TODO Docusaurus v4: remove temporary inert workaround
+//  See https://github.com/facebook/react/issues/17157
+//  See https://github.com/radix-ui/themes/pull/509
+function inertProps(inert: boolean) {
+  const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19;
+  if (isBeforeReact19) {
+    return {inert: inert ? '' : undefined};
+  }
+  return {inert};
+}
+
+function NavbarMobileSidebarPanel({
+  children,
+  inert,
+}: {
+  children: ReactNode;
+  inert: boolean;
+}) {
   return (
     <div
       className={clsx(
         ThemeClassNames.layout.navbar.mobileSidebar.panel,
         'navbar-sidebar__item menu',
-      )}>
+      )}
+      {...inertProps(inert)}>
       {children}
     </div>
   );
@@ -40,8 +58,12 @@ export default function NavbarMobileSidebarLayout({
         className={clsx('navbar-sidebar__items', {
           'navbar-sidebar__items--show-secondary': secondaryMenuShown,
         })}>
-        <NavbarMobileSidebarPanel>{primaryMenu}</NavbarMobileSidebarPanel>
-        <NavbarMobileSidebarPanel>{secondaryMenu}</NavbarMobileSidebarPanel>
+        <NavbarMobileSidebarPanel inert={secondaryMenuShown}>
+          {primaryMenu}
+        </NavbarMobileSidebarPanel>
+        <NavbarMobileSidebarPanel inert={!secondaryMenuShown}>
+          {secondaryMenu}
+        </NavbarMobileSidebarPanel>
       </div>
     </div>
   );