Add axe compliance for new room list (#30700)

* Add tests for axe violations for the new room list

* axe doesn't like a ul/li with roles listbox/option. Changing to div/button as we have elsewhere like RoomListitemView.

* Fix RoomListPrimaryFilters test

* Justify the items in the primary filter container

to get the dropdown button on the right again

* Update snapshot

* Make the room list itself focusable

As the comment said, there was no real reason it needed to be, except
that there was because of axe. Probably having the children focusable
would be better, but Virtuoso wraps them in more divs which doesn't
satisfy axe's requirements since those inner divs are not the scrollable
ones. I can't see a better option than this right now.

* Update snapshot

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx

@@ -63,7 +63,7 @@ describe("<RoomListPrimaryFilters />", () => {
         render(<RoomListPrimaryFilters vm={vm} />);
 
         // Click on an inactive filter
-        await user.click(screen.getByRole("button", { name: "People" }));
+        await user.click(screen.getByRole("option", { name: "People" }));
 
         // Check that the toggle function was called
         expect(filterToggleMocks[0]).toHaveBeenCalledTimes(1);

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

@@ -9,6 +9,7 @@ exports[`<RoomList /> should render a room list 1`] = `
     data-virtuoso-scroller="true"
     role="listbox"
     style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+    tabindex="0"
   >
     <div
       data-viewport-type="element"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap

@@ -5,58 +5,43 @@ exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
   <div
     class="flex mx_RoomListPrimaryFilters"
     data-testid="primary-filters"
-    style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
-    <ul
+    <div
       aria-label="Room list filters"
       class="flex"
       id="«r0»"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
     >
-      <li
+      <button
         aria-hidden="false"
         aria-selected="false"
+        class="_chat-filter_5qdp0_8"
         role="option"
+        tabindex="0"
       >
-        <button
-          aria-selected="false"
-          class="_chat-filter_5qdp0_8"
-          role="button"
-          tabindex="0"
-        >
-          People
-        </button>
-      </li>
-      <li
+        People
+      </button>
+      <button
         aria-hidden="false"
         aria-selected="true"
+        class="_chat-filter_5qdp0_8"
         role="option"
+        tabindex="0"
       >
-        <button
-          aria-selected="true"
-          class="_chat-filter_5qdp0_8"
-          role="button"
-          tabindex="0"
-        >
-          Rooms
-        </button>
-      </li>
-      <li
+        Rooms
+      </button>
+      <button
         aria-hidden="false"
         aria-selected="false"
+        class="_chat-filter_5qdp0_8"
         role="option"
+        tabindex="0"
       >
-        <button
-          aria-selected="false"
-          class="_chat-filter_5qdp0_8"
-          role="button"
-          tabindex="0"
-        >
-          Unreads
-        </button>
-      </li>
-    </ul>
+        Unreads
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;