Merge pull request #6828 from matrix-org/t3chguy/fix/a11y-label

matrix-org · Sep 17, 2021 · b91ece1 · b91ece1
2 parents cf8100a + 8c08293
commit b91ece1
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 28 deletions.
diff --git 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
@@ -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
@@ -1977,7 +1977,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
@@ -104,19 +104,36 @@ 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,
     );
     if (items.length === 0) {
         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 });
+        }
     }
 }