Show who reacted in aria-label of reactions

_locales/en/messages.json

@@ -5070,6 +5070,18 @@
     "messageformat": "Cancel",
     "description": "Appears on the cancel button in confirmation dialogs."
   },
+  "icu:Message__reaction-emoji-label--you": {
+    "messageformat": "You reacted with {emoji}",
+    "description": "aria-label for reaction emoji (you)"
+  },
+  "icu:Message__reaction-emoji-label--single": {
+    "messageformat": "{title} reacted with {emoji}",
+    "description": "aria-label for reaction emoji when one person reacts with an emoji"
+  },
+  "icu:Message__reaction-emoji-label--many": {
+    "messageformat": "{count} people reacted with {emoji}",
+    "description": "Used as an aria-label for when many people react to a message. Count is always greater than 1"
+  },
   "icu:Message__role-description": {
     "messageformat": "Message",
     "description": "aria-roledescription of a message"
@@ -10475,7 +10487,7 @@
     "description": "Title for the avatar picker in the group creation flow"
   },
   "icu:Preferences__message-audio-title": {
-    "messageformat": "In-chat message sound",
+    "messageformat": "In-chat message sounds",
     "description": "Title for message audio setting"
   },
   "icu:Preferences__message-audio-description": {

ts/components/conversation/Message.tsx

@@ -2107,11 +2107,33 @@ export class Message extends React.PureComponent<Props, State> {
       ['desc', 'desc']
     );
     // Take the first three groups for rendering
-    const toRender = take(ordered, 3).map(res => ({
-      emoji: res[0].emoji,
-      count: res.length,
-      isMe: res.some(re => Boolean(re.from.isMe)),
-    }));
+    const toRender = take(ordered, 3).map(res => {
+      const isMe = res.some(re => Boolean(re.from.isMe));
+      const count = res.length;
+      const { emoji } = res[0];
+
+      let label: string;
+      if (isMe) {
+        label = i18n('icu:Message__reaction-emoji-label--you', { emoji });
+      } else if (count === 1) {
+        label = i18n('icu:Message__reaction-emoji-label--single', {
+          title: res[0].from.title,
+          emoji,
+        });
+      } else {
+        label = i18n('icu:Message__reaction-emoji-label--many', {
+          count,
+          emoji,
+        });
+      }
+
+      return {
+        count,
+        emoji,
+        isMe,
+        label,
+      };
+    });
     const someNotRendered = ordered.length > 3;
     // We only drop two here because the third emoji would be replaced by the
     // more button
@@ -2154,6 +2176,7 @@ export class Message extends React.PureComponent<Props, State> {
 
                 return (
                   <button
+                    aria-label={re.label}
                     type="button"
                     // eslint-disable-next-line react/no-array-index-key
                     key={`${re.emoji}-${i}`}