feat: added explanatory text to Settings Keyboard Shortcuts (#53048)

Co-authored-by: Mama Naomi <nhcarrigan@gmail.com>

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",

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>

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')}

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'])