From a12c6f811914d55eb3e5f3555ae9a9b989ae4dbb Mon Sep 17 00:00:00 2001
From: Kagan <34136752+kagankan@users.noreply.github.com>
Date: Fri, 24 Feb 2023 00:56:06 +0900
Subject: [PATCH] fix(theme-classic): fix tab focus bug in dropdown (#8697)
 (#8699)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
---
 .../theme/NavbarItem/DropdownNavbarItem.tsx   | 22 +++++--------------
 .../_pages tests/navbar-dropdown-tests.mdx    | 11 ++++++++++
 website/_dogfooding/dogfooding.css            |  4 ++++
 3 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 website/_dogfooding/_pages tests/navbar-dropdown-tests.mdx

diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx
index f6fc318bbcae..bc315a1fa750 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx
@@ -54,7 +54,9 @@ function DropdownNavbarItemDesktop({
   const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
       if (
         !dropdownRef.current ||
         dropdownRef.current.contains(event.target as Node)
@@ -66,10 +68,12 @@ function DropdownNavbarItemDesktop({
 
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
     };
   }, [dropdownRef]);
 
@@ -100,22 +104,6 @@ function DropdownNavbarItemDesktop({
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
-            onKeyDown={(e) => {
-              if (i === items.length - 1 && e.key === 'Tab') {
-                e.preventDefault();
-                setShowDropdown(false);
-                const nextNavbarItem = dropdownRef.current!.nextElementSibling;
-                if (nextNavbarItem) {
-                  const targetItem =
-                    nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem
-                      : // Next item is another dropdown; focus on the inner
-                        // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a')!;
-                  targetItem.focus();
-                }
-              }
-            }}
             activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}
diff --git a/website/_dogfooding/_pages tests/navbar-dropdown-tests.mdx b/website/_dogfooding/_pages tests/navbar-dropdown-tests.mdx
new file mode 100644
index 000000000000..b48c0e20ae4a
--- /dev/null
+++ b/website/_dogfooding/_pages tests/navbar-dropdown-tests.mdx	
@@ -0,0 +1,11 @@
+# navbar-dropdown-tests
+
+<div id="navbar-dropdown-tests">
+
+1. Make sure that the theme switcher is placed immediately after the language switcher in the navbar.
+2. Press `Tab` several times to focus language switcher.
+3. Press `Enter` to open language switcher.
+4. Press `Tab` several times to exit language switcher.
+5. Check if the theme selection button is in focus immediately after the last item.
+
+</div>
diff --git a/website/_dogfooding/dogfooding.css b/website/_dogfooding/dogfooding.css
index f1864ef8fb82..277069c54073 100644
--- a/website/_dogfooding/dogfooding.css
+++ b/website/_dogfooding/dogfooding.css
@@ -24,3 +24,7 @@ html.plugin-pages.plugin-id-pages-tests .navbar {
 #z-index-test {
   z-index: 100;
 }
+
+html:has(#navbar-dropdown-tests) .navbar__item.dropdown ~ a {
+  display: none;
+}