fix(story): harden notebook interaction and fallback

app/components/story/NotebookBrowser.test.tsx

@@ -38,8 +38,29 @@ describe("NotebookBrowser", () => {
     expect(screen.getByRole("tabpanel")).toHaveAccessibleName(
       /SC Plus Aquicultura/i,
     );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "Projeto ativo: SC Plus Aquicultura",
+    );
   });
+  it("preloads the next screenshot and keeps a short outgoing crossfade", () => {
+    const view = renderBrowser();
 
+    expect(
+      view.container.querySelector(".notebook-screenshot-preload"),
+    ).toBeInTheDocument();
+
+    view.rerender(
+      <NotebookBrowser
+        projects={projects}
+        activeIndex={1}
+        frame={frame}
+        onSelectTab={jest.fn()}
+      />,
+    );
+    expect(
+      view.container.querySelector(".notebook-screenshot-outgoing"),
+    ).toBeInTheDocument();
+  });
   it("moves between tabs with arrow keys and Home/End", async () => {
     const user = userEvent.setup();
     const onSelectTab = jest.fn();
@@ -56,6 +77,26 @@ describe("NotebookBrowser", () => {
     expect(onSelectTab).toHaveBeenNthCalledWith(3, 0);
     expect(onSelectTab).toHaveBeenNthCalledWith(4, projects.length - 1);
   });
+  it("moves DOM focus with the active tab", async () => {
+    const user = userEvent.setup();
+    const tabs =
+      renderBrowser().container.querySelectorAll<HTMLButtonElement>(
+        '[role="tab"]',
+      );
+
+    tabs[0].focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(document.activeElement).toBe(tabs[1]);
+  });
+
+  it("removes the closed browser from the accessibility tree", () => {
+    renderBrowser({ interactive: false });
+
+    const browser = screen.getByTestId("notebook-browser");
+    expect(browser).toHaveAttribute("aria-hidden", "true");
+    expect(browser).toHaveAttribute("inert");
+  });
 
   it("bounds arrow navigation at the first and last tab", async () => {
     const user = userEvent.setup();