From b69ad0cd0b4628267e0282fa21b624c7de2e03aa Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 2 Dec 2021 13:43:10 +0000
Subject: [PATCH] Decorate view keyboard shortcuts link as a link (#7260)

---
 .../tabs/user/_PreferencesUserSettingsTab.scss         |  5 +++++
 .../settings/tabs/user/PreferencesUserSettingsTab.tsx  | 10 +++++++---
 src/i18n/strings/en_EN.json                            |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
index 16f607c95f6..b5791560c7d 100644
--- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
@@ -32,6 +32,11 @@ limitations under the License.
                 margin-top: 20px;
             }
         }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
     }
 
     .mx_PreferencesUserSettingsTab_CommunityMigrator {
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 21cebd7ea04..949730fdcd8 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -359,9 +359,13 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Keyboard shortcuts") }</span>
-                    <AccessibleButton className="mx_SettingsFlag" onClick={KeyboardShortcuts.toggleDialog}>
-                        { _t("To view all keyboard shortcuts, click here.") }
-                    </AccessibleButton>
+                    <div className="mx_SettingsFlag">
+                        { _t("To view all keyboard shortcuts, <a>click here</a>.", {}, {
+                            a: sub => <AccessibleButton kind="link" onClick={KeyboardShortcuts.toggleDialog}>
+                                { sub }
+                            </AccessibleButton>,
+                        }) }
+                    </div>
                     { this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS) }
                 </div>
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 30d82dbe265..547818bf87d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1429,7 +1429,7 @@
     "Show my Communities": "Show my Communities",
     "If a community isn't shown you may not have permission to convert it.": "If a community isn't shown you may not have permission to convert it.",
     "Keyboard shortcuts": "Keyboard shortcuts",
-    "To view all keyboard shortcuts, click here.": "To view all keyboard shortcuts, click here.",
+    "To view all keyboard shortcuts, <a>click here</a>.": "To view all keyboard shortcuts, <a>click here</a>.",
     "Displaying time": "Displaying time",
     "Composer": "Composer",
     "Code blocks": "Code blocks",