Normalized shortcut formatting for quote expansion control (matrix-org#7995)

Author: Sinharitik589

src/components/views/messages/MessageActionBar.tsx

@@ -43,6 +43,8 @@ import ReactionPicker from "../emojipicker/ReactionPicker";
 import { CardContext } from '../right_panel/BaseCard';
 import { showThread } from "../../../dispatcher/dispatch-actions/threads";
 import { shouldDisplayReply } from '../../../utils/Reply';
+import { Key } from "../../../Keyboard";
+import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 
 interface IOptionsButtonProps {
  mxEvent: MatrixEvent;
@@ -382,9 +384,18 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
  'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
  'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
  });
+ const tooltip = <div>
+ <div className="mx_Tooltip_title">
+ { this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes") }
+ </div>
+ <div className="mx_Tooltip_sub">
+ { _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("Click") }
+ </div>
+ </div>;
  toolbarOpts.push(<RovingAccessibleTooltipButton
  className={expandClassName}
- title={this.props.isQuoteExpanded ? _t("Collapse quotes │ ⇧+click") : _t("Expand quotes │ ⇧+click")}
+ title={this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes")}
+ tooltip={tooltip}
  onClick={this.props.toggleThreadExpanded}
  key="expand"
  />);

src/i18n/strings/en_EN.json

@@ -2104,8 +2104,9 @@
  "Edit": "Edit",
  "Reply in thread": "Reply in thread",
  "Reply": "Reply",
- "Collapse quotes │ ⇧+click": "Collapse quotes │ ⇧+click",
- "Expand quotes │ ⇧+click": "Expand quotes │ ⇧+click",
+ "Collapse quotes": "Collapse quotes",
+ "Expand quotes": "Expand quotes",
+ "Click": "Click",
  "Download %(text)s": "Download %(text)s",
  "Error decrypting attachment": "Error decrypting attachment",
  "Decrypt %(text)s": "Decrypt %(text)s",