From 90ea6c4cb76e0003f45d842e824ee00b656de65c Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 20 May 2024 12:51:23 +0530
Subject: [PATCH] Give speecial aria-label to the DIV

---
 src/components/views/avatars/MemberAvatar.tsx |  2 +-
 src/components/views/rooms/EventTile.tsx      | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 51485473f82d..7d7b0db3a286 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/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}
         />
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 6822c71a5cd4..8038f59b23b4 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/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}