test(room list): wait for the row role to be removed, update a11y role and add tests to role observer

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", () => {
+    async function renderList() {
-        const { asFragment } = render(<RoomList vm={vm} />);
+        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();
+            expect(screen.getByRole("option", { name: "Open room room9" })).toBeVisible();
-            await user.click(screen.getByRole("gridcell", { name: "Open room room9" }));
+            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"));
+    });
 });

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"
           >