From 98edc467e06d36c05f51c090a463e7bcb2534283 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Fri, 29 Oct 2021 07:30:05 -0500
Subject: [PATCH] Give each room directory entry the `listitem` role to
 correspond with the containing `list`. (#7035)

---
 res/css/structures/_RoomDirectory.scss      |  9 ++++++--
 src/components/structures/RoomDirectory.tsx | 23 ++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index b6219da9e4..0137db7ebf 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -121,7 +121,7 @@ limitations under the License.
         vertical-align: text-top;
         margin-right: 2px;
         content: "";
-        mask: url('$(res)/img/feather-customised/user.svg');
+        mask: url("$(res)/img/feather-customised/user.svg");
         mask-repeat: no-repeat;
         mask-position: center;
         // scale it down and make the size slightly bigger (16 instead of 14px)
@@ -132,7 +132,8 @@ limitations under the License.
     }
 }
 
-.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
+.mx_RoomDirectory_join,
+.mx_RoomDirectory_preview {
     align-self: center;
     white-space: nowrap;
 }
@@ -220,3 +221,7 @@ limitations under the License.
         margin-top: 5px;
     }
 }
+
+.mx_RoomDirectory_listItem {
+    display: contents;
+}
diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 56e6b2dfb8..9c5a97578c 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -589,9 +589,12 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32);
 
         // We use onMouseDown instead of onClick, so that we can avoid text getting selected
-        return [
+        return <div
+            key={room.room_id}
+            role="listitem"
+            className="mx_RoomDirectory_listItem"
+        >
             <div
-                key={`${room.room_id}_avatar`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomAvatar"
             >
@@ -603,9 +606,8 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                     idName={name}
                     url={avatarUrl}
                 />
-            </div>,
+            </div>
             <div
-                key={`${room.room_id}_description`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomDescription"
             >
@@ -626,30 +628,27 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 >
                     { getDisplayAliasForRoom(room) }
                 </div>
-            </div>,
+            </div>
             <div
-                key={`${room.room_id}_memberCount`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomMemberCount"
             >
                 { room.num_joined_members }
-            </div>,
+            </div>
             <div
-                key={`${room.room_id}_preview`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 // cancel onMouseDown otherwise shift-clicking highlights text
                 className="mx_RoomDirectory_preview"
             >
                 { previewButton }
-            </div>,
+            </div>
             <div
-                key={`${room.room_id}_join`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_join"
             >
                 { joinOrViewButton }
-            </div>,
-        ];
+            </div>
+        </div>;
     }
 
     private stringLooksLikeId(s: string, fieldType: IFieldType) {