From 95d9aed0121e1a0cb6ddf8493e7c20f58fb4a460 Mon Sep 17 00:00:00 2001
From: macuzi <lamberto.asghedom@sentry.io>
Date: Thu, 7 May 2026 09:45:08 -0700
Subject: [PATCH 1/5] fix(a11y): render nav dropdowns inline for correct
 keyboard tab order

---
 src/components/TopNavClient.tsx | 198 ++++++++++++++++++--------------
 1 file changed, 109 insertions(+), 89 deletions(-)

diff --git a/src/components/TopNavClient.tsx b/src/components/TopNavClient.tsx
index 68c71629df9548..8f6c012788e6f8 100644
--- a/src/components/TopNavClient.tsx
+++ b/src/components/TopNavClient.tsx
@@ -11,9 +11,10 @@ import platformSelectorStyles from './platformSelector/style.module.scss';
 
 const mainSections = mainSectionsWithDropdowns;
 
-// Add a helper hook for portal dropdown positioning
+// Helper hook for dropdown positioning
+// Returns both absolute (for portals) and fixed (for inline) coordinates
 function useDropdownPosition(triggerRef, open) {
-  const [position, setPosition] = useState({top: 0, left: 0, width: 0});
+  const [position, setPosition] = useState({top: 0, left: 0, width: 0, fixedTop: 0, fixedLeft: 0});
   useEffect(() => {
     function updatePosition() {
       if (triggerRef.current && open) {
@@ -22,6 +23,8 @@ function useDropdownPosition(triggerRef, open) {
           top: rect.bottom + window.scrollY,
           left: rect.left + window.scrollX,
           width: rect.width,
+          fixedTop: rect.bottom,
+          fixedLeft: rect.left,
         });
       }
     }
@@ -139,8 +142,29 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
         }
       }
     }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        if (conceptsDropdownOpen) {
+          setConceptsDropdownOpen(false);
+          conceptsBtnRef.current?.focus();
+        }
+        if (moreDropdownOpen) {
+          setMoreDropdownOpen(false);
+          moreBtnRef.current?.focus();
+        }
+        if (platformDropdownOpen) {
+          setPlatformDropdownOpen(false);
+          setPlatformDropdownByClick(false);
+          platformBtnRef.current?.focus();
+        }
+      }
+    }
     document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
   }, [
     platformDropdownOpen,
     platformDropdownByClick,
@@ -298,6 +322,47 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                         />
                       </svg>
                     </button>
+                    {conceptsDropdownOpen && (
+                      <div
+                        ref={conceptsDropdownRef}
+                        className="bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
+                        style={{
+                          position: 'fixed',
+                          top: conceptsPosition.fixedTop,
+                          left: conceptsPosition.fixedLeft,
+                          minWidth: conceptsPosition.width,
+                          overflowY: 'auto',
+                          scrollbarWidth: 'none',
+                          msOverflowStyle: 'none',
+                        }}
+                        onClick={e => e.stopPropagation()}
+                        onMouseEnter={() => {
+                          clearTimeout(closeTimers.current.concepts);
+                        }}
+                        onMouseLeave={() => {
+                          closeTimers.current.concepts = setTimeout(() => {
+                            setConceptsDropdownOpen(false);
+                          }, 150);
+                        }}
+                      >
+                        <style>{`
+                          .dark .concepts-dropdown-link {
+                            color: #fff !important;
+                          }
+                        `}</style>
+                        {mainSections
+                          .find(s => s.label === 'Concepts')
+                          ?.dropdown?.map(dropdown => (
+                            <Link
+                              key={dropdown.href}
+                              href={dropdown.href}
+                              className="concepts-dropdown-link block px-4 py-2 text-[var(--gray-12)] dark:text-white hover:bg-[var(--gray-3)] dark:hover:bg-[var(--gray-8)] rounded text-[0.875rem] font-normal font-sans no-underline"
+                            >
+                              {dropdown.label}
+                            </Link>
+                          ))}
+                      </div>
+                    )}
                   </div>
                 ) : section.label === 'Manage' ? (
                   <div
@@ -350,6 +415,47 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                         />
                       </svg>
                     </button>
+                    {moreDropdownOpen && (
+                      <div
+                        ref={moreDropdownRef}
+                        className="bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
+                        style={{
+                          position: 'fixed',
+                          top: morePosition.fixedTop,
+                          left: morePosition.fixedLeft,
+                          minWidth: morePosition.width,
+                          overflowY: 'auto',
+                          scrollbarWidth: 'none',
+                          msOverflowStyle: 'none',
+                        }}
+                        onClick={e => e.stopPropagation()}
+                        onMouseEnter={() => {
+                          clearTimeout(closeTimers.current.more);
+                        }}
+                        onMouseLeave={() => {
+                          closeTimers.current.more = setTimeout(() => {
+                            setMoreDropdownOpen(false);
+                          }, 150);
+                        }}
+                      >
+                        <style>{`
+                          .dark .more-dropdown-link {
+                            color: #fff !important;
+                          }
+                        `}</style>
+                        {mainSections
+                          .find(s => s.label === 'Manage')
+                          ?.dropdown?.map(dropdown => (
+                            <Link
+                              key={dropdown.href}
+                              href={dropdown.href}
+                              className="more-dropdown-link block px-4 py-2 text-[var(--gray-12)] dark:text-white hover:bg-[var(--gray-3)] dark:hover:bg-[var(--gray-8)] rounded text-[0.875rem] font-normal font-sans no-underline"
+                            >
+                              {dropdown.label}
+                            </Link>
+                          ))}
+                      </div>
+                    )}
                   </div>
                 ) : section.label === 'SDKs' ? (
                   <a
@@ -501,92 +607,6 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
           </div>,
           document.body
         )}
-      {conceptsDropdownOpen &&
-        ReactDOM.createPortal(
-          <div
-            ref={conceptsDropdownRef}
-            className="absolute left-0 bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
-            style={{
-              position: 'absolute',
-              top: conceptsPosition.top,
-              left: conceptsPosition.left,
-              minWidth: conceptsPosition.width,
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              msOverflowStyle: 'none',
-            }}
-            onClick={e => e.stopPropagation()}
-            onMouseEnter={() => {
-              clearTimeout(closeTimers.current.concepts);
-            }}
-            onMouseLeave={() => {
-              closeTimers.current.concepts = setTimeout(() => {
-                setConceptsDropdownOpen(false);
-              }, 150);
-            }}
-          >
-            <style>{`
-            .dark .concepts-dropdown-link {
-              color: #fff !important;
-            }
-          `}</style>
-            {mainSections
-              .find(s => s.label === 'Concepts')
-              ?.dropdown?.map(dropdown => (
-                <Link
-                  key={dropdown.href}
-                  href={dropdown.href}
-                  className="concepts-dropdown-link block px-4 py-2 text-[var(--gray-12)] dark:text-white hover:bg-[var(--gray-3)] dark:hover:bg-[var(--gray-8)] rounded text-[0.875rem] font-normal font-sans no-underline"
-                >
-                  {dropdown.label}
-                </Link>
-              ))}
-          </div>,
-          document.body
-        )}
-      {moreDropdownOpen &&
-        ReactDOM.createPortal(
-          <div
-            ref={moreDropdownRef}
-            className="absolute left-0 bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
-            style={{
-              position: 'absolute',
-              top: morePosition.top,
-              left: morePosition.left,
-              minWidth: morePosition.width,
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              msOverflowStyle: 'none',
-            }}
-            onClick={e => e.stopPropagation()}
-            onMouseEnter={() => {
-              clearTimeout(closeTimers.current.more);
-            }}
-            onMouseLeave={() => {
-              closeTimers.current.more = setTimeout(() => {
-                setMoreDropdownOpen(false);
-              }, 150);
-            }}
-          >
-            <style>{`
-            .dark .more-dropdown-link {
-              color: #fff !important;
-            }
-          `}</style>
-            {mainSections
-              .find(s => s.label === 'Manage')
-              ?.dropdown?.map(dropdown => (
-                <Link
-                  key={dropdown.href}
-                  href={dropdown.href}
-                  className="more-dropdown-link block px-4 py-2 text-[var(--gray-12)] dark:text-white hover:bg-[var(--gray-3)] dark:hover:bg-[var(--gray-8)] rounded text-[0.875rem] font-normal font-sans no-underline"
-                >
-                  {dropdown.label}
-                </Link>
-              ))}
-          </div>,
-          document.body
-        )}
       <style>{`
         .scrollbar-hide::-webkit-scrollbar {
           display: none;

From 389fcfa4464b3c2a98f25bb3e1641b7bb8b112f1 Mon Sep 17 00:00:00 2001
From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 03:51:31 +0000
Subject: [PATCH 2/5] [getsentry/action-github-commit] Auto commit

---
 src/components/TopNavClient.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/TopNavClient.tsx b/src/components/TopNavClient.tsx
index 8f6c012788e6f8..fa083c9d568922 100644
--- a/src/components/TopNavClient.tsx
+++ b/src/components/TopNavClient.tsx
@@ -14,7 +14,13 @@ const mainSections = mainSectionsWithDropdowns;
 // Helper hook for dropdown positioning
 // Returns both absolute (for portals) and fixed (for inline) coordinates
 function useDropdownPosition(triggerRef, open) {
-  const [position, setPosition] = useState({top: 0, left: 0, width: 0, fixedTop: 0, fixedLeft: 0});
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    fixedTop: 0,
+    fixedLeft: 0,
+  });
   useEffect(() => {
     function updatePosition() {
       if (triggerRef.current && open) {

From ba3b3ef024c6b4e2db280bf6a4f67c9cb1170193 Mon Sep 17 00:00:00 2001
From: macuzi <lamberto.asghedom@sentry.io>
Date: Fri, 8 May 2026 09:41:02 -0700
Subject: [PATCH 3/5] fix(a11y): prevent dropdown flash by initializing
 position to null

---
 src/components/TopNavClient.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/TopNavClient.tsx b/src/components/TopNavClient.tsx
index fa083c9d568922..61694ea13f9b7f 100644
--- a/src/components/TopNavClient.tsx
+++ b/src/components/TopNavClient.tsx
@@ -14,13 +14,7 @@ const mainSections = mainSectionsWithDropdowns;
 // Helper hook for dropdown positioning
 // Returns both absolute (for portals) and fixed (for inline) coordinates
 function useDropdownPosition(triggerRef, open) {
-  const [position, setPosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-    fixedTop: 0,
-    fixedLeft: 0,
-  });
+  const [position, setPosition] = useState<{top: number; left: number; width: number; fixedTop: number; fixedLeft: number} | null>(null);
   useEffect(() => {
     function updatePosition() {
       if (triggerRef.current && open) {
@@ -328,7 +322,7 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                         />
                       </svg>
                     </button>
-                    {conceptsDropdownOpen && (
+                    {conceptsDropdownOpen && conceptsPosition && (
                       <div
                         ref={conceptsDropdownRef}
                         className="bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
@@ -421,7 +415,7 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                         />
                       </svg>
                     </button>
-                    {moreDropdownOpen && (
+                    {moreDropdownOpen && morePosition && (
                       <div
                         ref={moreDropdownRef}
                         className="bg-white dark:bg-black border border-[var(--gray-a3)] dark:border-[var(--gray-7)] shadow-lg z-50 min-w-[220px] p-2 rounded-b-md rounded-t-none"
@@ -494,6 +488,7 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
       </div>
       {/* Portal-based dropdowns */}
       {platformDropdownOpen &&
+        sdksPosition &&
         ReactDOM.createPortal(
           <div
             ref={platformDropdownRef}

From dbc6c3c8daf2147153a8bbf77fd237b51258ec02 Mon Sep 17 00:00:00 2001
From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 16:48:27 +0000
Subject: [PATCH 4/5] [getsentry/action-github-commit] Auto commit

---
 src/components/TopNavClient.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/TopNavClient.tsx b/src/components/TopNavClient.tsx
index 61694ea13f9b7f..99199f91578586 100644
--- a/src/components/TopNavClient.tsx
+++ b/src/components/TopNavClient.tsx
@@ -14,7 +14,13 @@ const mainSections = mainSectionsWithDropdowns;
 // Helper hook for dropdown positioning
 // Returns both absolute (for portals) and fixed (for inline) coordinates
 function useDropdownPosition(triggerRef, open) {
-  const [position, setPosition] = useState<{top: number; left: number; width: number; fixedTop: number; fixedLeft: number} | null>(null);
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+    width: number;
+    fixedTop: number;
+    fixedLeft: number;
+  } | null>(null);
   useEffect(() => {
     function updatePosition() {
       if (triggerRef.current && open) {

From a847ee78520f304e7b04e7be06470b4588f8f61a Mon Sep 17 00:00:00 2001
From: macuzi <lamberto.asghedom@sentry.io>
Date: Fri, 8 May 2026 11:22:22 -0700
Subject: [PATCH 5/5] fix(a11y): remove duplicate mouse handlers from inline
 dropdowns

---
 src/components/TopNavClient.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/TopNavClient.tsx b/src/components/TopNavClient.tsx
index 99199f91578586..1e59f0de6ba27f 100644
--- a/src/components/TopNavClient.tsx
+++ b/src/components/TopNavClient.tsx
@@ -342,14 +342,6 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                           msOverflowStyle: 'none',
                         }}
                         onClick={e => e.stopPropagation()}
-                        onMouseEnter={() => {
-                          clearTimeout(closeTimers.current.concepts);
-                        }}
-                        onMouseLeave={() => {
-                          closeTimers.current.concepts = setTimeout(() => {
-                            setConceptsDropdownOpen(false);
-                          }, 150);
-                        }}
                       >
                         <style>{`
                           .dark .concepts-dropdown-link {
@@ -435,14 +427,6 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                           msOverflowStyle: 'none',
                         }}
                         onClick={e => e.stopPropagation()}
-                        onMouseEnter={() => {
-                          clearTimeout(closeTimers.current.more);
-                        }}
-                        onMouseLeave={() => {
-                          closeTimers.current.more = setTimeout(() => {
-                            setMoreDropdownOpen(false);
-                          }, 150);
-                        }}
                       >
                         <style>{`
                           .dark .more-dropdown-link {