Merge pull request #2465 from Sheikh-JamirAlam/develop-Shortcuts

Changed Shortcut format for better accessibility

Author: raclim

client/modules/IDE/components/Header/Nav.jsx

@@ -206,9 +206,7 @@ const ProjectMenu = () => {
       <NavDropdownMenu id="edit" title={t('Nav.Edit.Title')}>
         <NavMenuItem onClick={cmRef.current?.tidyCode}>
           {t('Nav.Edit.TidyCode')}
-          <span className="nav__keyboard-shortcut">
-            {metaKeyName}+{'\u21E7'}+F
-          </span>
+          <span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
         </NavMenuItem>
         <NavMenuItem onClick={cmRef.current?.showFind}>
           {t('Nav.Edit.Find')}
@@ -233,7 +231,7 @@ const ProjectMenu = () => {
         <NavMenuItem onClick={() => dispatch(stopSketch())}>
           {t('Nav.Sketch.Stop')}
           <span className="nav__keyboard-shortcut">
-            {'\u21E7'}+{metaKeyName}+Enter
+            Shift+{metaKeyName}+Enter
           </span>
         </NavMenuItem>
       </NavDropdownMenu>

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -537,7 +537,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+⇧+F
+                  Ctrl+Shift+F
                 </span>
               </button>
             </li>
@@ -549,7 +549,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+F
+                  Ctrl+F
                 </span>
               </button>
             </li>
@@ -561,7 +561,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+H
+                  Ctrl+H
                 </span>
               </button>
             </li>
@@ -607,7 +607,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+Enter
+                  Ctrl+Enter
                 </span>
               </button>
             </li>
@@ -619,7 +619,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⇧+⌃+Enter
+                  Shift+Ctrl+Enter
                 </span>
               </button>
             </li>

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -25,7 +25,7 @@ function KeyboardShortcutModal() {
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + F
+            {metaKeyName} + Shift + F
           </span>
           <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
         </li>
@@ -39,7 +39,7 @@ function KeyboardShortcutModal() {
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + G
+            {metaKeyName} + Shift + G
           </span>
           <span>
             {t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}
@@ -84,24 +84,24 @@ function KeyboardShortcutModal() {
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + Enter
+            {metaKeyName} + Shift + Enter
           </span>
           <span>{t('KeyboardShortcuts.General.StopSketch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + 1
+            {metaKeyName} + Shift + 1
           </span>
           <span>{t('KeyboardShortcuts.General.TurnOnAccessibleOutput')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + 2
+            {metaKeyName} + Shift + 2
           </span>
           <span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
         </li>
         <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{'\u21E7'} + Right</span>
+          <span className="keyboard-shortcut__command">Shift + Right</span>
           <span>Go to Reference for Selected Item in Hinter</span>
         </li>
       </ul>

client/utils/metaKey.js

@@ -6,6 +6,6 @@ const metaKey = (() => {
   return 'Ctrl';
 })();
 
-const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
+const metaKeyName = metaKey === 'Cmd' ? '⌘' : 'Ctrl';
 
 export { metaKey, metaKeyName };