Make landmark navigation work with new room list (#30747)

* Make landmark navigation work with new room list

Split out from https://github.com/element-hq/element-web/pull/30640

* Fix landmark selection to work with either room list

* Add test for landmark navigation

* Add test

* Fix test

* Clear mocks between runs

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { useState, useCallback } from "react";
 
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
@@ -14,6 +14,10 @@ import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
 import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
+import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
+import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
+import { Landmark, LandmarkNavigation } from "../../../../accessibility/LandmarkNavigation";
+import { type IState as IRovingTabIndexState } from "../../../../accessibility/RovingTabIndex";
 
 type RoomListPanelProps = {
     /**
@@ -28,6 +32,31 @@ type RoomListPanelProps = {
  */
 export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
+    const [focusedElement, setFocusedElement] = useState<Element | null>(null);
+
+    const onFocus = useCallback((ev: React.FocusEvent): void => {
+        setFocusedElement(ev.target as Element);
+    }, []);
+
+    const onBlur = useCallback((): void => {
+        setFocusedElement(null);
+    }, []);
+
+    const onKeyDown = useCallback(
+        (ev: React.KeyboardEvent, state?: IRovingTabIndexState): void => {
+            if (!focusedElement) return;
+            const navAction = getKeyBindingsManager().getNavigationAction(ev);
+            if (navAction === KeyBindingAction.PreviousLandmark || navAction === KeyBindingAction.NextLandmark) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                LandmarkNavigation.findAndFocusNextLandmark(
+                    Landmark.ROOM_SEARCH,
+                    navAction === KeyBindingAction.PreviousLandmark,
+                );
+            }
+        },
+        [focusedElement],
+    );
 
     return (
         <Flex
@@ -36,6 +65,9 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
             direction="column"
             align="stretch"
             aria-label={_t("room_list|list_title")}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
         >
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />