From e91e8a197cd418d94ef80e0ed93ac64ddfb4def8 Mon Sep 17 00:00:00 2001
From: Copilot <223556219+Copilot@users.noreply.github.com>
Date: Fri, 17 Jul 2026 15:47:24 -0700
Subject: [PATCH] FIX Restore focus after feedback dialog closes

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 588eae27-1d87-453a-8bb8-0c11484ca6d1
---
 frontend/e2e/accessibility.spec.ts            | 28 +++++++++++++++++++
 .../src/components/Sidebar/Navigation.tsx     |  3 ++
 2 files changed, 31 insertions(+)

diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index 20dfb864c7..958727fdeb 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -61,6 +61,34 @@ test.describe("Accessibility", () => {
     await expect(themeBtn).toBeVisible();
   });
 
+  test("should restore focus to Feedback after closing its dialog with Escape", async ({ page }) => {
+    const feedbackButton = page.getByRole("button", { name: "Feedback" });
+    await expect(feedbackButton).toBeVisible();
+    await feedbackButton.focus();
+    await feedbackButton.press("Enter");
+
+    const dialog = page.getByRole("dialog", { name: "Send feedback" });
+    await expect(dialog).toBeVisible();
+    await expect(dialog.locator(":focus")).toBeVisible();
+
+    await page.keyboard.press("Escape");
+
+    await expect(dialog).toBeHidden();
+    await expect(feedbackButton).toBeFocused();
+  });
+
+  test("should restore focus to Feedback after cancelling its dialog", async ({ page }) => {
+    const feedbackButton = page.getByRole("button", { name: "Feedback" });
+    await feedbackButton.click();
+
+    const dialog = page.getByRole("dialog", { name: "Send feedback" });
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole("button", { name: "Cancel" }).click();
+
+    await expect(dialog).toBeHidden();
+    await expect(feedbackButton).toBeFocused();
+  });
+
   test("should be navigable with keyboard", async ({ page }) => {
     // Wait for the sidebar to render so there is a focusable element for Tab
     // to land on, and dispatch the Tab through `body` (rather than the bare
diff --git a/frontend/src/components/Sidebar/Navigation.tsx b/frontend/src/components/Sidebar/Navigation.tsx
index cf4a1dfc63..da65c0a379 100644
--- a/frontend/src/components/Sidebar/Navigation.tsx
+++ b/frontend/src/components/Sidebar/Navigation.tsx
@@ -5,6 +5,7 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
+  useRestoreFocusTarget,
 } from '@fluentui/react-components'
 import type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent } from '@fluentui/react-components'
 import {
@@ -40,6 +41,7 @@ const THEME_LABELS: Record<ThemeMode, string> = {
 export default function Navigation({ currentView, onNavigate, onOpenFeedback }: NavigationProps) {
   const styles = useNavigationStyles()
   const { mode, resolved, setMode } = useTheme()
+  const feedbackRestoreFocusTarget = useRestoreFocusTarget()
 
   const handleThemeChange = (
     _: MenuCheckedValueChangeEvent,
@@ -99,6 +101,7 @@ export default function Navigation({ currentView, onNavigate, onOpenFeedback }:
       <div className={styles.spacer} />
 
       <Button
+        {...feedbackRestoreFocusTarget}
         className={styles.navButton}
         appearance="subtle"
         icon={<PersonFeedbackRegular />}