From e86256f84501a919725d8098bc0b37be5eac15ac Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Fri, 7 Mar 2025 11:48:24 +0100
Subject: [PATCH] fix(room list): move aria-setsize and aria-posinset on room
 list cell

---
 .../views/rooms/RoomListPanel/RoomList.tsx    | 12 +++++++----
 .../rooms/RoomListPanel/RoomList-test.tsx     |  2 --
 .../__snapshots__/RoomList-test.tsx.snap      | 21 ++++++++++++++++++-
 .../__snapshots__/RoomListPanel-test.tsx.snap |  2 --
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx
index 4b51dcbaa4..c1f8bcdacb 100644
--- a/src/components/views/rooms/RoomListPanel/RoomList.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomList.tsx
@@ -26,7 +26,14 @@ interface RoomListProps {
 export function RoomList({ vm: { rooms, openRoom } }: RoomListProps): JSX.Element {
     const roomRendererMemoized = useCallback(
         ({ key, index, style }: ListRowProps) => (
-            <RoomListCell room={rooms[index]} key={key} style={style} onClick={() => openRoom(rooms[index].roomId)} />
+            <RoomListCell
+                room={rooms[index]}
+                key={key}
+                style={style}
+                aria-setsize={rooms.length}
+                aria-posinset={index + 1}
+                onClick={() => openRoom(rooms[index].roomId)}
+            />
         ),
         [rooms, openRoom],
     );
@@ -73,9 +80,6 @@ function useAccessibleList(rooms: Room[]): RefObject<HTMLDivElement> {
         const list = ref.current?.querySelector('[role="listbox"]');
         if (!list) return;
 
-        // The list is virtualized so the number of items in the dom is not the same as the number of rooms
-        list.setAttribute("aria-setsize", `${rooms.length}`);
-
         // Determine if a node is a row node
         const isRowNode = (node: HTMLElement): boolean => node.getAttribute("role") === "row";
 
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
index 2eee4ca3d9..9548a482ec 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
@@ -44,8 +44,6 @@ describe("<RoomList />", () => {
     it("should render a room list", async () => {
         const { asFragment } = await renderList();
         expect(asFragment()).toMatchSnapshot();
-
-        expect(screen.getByRole("listbox").getAttribute("aria-setsize")).toBe(`${vm.rooms.length}`);
     });
 
     it("should open the room", async () => {
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
index 2ee00057e7..00848ec4dc 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
@@ -12,7 +12,6 @@ exports[`<RoomList /> should render a room list 1`] = `
       <div
         aria-label="Room list"
         aria-readonly="true"
-        aria-setsize="10"
         class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
         role="listbox"
         style="box-sizing: border-box; direction: ltr; height: 1500px; position: relative; width: 1500px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
@@ -24,7 +23,9 @@ exports[`<RoomList /> should render a room list 1`] = `
         >
           <button
             aria-label="Open room room0"
+            aria-posinset="1"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
@@ -71,7 +72,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room1"
+            aria-posinset="2"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
@@ -118,7 +121,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room2"
+            aria-posinset="3"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
@@ -165,7 +170,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room3"
+            aria-posinset="4"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
@@ -212,7 +219,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room4"
+            aria-posinset="5"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
@@ -259,7 +268,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room5"
+            aria-posinset="6"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
@@ -306,7 +317,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room6"
+            aria-posinset="7"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
@@ -353,7 +366,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room7"
+            aria-posinset="8"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
@@ -400,7 +415,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room8"
+            aria-posinset="9"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
@@ -447,7 +464,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room9"
+            aria-posinset="10"
             aria-selected="false"
+            aria-setsize="10"
             class="mx_RoomListCell"
             role="option"
             style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
index 879f1c0aa4..611656d5ea 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
@@ -34,7 +34,6 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
         <div
           aria-label="Room list"
           aria-readonly="true"
-          aria-setsize="0"
           class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
           role="listbox"
           style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
@@ -185,7 +184,6 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         <div
           aria-label="Room list"
           aria-readonly="true"
-          aria-setsize="0"
           class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
           role="listbox"
           style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"