mirror of
https://github.com/element-hq/element-web
synced 2024-11-28 04:21:57 +03:00
Merge pull request #6828 from matrix-org/t3chguy/fix/a11y-label
This commit is contained in:
commit
b91ece1bcf
4 changed files with 34 additions and 28 deletions
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue