fix(theme-classic): fix tab focus bug in dropdown (#8697) (#8699)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
facebook · Feb 23, 2023 · 1293970 · 1293970
1 parent f8edeb0
commit 1293970
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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;
+}