From d8151d6b010252f03984d8ddb413ebe27422057d Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Thu, 6 Mar 2025 09:42:07 +0100
Subject: [PATCH] test(room list): wait for the row role to be removed, update
 a11y role and add tests to role observer

---
 .../rooms/RoomListPanel/RoomList-test.tsx     | 29 +++++++++++++---
 .../__snapshots__/RoomList-test.tsx.snap      | 34 ++++++++++++-------
 2 files changed, 46 insertions(+), 17 deletions(-)

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 bbf0edbf5e..2eee4ca3d9 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
@@ -34,19 +34,38 @@ describe("<RoomList />", () => {
         jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
     });
 
-    it("should render a room list", () => {
-        const { asFragment } = render(<RoomList vm={vm} />);
+    async function renderList() {
+        const renderResult = render(<RoomList vm={vm} />);
+        // Wait for the row role to be removed
+        await waitFor(() => expect(screen.queryByRole("row")).toBeNull());
+        return renderResult;
+    }
+
+    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 () => {
         const user = userEvent.setup();
 
-        render(<RoomList vm={vm} />);
+        await renderList();
         await waitFor(async () => {
-            expect(screen.getByRole("gridcell", { name: "Open room room9" })).toBeVisible();
-            await user.click(screen.getByRole("gridcell", { name: "Open room room9" }));
+            expect(screen.getByRole("option", { name: "Open room room9" })).toBeVisible();
+            await user.click(screen.getByRole("option", { name: "Open room room9" }));
         });
         expect(vm.openRoom).toHaveBeenCalledWith(vm.rooms[9].roomId);
     });
+
+    it("should remove the role attribute", async () => {
+        await renderList();
+
+        const rowElement = screen.getByRole("listbox").children.item(0)!;
+        expect(rowElement).not.toHaveAttribute("role");
+
+        rowElement.setAttribute("role", "row");
+        await waitFor(() => expect(rowElement).not.toHaveAttribute("role"));
+    });
 });
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 54919fb980..2ee00057e7 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,20 +12,21 @@ 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="grid"
+        role="listbox"
         style="box-sizing: border-box; direction: ltr; height: 1500px; position: relative; width: 1500px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
         tabindex="0"
       >
         <div
           class="ReactVirtualized__Grid__innerScrollContainer"
-          role="row"
           style="width: auto; height: 480px; max-width: 1500px; max-height: 480px; overflow: hidden; position: relative;"
         >
           <button
             aria-label="Open room room0"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
             type="button"
           >
@@ -70,8 +71,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room1"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
             type="button"
           >
@@ -116,8 +118,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room2"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
             type="button"
           >
@@ -162,8 +165,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room3"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
             type="button"
           >
@@ -208,8 +212,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room4"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
             type="button"
           >
@@ -254,8 +259,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room5"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
             type="button"
           >
@@ -300,8 +306,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room6"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
             type="button"
           >
@@ -346,8 +353,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room7"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
             type="button"
           >
@@ -392,8 +400,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room8"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
             type="button"
           >
@@ -438,8 +447,9 @@ exports[`<RoomList /> should render a room list 1`] = `
           </button>
           <button
             aria-label="Open room room9"
+            aria-selected="false"
             class="mx_RoomListCell"
-            role="gridcell"
+            role="option"
             style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
             type="button"
           >