From 58761aa3ffbcaa9d7860fede3d9870398b4e155d Mon Sep 17 00:00:00 2001
From: weilirs <62249815+weilirs@users.noreply.github.com>
Date: Mon, 22 Jan 2024 21:56:41 -0500
Subject: [PATCH] feat: added explanatory text to Settings Keyboard Shortcuts
 (#53048)

Co-authored-by: Mama Naomi <nhcarrigan@gmail.com>
---
 client/i18n/locales/english/translations.json         | 1 +
 client/src/components/settings/about.tsx              | 1 +
 client/src/components/settings/keyboard-shortcuts.tsx | 5 ++++-
 e2e/settings.spec.ts                                  | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 2b235904163..7253fae83d7 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -198,6 +198,7 @@
     "sound-mode": "This adds the pleasant sound of acoustic guitar throughout the website. You'll get musical feedback as you type in the editor, complete challenges, claim certifications, and more.",
     "sound-volume": "Campfire Volume:",
     "scrollbar-width": "Editor Scrollbar Width",
+    "shortcuts-explained": "Within a challenge, press ESC followed by the question mark to show a list of available shortcuts.",
     "username": {
       "contains invalid characters": "Username \"{{username}}\" contains invalid characters",
       "is too short": "Username \"{{username}}\" is too short",
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 5f967ba3bbc..0450f298938 100644
--- a/client/src/components/settings/about.tsx
+++ b/client/src/components/settings/about.tsx
@@ -288,6 +288,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
           <KeyboardShortcutsSettings
             keyboardShortcuts={keyboardShortcuts}
             toggleKeyboardShortcuts={toggleKeyboardShortcuts}
+            explain={t('settings.shortcuts-explained')}
           />
           <ScrollbarWidthSettings />
         </FullWidthRow>
diff --git a/client/src/components/settings/keyboard-shortcuts.tsx b/client/src/components/settings/keyboard-shortcuts.tsx
index 68d97b11dc2..d1044ed632c 100644
--- a/client/src/components/settings/keyboard-shortcuts.tsx
+++ b/client/src/components/settings/keyboard-shortcuts.tsx
@@ -7,11 +7,13 @@ import ToggleButtonSetting from './toggle-button-setting';
 type KeyboardShortcutsProps = {
   keyboardShortcuts: boolean;
   toggleKeyboardShortcuts: (sound: boolean) => void;
+  explain?: string;
 };
 
 export default function KeyboardShortcutsSettings({
   keyboardShortcuts,
-  toggleKeyboardShortcuts
+  toggleKeyboardShortcuts,
+  explain
 }: KeyboardShortcutsProps): JSX.Element {
   const { t } = useTranslation();
 
@@ -19,6 +21,7 @@ export default function KeyboardShortcutsSettings({
     <>
       <ToggleButtonSetting
         action={t('settings.labels.keyboard-shortcuts')}
+        explain={explain}
         flag={keyboardShortcuts}
         flagName='keyboard-shortcuts'
         offLabel={t('buttons.off')}
diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
index 4f86aebfd95..65942c013a1 100644
--- a/e2e/settings.spec.ts
+++ b/e2e/settings.spec.ts
@@ -305,6 +305,7 @@ test.describe('Settings', () => {
           name: translations.settings.labels['keyboard-shortcuts']
         })
         .locator('p')
+        .first()
     ).toBeVisible();
     await expect(
       page.getByText(translations.settings['scrollbar-width'])