feat: support up/down arrow navigation in the new room list

Author: florianduros

res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss

@@ -18,10 +18,6 @@
     all: unset;
     cursor: pointer;
 
-    &:hover {
-        background-color: var(--cpd-color-bg-action-secondary-hovered);
-    }
-
     .mx_RoomListItemView_container {
         padding-left: var(--cpd-space-2x);
         font: var(--cpd-font-body-md-regular);
@@ -56,12 +52,12 @@
     }
 }
 
-.mx_RoomListItemView_menu_open {
+.mx_RoomListItemView_hover {
     background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
 
-    .mx_RoomListItemView_content {
-        padding-right: var(--cpd-space-1-5x);
-    }
+.mx_RoomListItemView_menu_open .mx_RoomListItemView_content {
+    padding-right: var(--cpd-space-1-5x);
 }
 
 .mx_RoomListItemView_selected {

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

@@ -11,6 +11,10 @@ import { AutoSizer, List, type ListRowProps } from "react-virtualized";
 import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { _t } from "../../../../languageHandler";
 import { RoomListItemView } from "./RoomListItemView";
+import { RovingTabIndexProvider } from "../../../../accessibility/RovingTabIndex";
+import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
+import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
+import { Landmark, LandmarkNavigation } from "../../../../accessibility/LandmarkNavigation";
 
 interface RoomListProps {
     /**
@@ -32,21 +36,45 @@ export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Ele
 
     // The first div is needed to make the virtualized list take all the remaining space and scroll correctly
     return (
-        <div className="mx_RoomList" data-testid="room-list">
-            <AutoSizer>
-                {({ height, width }) => (
-                    <List
-                        aria-label={_t("room_list|list_title")}
-                        className="mx_RoomList_List"
-                        rowRenderer={roomRendererMemoized}
-                        rowCount={rooms.length}
-                        rowHeight={48}
-                        height={height}
-                        width={width}
-                        scrollToIndex={activeIndex ?? 0}
-                    />
-                )}
-            </AutoSizer>
-        </div>
+        <RovingTabIndexProvider handleHomeEnd={true} handleUpDown={true}>
+            {({ onKeyDownHandler }) => (
+                <div
+                    className="mx_RoomList"
+                    data-testid="room-list"
+                    onKeyDown={(ev) => {
+                        const navAction = getKeyBindingsManager().getNavigationAction(ev);
+                        if (
+                            navAction === KeyBindingAction.NextLandmark ||
+                            navAction === KeyBindingAction.PreviousLandmark
+                        ) {
+                            LandmarkNavigation.findAndFocusNextLandmark(
+                                Landmark.ROOM_LIST,
+                                navAction === KeyBindingAction.PreviousLandmark,
+                            );
+                            ev.stopPropagation();
+                            ev.preventDefault();
+                            return;
+                        }
+                        onKeyDownHandler(ev);
+                    }}
+                >
+                    <AutoSizer>
+                        {({ height, width }) => (
+                            <List
+                                aria-label={_t("room_list|list_title")}
+                                className="mx_RoomList_List"
+                                rowRenderer={roomRendererMemoized}
+                                rowCount={rooms.length}
+                                rowHeight={48}
+                                height={height}
+                                width={width}
+                                scrollToIndex={activeIndex ?? 0}
+                                tabIndex={-1}
+                            />
+                        )}
+                    </AutoSizer>
+                </div>
+            )}
+        </RovingTabIndexProvider>
     );
 }

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

@@ -14,6 +14,7 @@ import { Flex } from "../../../utils/Flex";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";
+import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
 
 interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
@@ -34,22 +35,27 @@ export const RoomListItemView = memo(function RoomListItemView({
     isSelected,
     ...props
 }: RoomListItemViewProps): JSX.Element {
+    const [onFocus, isActive, ref] = useRovingTabIndex();
     const vm = useRoomListItemViewModel(room);
 
     const [isHover, setIsHover] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     // The compound menu in RoomListItemMenuView needs to be rendered when the hover menu is shown
     // Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
-    const showHoverDecoration = (isMenuOpen || isHover) && vm.showHoverMenu;
+    const showHoverDecoration = isMenuOpen || isHover;
+    const showHoverMenu = showHoverDecoration && vm.showHoverMenu;
 
-    const isNotificationDecorationVisible = !showHoverDecoration && vm.showNotificationDecoration;
+    const isInvitation = vm.notificationState.invited;
+    const isNotificationDecorationVisible = isInvitation || (!showHoverDecoration && vm.showNotificationDecoration);
 
     return (
         <button
+            ref={ref}
             className={classNames("mx_RoomListItemView", {
                 mx_RoomListItemView_empty: !isNotificationDecorationVisible && !showHoverDecoration,
                 mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
-                mx_RoomListItemView_menu_open: showHoverDecoration,
+                mx_RoomListItemView_hover: showHoverDecoration,
+                mx_RoomListItemView_menu_open: showHoverMenu,
                 mx_RoomListItemView_selected: isSelected,
                 mx_RoomListItemView_bold: vm.isBold,
             })}
@@ -59,8 +65,12 @@ export const RoomListItemView = memo(function RoomListItemView({
             onClick={() => vm.openRoom()}
             onMouseOver={() => setIsHover(true)}
             onMouseOut={() => setIsHover(false)}
-            onFocus={() => setIsHover(true)}
+            onFocus={() => {
+                setIsHover(true);
+                onFocus();
+            }}
             onBlur={() => setIsHover(false)}
+            tabIndex={isActive ? 0 : -1}
             {...props}
         >
             {/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
@@ -79,7 +89,7 @@ export const RoomListItemView = memo(function RoomListItemView({
                         </div>
                         <div className="mx_RoomListItemView_messagePreview">{vm.messagePreview}</div>
                     </div>
-                    {showHoverDecoration ? (
+                    {showHoverMenu ? (
                         <RoomListItemMenuView
                             room={room}
                             setMenuOpen={(isOpen) => {