From 8c08293654f9ac6dac181d079b231d631f4e3b38 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 17 Sep 2021 11:36:22 +0100
Subject: [PATCH] Fix reactions aria-label not being a string and thus being
 read as [Object object]

---
 .../views/elements/MemberEventListSummary.tsx |  2 +-
 .../views/messages/ReactionsRowButton.tsx     | 29 ++++++-------------
 src/i18n/strings/en_EN.json                   |  2 +-
 src/utils/FormattingUtils.ts                  | 29 +++++++++++++++----
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx
index 0722cb872a..4eb0177fef 100644
--- a/src/components/views/elements/MemberEventListSummary.tsx
+++ b/src/components/views/elements/MemberEventListSummary.tsx
@@ -135,7 +135,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
 
             const desc = formatCommaSeparatedList(descs);
 
-            return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
+            return _t('%(nameList)s %(transitionList)s', { nameList, transitionList: desc });
         });
 
         if (!summaries) {
diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 7498a49173..8934b2b98f 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -106,31 +106,20 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        let label;
+        let label: string;
         if (room) {
             const senders = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender());
-                const name = member ? member.name : reactionEvent.getSender();
-                senders.push(name);
+                senders.push(member?.name || reactionEvent.getSender());
+            }
+
+            const reactors = formatCommaSeparatedList(senders, 6);
+            if (content) {
+                label = _t("%(reactors)s reacted with %(content)s", { reactors, content });
+            } else {
+                label = reactors;
             }
-            label = _t(
-                "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
-                {
-                    content,
-                },
-                {
-                    reactors: () => {
-                        return formatCommaSeparatedList(senders, 6);
-                    },
-                    reactedWith: (sub) => {
-                        if (!content) {
-                            return null;
-                        }
-                        return sub;
-                    },
-                },
-            );
         }
         const isPeeking = room.getMyMembership() !== "join";
         return <AccessibleButton
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 70834c486b..da1adb5579 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1976,7 +1976,7 @@
     "Add reaction": "Add reaction",
     "Show all": "Show all",
     "Reactions": "Reactions",
-    "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
+    "%(reactors)s reacted with %(content)s": "%(reactors)s reacted with %(content)s",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
     "Message deleted": "Message deleted",
     "Message deleted by %(name)s": "Message deleted by %(name)s",
diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts
index b527ee7ea2..265deaed38 100644
--- a/src/utils/FormattingUtils.ts
+++ b/src/utils/FormattingUtils.ts
@@ -104,7 +104,10 @@ export function getUserNameColorClass(userId: string): string {
  * @returns {string} a string constructed by joining `items` with a comma
  * between each item, but with the last item appended as " and [lastItem]".
  */
-export function formatCommaSeparatedList(items: Array<string | JSX.Element>, itemLimit?: number): string | JSX.Element {
+export function formatCommaSeparatedList(items: string[], itemLimit?: number): string;
+export function formatCommaSeparatedList(items: JSX.Element[], itemLimit?: number): JSX.Element;
+export function formatCommaSeparatedList(items: Array<JSX.Element | string>, itemLimit?: number): JSX.Element | string;
+export function formatCommaSeparatedList(items: Array<JSX.Element | string>, itemLimit?: number): JSX.Element | string {
     const remaining = itemLimit === undefined ? 0 : Math.max(
         items.length - itemLimit, 0,
     );
@@ -112,11 +115,25 @@ export function formatCommaSeparatedList(items: Array<string | JSX.Element>, ite
         return "";
     } else if (items.length === 1) {
         return items[0];
-    } else if (remaining > 0) {
-        items = items.slice(0, itemLimit);
-        return _t("%(items)s and %(count)s others", { items: jsxJoin(items, ', '), count: remaining } );
     } else {
-        const lastItem = items.pop();
-        return _t("%(items)s and %(lastItem)s", { items: jsxJoin(items, ', '), lastItem: lastItem });
+        let lastItem;
+        if (remaining > 0) {
+            items = items.slice(0, itemLimit);
+        } else {
+            lastItem = items.pop();
+        }
+
+        let joinedItems;
+        if (items.every(e => typeof e === "string")) {
+            joinedItems = items.join(", ");
+        } else {
+            joinedItems = jsxJoin(items, ", ");
+        }
+
+        if (remaining > 0) {
+            return _t("%(items)s and %(count)s others", { items: joinedItems, count: remaining } );
+        } else {
+            return _t("%(items)s and %(lastItem)s", { items: joinedItems, lastItem });
+        }
     }
 }