Fix spotlight opening in TAC (#12315)

* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`

playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts

@@ -17,6 +17,7 @@
  */
 
 import { expect, test } from ".";
+import { CommandOrControl } from "../../utils";
 
 test.describe("Threads Activity Centre", () => {
     test.use({
@@ -118,4 +119,19 @@ test.describe("Threads Activity Centre", () => {
         ]);
         await expect(util.getTacPanel()).toMatchScreenshot("tac-panel-notification-unread.png");
     });
+
+    test("should block the Spotlight to open when the TAC is opened", async ({ util, page }) => {
+        const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
+
+        // Sanity check
+        // Open and close the spotlight
+        await toggleSpotlight();
+        await expect(page.locator(".mx_SpotlightDialog")).toBeVisible();
+        await toggleSpotlight();
+
+        await util.openTac();
+        // The spotlight should not be opened
+        await toggleSpotlight();
+        await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
+    });
 });

res/css/structures/_ThreadsActivityCentre.pcss

@@ -16,6 +16,10 @@
  * /
  */
 
+.mx_ThreadsActivityCentre_container {
+    display: flex;
+}
+
 .mx_ThreadsActivityCentreButton {
     border-radius: 8px;
     margin: 18px auto auto auto;

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

@@ -32,6 +32,8 @@ import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
 import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
 import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import PosthogTrackers from "../../../../PosthogTrackers";
+import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
+import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -49,6 +51,20 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
     const roomsAndNotifications = useUnreadThreadRooms(open);
 
     return (
+        <div
+            className="mx_ThreadsActivityCentre_container"
+            onKeyDown={(evt) => {
+                // Do nothing if the TAC is closed
+                if (!open) return;
+
+                const action = getKeyBindingsManager().getNavigationAction(evt);
+
+                // Block spotlight opening
+                if (action === KeyBindingAction.FilterRooms) {
+                    evt.stopPropagation();
+                }
+            }}
+        >
             <Menu
                 align="end"
                 open={open}
@@ -84,6 +100,7 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
                     )}
                 </div>
             </Menu>
+        </div>
     );
 }
 

test/components/views/spaces/ThreadsActivityCentre-test.tsx

@@ -180,4 +180,31 @@ describe("ThreadsActivityCentre", () => {
 
         expect(screen.getByRole("menu")).toMatchSnapshot();
     });
+
+    it("should block Ctrl/CMD + k shortcut", async () => {
+        cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
+
+        const keyDownHandler = jest.fn();
+        render(
+            <div
+                onKeyDown={(evt) => {
+                    keyDownHandler(evt.key, evt.ctrlKey);
+                }}
+            >
+                <MatrixClientContext.Provider value={cli}>
+                    <ThreadsActivityCentre />
+                </MatrixClientContext.Provider>
+            </div>,
+            { wrapper: TooltipProvider },
+        );
+        await userEvent.click(getTACButton());
+
+        // CTRL/CMD + k should be blocked
+        await userEvent.keyboard("{Control>}k{/Control}");
+        expect(keyDownHandler).not.toHaveBeenCalledWith("k", true);
+
+        // Sanity test
+        await userEvent.keyboard("{Control>}a{/Control}");
+        expect(keyDownHandler).toHaveBeenCalledWith("a", true);
+    });
 });