Decorate view keyboard shortcuts link as a link (#7260)

matrix-org · Dec 2, 2021 · b69ad0c · b69ad0c
1 parent 5169bca
commit b69ad0c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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",