diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c415321b967f..1cecf9e9b125 100644 --- a/_locales/en/messages.json +++ b/_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": { diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index a08052cc2ea8..3b5d6a6300b0 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -2107,11 +2107,33 @@ export class Message extends React.PureComponent { ['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 { return (