From 4592f9f7f9597f94103429c49ba8ca29629d4acc Mon Sep 17 00:00:00 2001
From: Sinharitik589 <67551927+Sinharitik589@users.noreply.github.com>
Date: Wed, 9 Mar 2022 15:22:31 +0530
Subject: [PATCH] Normalized shortcut formatting for quote expansion control
 (#7995)

---
 src/components/views/messages/MessageActionBar.tsx | 13 ++++++++++++-
 src/i18n/strings/en_EN.json                        |  5 +++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index cb906fc926..9ceed42038 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/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"
                 />);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8a228a6acc..411169378b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",