fix(a11y): use robust tooltip tab order

Author: viktoravelino

src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx

@@ -225,6 +225,8 @@ const CanvasControls = ({
               // break their flow.
               onOpenAutoFocus={(e) => e.preventDefault()}
               onCloseAutoFocus={(e) => e.preventDefault()}
+              onFocusOutside={markDiscovered}
+              onEscapeKeyDown={markDiscovered}
               data-testid="assistant-onboarding-tooltip"
               onKeyDown={handleOnboardingTooltipTabBoundary}
               // Canvas-level stacking: kept BELOW the z-50 modal/dialog/dropdown

src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx

@@ -1,4 +1,5 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import CanvasControls from "../CanvasControls";
 
 // The modal/dialog/dropdown overlay layer in the app all sits at `z-50`
@@ -201,9 +202,10 @@ describe("CanvasControls", () => {
     }
   });
 
-  it("should_allow_tab_to_leave_onboarding_tooltip", () => {
+  it("should_allow_tab_to_leave_onboarding_tooltip", async () => {
     localStorage.clear();
     jest.useFakeTimers();
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const nextButton = document.createElement("button");
     nextButton.textContent = "Next focus target";
 
@@ -216,11 +218,10 @@ describe("CanvasControls", () => {
 
       document.body.appendChild(nextButton);
 
-      const openButton = screen.getByTestId("assistant-onboarding-open");
-      openButton.focus();
-      fireEvent.keyDown(screen.getByTestId("assistant-onboarding-tooltip"), {
-        key: "Tab",
-      });
+      screen.getByTestId("assistant-onboarding-dismiss").focus();
+      await user.tab();
+      expect(screen.getByTestId("assistant-onboarding-open")).toHaveFocus();
+      await user.tab();
 
       expect(nextButton).toHaveFocus();
       expect(

src/frontend/src/components/core/canvasControlsComponent/utils/use-dismiss-on-tab-boundary.ts

@@ -1,20 +1,14 @@
 import { type KeyboardEvent, useCallback, useRef } from "react";
+import { tabbable } from "tabbable";
 
-const TABBABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])',
-].join(",");
-
-const getTabbableElements = (root: ParentNode) =>
-  Array.from(root.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR)).filter(
+const getTabbableElements = (root: HTMLElement) =>
+  tabbable(root, {
+    displayCheck: process.env.NODE_ENV === "test" ? "none" : "full",
+  }).filter(
     (element) =>
-      element.tabIndex >= 0 &&
-      element.getAttribute("aria-hidden") !== "true" &&
-      !element.hasAttribute("data-radix-focus-guard"),
+      !element.hasAttribute("data-radix-focus-guard") &&
+      !element.closest("[inert]") &&
+      !element.closest('[aria-hidden="true"]'),
   );
 
 export function useDismissOnTabBoundary<TElement extends HTMLElement>(
@@ -35,14 +29,14 @@ export function useDismissOnTabBoundary<TElement extends HTMLElement>(
       const containerTabbables = getTabbableElements(container);
       const firstContainerTabbable = containerTabbables[0];
       const lastContainerTabbable = containerTabbables.at(-1);
-      const leavingBackward =
+      const isLeavingBackward =
         event.shiftKey && activeElement === firstContainerTabbable;
-      const leavingForward =
+      const isLeavingForward =
         !event.shiftKey && activeElement === lastContainerTabbable;
 
-      if (!leavingBackward && !leavingForward) return;
+      if (!isLeavingBackward && !isLeavingForward) return;
 
-      const documentTabbables = getTabbableElements(document);
+      const documentTabbables = getTabbableElements(document.body);
       const activeIndex = documentTabbables.indexOf(activeElement);
       const candidates = event.shiftKey
         ? documentTabbables.slice(0, activeIndex).reverse()