Give speecial aria-label to the DIV

src/components/views/avatars/MemberAvatar.tsx

@@ -103,7 +103,7 @@ function MemberAvatar(
                       }
                     : props.onClick
             }
-            aria-label={name ? name + ". " : ""} // Full stop adds a pause between the name and the appended message.
+            aria-label={name ?? ""}
             altText={_t("common|user_avatar")}
             ref={ref}
         />

src/components/views/rooms/EventTile.tsx

@@ -1064,7 +1064,18 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 <div
                     className="mx_EventTile_avatar"
                     id={"mx_EventTile_avatar_" + this.props.mxEvent.getId()}
+                    role="img"
                     tabIndex={-1}
+                    /**
+                     * The accessible name of this DIV (which is the aria-label) is used within
+                     * aria-labelledby in the li elements rendered below.
+                     *
+                     * The accessible name of the li element would thus be computed as name + message.
+                     *
+                     * We append a dot to the name so that screen readers pause after reading out the
+                     * name i.e it reads out name + <pause> + message.
+                     */
+                    aria-label={member?.name ? member.name + ". " : ""}
                 >
                     <MemberAvatar
                         member={member}