Fix reactions aria-label not being a string and thus being read as [Object object]

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) {

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

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",

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 });
+ }
  }
 }