From dbee3b04119be1b53b5bc6b4c89d232df0930045 Mon Sep 17 00:00:00 2001
From: Hidde de Vries <hidde@hiddedevries.nl>
Date: Thu, 21 Nov 2024 12:02:35 +0100
Subject: [PATCH] fix: use native modal dialog and use its backdrop

This uses the `<dialog>` element with `showModal()` method,
so that we can leverage the browser's built-in ways to make
this dialog modal, including keyboard handling (Esc), backdrop
and focus trap.

Fixes the issue that it was possible to tab outside the dialog
while it was open.

This removes the backdrop component, as the `<dialog>` element
comes with a backdrop built-in, that is styled via CSS instead.
---
 .../src/theme/Navbar/Layout/index.tsx         | 13 +-----
 .../src/theme/Navbar/Layout/styles.module.css | 14 ++++--
 .../Navbar/MobileSidebar/Layout/index.tsx     | 45 +++++++++++++++++--
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx
index 6632be07a421..8eec1cc281fb 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {
@@ -18,16 +18,6 @@ import type {Props} from '@theme/Navbar/Layout';
 
 import styles from './styles.module.css';
 
-function NavbarBackdrop(props: ComponentProps<'div'>) {
-  return (
-    <div
-      role="presentation"
-      {...props}
-      className={clsx('navbar-sidebar__backdrop', props.className)}
-    />
-  );
-}
-
 export default function NavbarLayout({children}: Props): JSX.Element {
   const {
     navbar: {hideOnScroll, style},
@@ -56,7 +46,6 @@ export default function NavbarLayout({children}: Props): JSX.Element {
         },
       )}>
       {children}
-      <NavbarBackdrop onClick={mobileSidebar.toggle} />
       <NavbarMobileSidebar />
     </nav>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css
index 8258c17f2cfd..b55753e11355 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css
@@ -5,10 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.navbarHideable {
-  transition: transform var(--ifm-transition-fast) ease;
+.navbar-sidebar {
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+  border: 0;
+  height: 100%;
+  max-height: 100%;
 }
 
-.navbarHidden {
-  transform: translate3d(0, calc(-100% - 2px), 0);
+.navbar-sidebar::backdrop {
+  background-color: #0009;
 }
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..10d3eadd536b 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,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import clsx from 'clsx';
-import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import {
+  useNavbarMobileSidebar,
+  useNavbarSecondaryMenu,
+} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 
 export default function NavbarMobileSidebarLayout({
@@ -16,8 +19,42 @@ export default function NavbarMobileSidebarLayout({
   secondaryMenu,
 }: Props): JSX.Element {
   const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
+  const navbarModalDialog = useRef<HTMLDialogElement | null>(null);
+  const {shown, toggle} = useNavbarMobileSidebar();
+
+  useEffect(() => {
+    const {current: dialogEl} = navbarModalDialog;
+
+    if (!dialogEl) {
+      return;
+    }
+    if (shown) {
+      dialogEl.showModal();
+    } else {
+      dialogEl.close();
+    }
+  });
+
+  useEffect(() => {
+    const {current: dialogEl} = navbarModalDialog;
+
+    function toggleOnEscape(e: {key: string}) {
+      if (e.key === 'Escape') {
+        if (shown) {
+          toggle();
+        }
+      }
+    }
+
+    dialogEl?.addEventListener('keydown', toggleOnEscape);
+
+    return () => {
+      dialogEl?.removeEventListener('keydown', toggleOnEscape);
+    };
+  }, [shown, toggle]);
+
   return (
-    <div className="navbar-sidebar">
+    <dialog className="navbar-sidebar" ref={navbarModalDialog}>
       {header}
       <div
         className={clsx('navbar-sidebar__items', {
@@ -26,6 +63,6 @@ export default function NavbarMobileSidebarLayout({
         <div className="navbar-sidebar__item menu">{primaryMenu}</div>
         <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
       </div>
-    </div>
+    </dialog>
   );
 }