From 0e38363d06cc852d4f15714125db52b3dce6b4ee 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     | 43 +++++++++++++++++--
 3 files changed, 50 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 6632be07a4219..8eec1cc281fb0 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 8258c17f2cfdf..b55753e113552 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 b3bbaec8fae04..ccf491f3f85b0 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,40 @@ 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 +61,6 @@ export default function NavbarMobileSidebarLayout({
         <div className="navbar-sidebar__item menu">{primaryMenu}</div>
         <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
       </div>
-    </div>
+    </dialog>
   );
 }