Room list: add sections to shared components

apps/web/src/viewmodels/room-list/RoomListViewViewModel.ts

@@ -61,6 +61,8 @@ export class RoomListViewViewModel
         const roomsResult = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(undefined);
         const canCreateRoom = hasCreateRoomRights(props.client, activeSpace);
         const filterIds = [...filterKeyToIdMap.values()];
+        const roomIds = roomsResult.rooms.map((room) => room.roomId);
+        const sections = [{ id: "all", roomIds }];
 
         super(props, {
             // Initial view state - start with empty, will populate in async init
@@ -73,7 +75,9 @@ export class RoomListViewViewModel
                 spaceId: roomsResult.spaceId,
                 filterKeys: undefined,
             },
-            roomIds: roomsResult.rooms.map((room) => room.roomId),
+            // Until we implement sections, this view model only supports the flat list mode
+            isFlatList: true,
+            sections,
             canCreateRoom,
         });
 
@@ -195,6 +199,15 @@ export class RoomListViewViewModel
         return viewModel;
     }
 
+    /**
+     * Not implemented - this view model does not support sections.
+     * Flat list mode is forced so this method is never be called.
+     * @throw Error if called
+     */
+    public getSectionHeaderViewModel(): never {
+        throw new Error("Sections are not supported in this room list");
+    }
+
     /**
      * Update which rooms are currently visible.
      * Called by the view when scroll position changes.
@@ -408,6 +421,7 @@ export class RoomListViewViewModel
         // Build the complete state atomically to ensure consistency
         // roomIds and roomListState must always be in sync
         const roomIds = this.roomIds;
+        const sections = [{ id: "all", roomIds }];
 
         // Update filter keys - only update if they have actually changed to prevent unnecessary re-renders of the room list
         const previousFilterKeys = this.snapshot.current.roomListState.filterKeys;
@@ -428,7 +442,7 @@ export class RoomListViewViewModel
             isRoomListEmpty,
             activeFilterId,
             roomListState,
-            roomIds,
+            sections,
         });
     }
 

apps/web/test/viewmodels/room-list/RoomListViewViewModel-test.tsx

@@ -66,7 +66,7 @@ describe("RoomListViewViewModel", () => {
             viewModel = new RoomListViewViewModel({ client: matrixClient });
 
             const snapshot = viewModel.getSnapshot();
-            expect(snapshot.roomIds).toEqual(["!room1:server", "!room2:server", "!room3:server"]);
+            expect(snapshot.sections[0].roomIds).toEqual(["!room1:server", "!room2:server", "!room3:server"]);
             expect(snapshot.isRoomListEmpty).toBe(false);
             expect(snapshot.isLoadingRooms).toBe(false);
             expect(snapshot.roomListState.spaceId).toBe("home");
@@ -82,7 +82,7 @@ describe("RoomListViewViewModel", () => {
 
             viewModel = new RoomListViewViewModel({ client: matrixClient });
 
-            expect(viewModel.getSnapshot().roomIds).toEqual([]);
+            expect(viewModel.getSnapshot().sections[0].roomIds).toEqual([]);
             expect(viewModel.getSnapshot().isRoomListEmpty).toBe(true);
         });
 
@@ -106,7 +106,7 @@ describe("RoomListViewViewModel", () => {
 
             RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
-            expect(viewModel.getSnapshot().roomIds).toEqual([
+            expect(viewModel.getSnapshot().sections[0].roomIds).toEqual([
                 "!room1:server",
                 "!room2:server",
                 "!room3:server",
@@ -156,7 +156,7 @@ describe("RoomListViewViewModel", () => {
             RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
             expect(viewModel.getSnapshot().roomListState.spaceId).toBe("!space:server");
-            expect(viewModel.getSnapshot().roomIds).toEqual(["!room1:server", "!room2:server"]);
+            expect(viewModel.getSnapshot().sections[0].roomIds).toEqual(["!room1:server", "!room2:server"]);
         });
 
         it("should clear view models when space changes", () => {
@@ -240,7 +240,7 @@ describe("RoomListViewViewModel", () => {
 
             // Active room should still be at index 1 (sticky behavior)
             expect(viewModel.getSnapshot().roomListState.activeRoomIndex).toBe(1);
-            expect(viewModel.getSnapshot().roomIds[1]).toBe("!room2:server");
+            expect(viewModel.getSnapshot().sections[0].roomIds[1]).toBe("!room2:server");
         });
 
         it("should not apply sticky behavior when user changes rooms", async () => {
@@ -283,7 +283,7 @@ describe("RoomListViewViewModel", () => {
             viewModel.onToggleFilter("unread");
 
             expect(viewModel.getSnapshot().activeFilterId).toBe("unread");
-            expect(viewModel.getSnapshot().roomIds).toEqual(["!room1:server"]);
+            expect(viewModel.getSnapshot().sections[0].roomIds).toEqual(["!room1:server"]);
         });
 
         it("should toggle filter off", () => {
@@ -307,7 +307,11 @@ describe("RoomListViewViewModel", () => {
             viewModel.onToggleFilter("unread");
 
             expect(viewModel.getSnapshot().activeFilterId).toBeUndefined();
-            expect(viewModel.getSnapshot().roomIds).toEqual(["!room1:server", "!room2:server", "!room3:server"]);
+            expect(viewModel.getSnapshot().sections[0].roomIds).toEqual([
+                "!room1:server",
+                "!room2:server",
+                "!room3:server",
+            ]);
         });
     });
 

packages/shared-components/src/i18n/strings/en_EN.json

@@ -122,6 +122,9 @@
             "more_options": "More Options"
         },
         "room_options": "Room Options",
+        "section_header": {
+            "toggle": "Toggle %(section)s section"
+        },
         "show_message_previews": "Show message previews",
         "sort": "Sort",
         "sort_type": {

packages/shared-components/src/index.ts

@@ -35,8 +35,10 @@ export * from "./rich-list/RichItem";
 export * from "./rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";
 export * from "./room-list/RoomListSearchView";
+export * from "./room-list/RoomListSectionHeaderView";
 export * from "./room-list/RoomListView";
 export * from "./room-list/RoomListItemView";
+export * from "./room-list/RoomListItemAccessibilityWrapper";
 export * from "./room-list/RoomListPrimaryFilters";
 export * from "./room-list/VirtualizedRoomListView";
 export * from "./timeline/DateSeparatorView/";

packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
+import { createMockRoomItemViewModel, renderAvatar } from "../story-mocks";
+
+const meta = {
+    title: "Room List/RoomListItemAccessibiltyWrapper",
+    component: RoomListItemAccessibilityWrapper,
+    tags: ["autodocs"],
+    args: {
+        roomIndex: 0,
+        roomIndexInSection: 0,
+        roomCount: 10,
+        onFocus: fn(),
+        isFirstItem: false,
+        isLastItem: false,
+        renderAvatar,
+        isSelected: false,
+        isFocused: false,
+        vm: createMockRoomItemViewModel("!room:server", "Room name", 0),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "320px", padding: "8px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof RoomListItemAccessibilityWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FlatList: Story = {
+    args: {
+        isInFlatList: true,
+    },
+    decorators: [
+        (Story) => (
+            <div role="listbox" aria-label="Room list">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Sections: Story = {
+    args: {
+        isInFlatList: false,
+    },
+    decorators: [
+        (Story) => (
+            <div role="treegrid" aria-label="Room list" aria-rowcount={10}>
+                <Story />
+            </div>
+        ),
+    ],
+};

packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { memo, type JSX } from "react";
+
+import { RoomListItemView, type RoomListItemViewProps } from "../RoomListItemView";
+import { getItemAccessibleProps } from "../../utils/VirtualizedList";
+
+export interface RoomListItemAccessibilityWrapperPros extends RoomListItemViewProps {
+    /** Index of this room in the list */
+    roomIndex: number;
+    /** Index of this room in its section */
+    roomIndexInSection: number;
+    /** Total number of rooms in the list */
+    roomCount: number;
+    /** Whether the room list is displayed as a flat list */
+    isInFlatList: boolean;
+}
+
+/**
+ * Wrapper around RoomListItemView that adds accessibility props based on the room's position in the list and whether the list is flat or grouped.
+ * In a flat list, each item gets listbox item props. In a grouped list, each item gets treegrid cell props.
+ *
+ * @example
+ * ``
+ * <RoomListItemAccessibilityWrapper
+ *   roomIndex={0}
+ *   roomIndexInSection={0}
+ *   roomCount={10}
+ *   isInFlatList={true}
+ *   {...otherRoomListItemViewProps}
+ * />
+ * ```
+ */
+export const RoomListItemAccessibilityWrapper = memo(function RoomListItemAccessibilityWrapper({
+    roomIndex,
+    roomCount,
+    roomIndexInSection,
+    isInFlatList,
+    ...rest
+}: RoomListItemAccessibilityWrapperPros): JSX.Element {
+    const itemA11yProps = isInFlatList ? getItemAccessibleProps("listbox", roomIndex, roomCount) : { role: "gridcell" };
+    const item = <RoomListItemView {...rest} {...itemA11yProps} />;
+
+    if (isInFlatList) return item;
+    return <div {...getItemAccessibleProps("treegrid", roomIndex, roomIndexInSection)}>{item}</div>;
+});

packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";

packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx

@@ -15,14 +15,15 @@
 import { withViewDocs } from "../../../.storybook/withViewDocs";
 import { defaultSnapshot } from "./default-snapshot";
 import { renderAvatar } from "../story-mocks";
+import { mockedActions } from "./mocked-actions";
 
 type RoomListItemProps = RoomListItemSnapshot &
     RoomListItemActions & {
         isSelected: boolean;
         isFocused: boolean;
         onFocus: (room: Room, e: React.FocusEvent) => void;
-        roomIndex: number;
-        roomCount: number;
+        isFirstItem: boolean;
+        isLastItem: boolean;
         renderAvatar: (room: Room) => React.ReactElement;
     };
 
@@ -40,8 +41,8 @@
     isSelected,
     isFocused,
     onFocus,
-    roomIndex,
-    roomCount,
+    isFirstItem,
+    isLastItem,
     renderAvatar: renderAvatarProp,
     ...rest
 }: RoomListItemProps): JSX.Element => {
@@ -62,9 +63,10 @@
             isSelected={isSelected}
             isFocused={isFocused}
             onFocus={onFocus}
-            roomIndex={roomIndex}
-            roomCount={roomCount}
+            isFirstItem={isFirstItem}
+            isLastItem={isLastItem}
             renderAvatar={renderAvatarProp}
+            role="option"
         />
     );
 };
@@ -76,28 +78,18 @@
     tags: ["autodocs"],
     decorators: [
         (Story) => (
-            <div style={{ width: "320px", padding: "8px" }}>
-                <div role="listbox" aria-label="Room list">
-                    <Story />
-                </div>
+            <div role="listbox" aria-label="Room list" style={{ width: "320px", padding: "8px" }}>
+                <Story />
             </div>
         ),
     ],
     args: {
         ...defaultSnapshot,
+        ...mockedActions,
         isSelected: false,
         isFocused: false,
-        roomIndex: 1,
-        roomCount: 10,
-        onOpenRoom: fn(),
-        onMarkAsRead: fn(),
-        onMarkAsUnread: fn(),
-        onToggleFavorite: fn(),
-        onToggleLowPriority: fn(),
-        onInvite: fn(),
-        onCopyRoomLink: fn(),
-        onLeaveRoom: fn(),
-        onSetRoomNotifState: fn(),
+        isFirstItem: false,
+        isLastItem: false,
         onFocus: fn(),
         renderAvatar,
     },
@@ -263,14 +255,14 @@
 
 export const FirstItem: Story = {
     args: {
-        roomIndex: 0,
+        isFirstItem: true,
         isSelected: true,
     },
 };
 
 export const LastItem: Story = {
     args: {
-        roomIndex: 9,
+        isLastItem: true,
         isSelected: true,
     },
 };