Fix spotlight opening in TAC

matrix-org · Mar 5, 2024 · 0e7b7b8 · 0e7b7b8
1 parent 6eafe0e
commit 0e7b7b8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 32 deletions.
diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss
@@ -16,6 +16,10 @@
  * /
  */
 
+.mx_ThreadsActivityCentre_container {
+    display: flex;
+}
+
 .mx_ThreadsActivityCentreButton {
     border-radius: 8px;
     margin: 18px auto auto auto;

diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
@@ -32,6 +32,9 @@ import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
 import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
 import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import PosthogTrackers from "../../../../PosthogTrackers";
+import { RovingTabIndexProvider } from "../../../../accessibility/RovingTabIndex";
+import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
+import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -49,41 +52,56 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
     const roomsAndNotifications = useUnreadThreadRooms(open);
 
     return (
-        <Menu
-            align="end"
-            open={open}
-            onOpenChange={(newOpen) => {
-                // Track only when the Threads Activity Centre is opened
-                if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
+        <RovingTabIndexProvider
+            onKeyDown={(evt) => {
+                const action = getKeyBindingsManager().getNavigationAction(evt);
 
-                setOpen(newOpen);
+                // Block spotlight opening
+                if (action === KeyBindingAction.FilterRooms) {
+                    evt.stopPropagation();
+                }
             }}
-            side="right"
-            title={_t("threads_activity_centre|header")}
-            trigger={
-                <ThreadsActivityCentreButton
-                    displayLabel={displayButtonLabel}
-                    notificationLevel={roomsAndNotifications.greatestNotificationLevel}
-                />
-            }
         >
-            {/* Make the content of the pop-up scrollable */}
-            <div className="mx_ThreadsActivity_rows">
-                {roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
-                    <ThreadsActivityRow
-                        key={room.roomId}
-                        room={room}
-                        notificationLevel={notificationLevel}
-                        onClick={() => setOpen(false)}
-                    />
-                ))}
-                {roomsAndNotifications.rooms.length === 0 && (
-                    <div className="mx_ThreadsActivityCentre_emptyCaption">
-                        {_t("threads_activity_centre|no_rooms_with_unreads_threads")}
-                    </div>
-                )}
-            </div>
-        </Menu>
+            {({ onKeyDownHandler }) => (
+                <div className="mx_ThreadsActivityCentre_container" onKeyDown={onKeyDownHandler}>
+                    <Menu
+                        align="end"
+                        open={open}
+                        onOpenChange={(newOpen) => {
+                            // Track only when the Threads Activity Centre is opened
+                            if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
+
+                            setOpen(newOpen);
+                        }}
+                        side="right"
+                        title={_t("threads_activity_centre|header")}
+                        trigger={
+                            <ThreadsActivityCentreButton
+                                displayLabel={displayButtonLabel}
+                                notificationLevel={roomsAndNotifications.greatestNotificationLevel}
+                            />
+                        }
+                    >
+                        {/* Make the content of the pop-up scrollable */}
+                        <div className="mx_ThreadsActivity_rows">
+                            {roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
+                                <ThreadsActivityRow
+                                    key={room.roomId}
+                                    room={room}
+                                    notificationLevel={notificationLevel}
+                                    onClick={() => setOpen(false)}
+                                />
+                            ))}
+                            {roomsAndNotifications.rooms.length === 0 && (
+                                <div className="mx_ThreadsActivityCentre_emptyCaption">
+                                    {_t("threads_activity_centre|no_rooms_with_unreads_threads")}
+                                </div>
+                            )}
+                        </div>
+                    </Menu>
+                </div>
+            )}
+        </RovingTabIndexProvider>
     );
 }