From f2e6bbbb78be9a346f3b3184b929dc6317f128bd Mon Sep 17 00:00:00 2001
From: Rudy Celekli <rudy@gradiahq.com>
Date: Mon, 12 Oct 2026 21:17:55 -0400
Subject: [PATCH] fix: exclude closed drawers from keyboard interaction

---
 .../app/src/components/demo-gallery/index.tsx |  2 ++
 apps/app/src/components/drawers.test.tsx      | 34 +++++++++++++++++++
 .../src/components/template-library/index.tsx |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 apps/app/src/components/drawers.test.tsx

diff --git a/apps/app/src/components/demo-gallery/index.tsx b/apps/app/src/components/demo-gallery/index.tsx
index c35af59..0f3a919 100644
--- a/apps/app/src/components/demo-gallery/index.tsx
+++ b/apps/app/src/components/demo-gallery/index.tsx
@@ -44,6 +44,8 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
 
       {/* Drawer: full-screen bottom sheet on mobile, right side panel on sm+ */}
       <div
+        inert={!open}
+        aria-hidden={!open}
         className={`demo-gallery-drawer fixed z-50 flex flex-col transition-transform duration-300 ease-in-out ${open ? "demo-gallery-drawer--open" : ""}`}
         style={{ background: "var(--surface-primary, #fff)" }}
       >
diff --git a/apps/app/src/components/drawers.test.tsx b/apps/app/src/components/drawers.test.tsx
new file mode 100644
index 0000000..a2c1178
--- /dev/null
+++ b/apps/app/src/components/drawers.test.tsx
@@ -0,0 +1,34 @@
+import { afterEach, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { DemoGallery } from "./demo-gallery";
+import { TemplateLibrary } from "./template-library";
+vi.mock("@copilotkit/react-core/v2", () => ({
+  useAgent: () => ({ agent: { state: { templates: [] }, setState: vi.fn() } }),
+}));
+afterEach(cleanup);
+it.each(["gallery", "templates"])("excludes the closed %s drawer from accessible interaction", (kind) => {
+  const makeDrawer = (open: boolean) => kind === "gallery"
+    ? <DemoGallery open={open} onClose={vi.fn()} onTryDemo={vi.fn()} />
+    : <TemplateLibrary open={open} onClose={vi.fn()} />;
+  const view = render(makeDrawer(false));
+  expect(view.container.querySelector("button")).not.toBeNull();
+  expect(screen.queryAllByRole("button")).toHaveLength(0);
+  const closedButton = view.container.querySelector("button")!;
+  expect(closedButton.closest("[inert]")).not.toBeNull();
+  view.rerender(makeDrawer(true));
+  expect(screen.getAllByRole("button").length).toBeGreaterThan(1);
+  expect(screen.getAllByRole("button")[0].closest("[inert]")).toBeNull();
+  view.rerender(makeDrawer(false));
+  expect(screen.queryAllByRole("button")).toHaveLength(0);
+});
+it("preserves the selected gallery category across closing and reopening", () => {
+  const onTryDemo = vi.fn();
+  const onClose = vi.fn();
+  const view = render(<DemoGallery open onClose={onClose} onTryDemo={onTryDemo} />);
+  fireEvent.click(screen.getByRole("button", { name: "Compare" }));
+  const filteredCount = screen.getAllByRole("button").length;
+  view.rerender(<DemoGallery open={false} onClose={onClose} onTryDemo={onTryDemo} />);
+  view.rerender(<DemoGallery open onClose={onClose} onTryDemo={onTryDemo} />);
+  expect(screen.getAllByRole("button")).toHaveLength(filteredCount);
+});
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index 3fca2ea..26f7b25 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -92,6 +92,8 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
 
       {/* Drawer panel */}
       <div
+        inert={!open}
+        aria-hidden={!open}
         className="fixed top-0 right-0 h-full z-50 flex flex-col transition-transform duration-300 ease-in-out"
         style={{
           width: 380,