feat(client): shortcuts legend modal available on pressing the ? key (#45530)

* Add modal texts in translations.json file

* Add shortcuts modal state in redux

* Create shortcuts modal

* Integrate shortcuts modal

* Resolve codefactor.io issues

* Extend list of shortcuts

Based on this comment:
https://github.com/freeCodeCamp/freeCodeCamp/issues/36841#issuecomment-933310078

* Remove temporary placeholder for modal title

* Open modal fom Hotkeys instead of learn.tsx

As suggested in this comment:
https://github.com/freeCodeCamp/freeCodeCamp/pull/45530#issuecomment-1101224993

* Complete list in transaltions

* Change shortcut presentation fo better a11y

Use table instead of list items as suggestedin this comment:
https://github.com/freeCodeCamp/freeCodeCamp/pull/45530#issuecomment-1101796368

* Add aria-labelledby

* Remove GAnalytics

* Remove leftover style

* Remove table caption

* autofocus on modal close button

* Improve modal a11y

- Add requested changes from https://github.com/freeCodeCamp/freeCodeCamp/pull/45530#issuecomment-1104764766
- Leave autofocus and parent div role=dialog changes for later. (https://github.com/freeCodeCamp/freeCodeCamp/pull/45530#issuecomment-1107754148)

* [WIP] Alllow users to turn off keyboard shortcuts

* Add keyboard shortcuts switch in settings

* Disable shortcuts

* Remove toggle switch description

* Refactor and cleanup

* Remove close button from modal header

Suggested by bbsmooth:
https://github.com/freeCodeCamp/freeCodeCamp/pull/45530#issuecomment-1107861091

* Fix lint issues

* Disable shortcuts

* Disable shortcuts by default

* Update challenge output test

* Update challenge-hot-keys test

* Disable shortcuts from inside handlers

Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

api-server/src/common/models/user.json

@@ -317,6 +317,10 @@
       "type": "boolean",
       "default": false
     },
+    "keyboardShortcuts": {
+      "type": "boolean",
+      "default": false
+    },
     "profileUI": {
       "type": "object",
       "default": {

api-server/src/server/boot/settings.js

@@ -45,6 +45,11 @@ export default function settingsController(app) {
   api.put('/update-user-flag', ifNoUser401, updateUserFlag);
   api.put('/update-my-socials', ifNoUser401, updateMySocials);
   api.put('/update-my-sound', ifNoUser401, updateMySound);
+  api.put(
+    '/update-my-keyboard-shortcuts',
+    ifNoUser401,
+    updateMyKeyboardShortcuts
+  );
   api.put('/update-my-honesty', ifNoUser401, updateMyHonesty);
   api.put('/update-my-quincy-email', ifNoUser401, updateMyQuincyEmail);
 
@@ -234,6 +239,13 @@ function updateMySound(...args) {
   createUpdateUserProperties(buildUpdate, validate)(...args);
 }
 
+function updateMyKeyboardShortcuts(...args) {
+  const buildUpdate = body => _.pick(body, 'keyboardShortcuts');
+  const validate = ({ keyboardShortcuts }) =>
+    typeof keyboardShortcuts === 'boolean';
+  createUpdateUserProperties(buildUpdate, validate)(...args);
+}
+
 function updateMyHonesty(...args) {
   const buildUpdate = body => _.pick(body, 'isHonest');
   const validate = ({ isHonest }) => isHonest === true;
@@ -271,6 +283,7 @@ function updateUserFlag(req, res, next) {
   const allowedKeys = [
     'theme',
     'sound',
+    'keyboardShortcuts',
     'isHonest',
     'portfolio',
     'sendQuincyEmail',

api-server/src/server/utils/publicUserProps.js

@@ -55,6 +55,7 @@ export const userPropsForSession = [
   'sendQuincyEmail',
   'theme',
   'sound',
+  'keyboardShortcuts',
   'completedChallengeCount',
   'completedProjectCount',
   'completedCertCount',