From dd443d9d6ce0f1903adb360761158a605db5ad10 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..542947c834038 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>
   );
 }