skip top layer elements in useRovingTabIndex

Author: keithamus

src/TreeView/useRovingTabIndex.ts

@@ -22,6 +22,24 @@ export function useRovingTabIndex({
     getNextFocusable: (direction, from, event) => {
       if (!(from instanceof HTMLElement)) return
 
+      // Skip top layer elements
+      try {
+        // These need to be separate if conditions as different
+        // browsers may or may not support them. While we could
+        // use `:where`, engines like JSDom will still throw.
+        if (from.closest('dialog[open]')) {
+          return
+        }
+        if (from.closest(':popover-open')) {
+          return
+        }
+        if (from.closest('.:popover-open')) {
+          return
+        }
+      } catch {
+        // Don't return
+      }
+
       return getNextFocusableElement(from, event) ?? from
     },
     focusInStrategy: () => {