feat(client): add hotkey 'r' to focus on instructions panel (#42503)

client/src/templates/Challenges/classic/Show.tsx

@@ -119,6 +119,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
   static displayName: string;
   containerRef: React.RefObject<unknown>;
   editorRef: React.RefObject<unknown>;
+  instructionsPanelRef: React.RefObject<HTMLElement>;
   resizeProps: ResizePropsType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   layoutState: any;
@@ -137,6 +138,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
 
     this.containerRef = React.createRef();
     this.editorRef = React.createRef();
+    this.instructionsPanelRef = React.createRef();
     // Holds the information of the panes sizes for desktop view
     this.layoutState = this.getLayoutState();
   }
@@ -278,6 +280,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
         description={description}
         guideUrl={getGuideUrl({ forumTopicId, title })}
         instructions={instructions}
+        instructionsPanelRef={this.instructionsPanelRef}
         showToolPanel={showToolPanel}
         superBlock={superBlock}
         title={title}
@@ -356,6 +359,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
         editorRef={this.editorRef}
         executeChallenge={executeChallenge}
         innerRef={this.containerRef}
+        instructionsPanelRef={this.instructionsPanelRef}
         nextChallengePath={nextChallengePath}
         prevChallengePath={prevChallengePath}
       >

client/src/templates/Challenges/components/Hotkeys.tsx

@@ -22,6 +22,7 @@ const keyMap = {
   NAVIGATION_MODE: 'escape',
   EXECUTE_CHALLENGE: ['ctrl+enter', 'command+enter'],
   FOCUS_EDITOR: 'e',
+  FOCUS_INSTRUCTIONS_PANEL: 'r',
   NAVIGATE_PREV: ['p'],
   NAVIGATE_NEXT: ['n']
 };
@@ -33,6 +34,7 @@ interface HotkeysProps {
   editorRef?: React.Ref<HTMLElement> | any;
   executeChallenge?: () => void;
   innerRef: React.Ref<HTMLElement> | unknown;
+  instructionsPanelRef?: React.RefObject<HTMLElement>;
   nextChallengePath: string;
   prevChallengePath: string;
   setEditorFocusability: (arg0: boolean) => void;
@@ -41,6 +43,7 @@ interface HotkeysProps {
 function Hotkeys({
   canFocusEditor,
   children,
+  instructionsPanelRef,
   editorRef,
   executeChallenge,
   innerRef,
@@ -63,6 +66,11 @@ function Hotkeys({
         editorRef.current.getWrappedInstance().editor.focus();
       }
     },
+    FOCUS_INSTRUCTIONS_PANEL: () => {
+      if (instructionsPanelRef && instructionsPanelRef.current) {
+        instructionsPanelRef.current.focus();
+      }
+    },
     NAVIGATION_MODE: () => setEditorFocusability(false),
     NAVIGATE_PREV: () => {
       if (!canFocusEditor) void navigate(prevChallengePath);

client/src/templates/Challenges/components/Side-Panel.js

@@ -26,6 +26,7 @@ const propTypes = {
   description: PropTypes.string,
   guideUrl: PropTypes.string,
   instructions: PropTypes.string,
+  instructionsPanelRef: PropTypes.any.isRequired,
   isChallengeCompleted: PropTypes.bool,
   showToolPanel: PropTypes.bool,
   superBlock: PropTypes.string,
@@ -72,6 +73,7 @@ export class SidePanel extends Component {
       title,
       description,
       instructions,
+      instructionsPanelRef,
       isChallengeCompleted,
       guideUrl,
       tests,
@@ -81,7 +83,12 @@ export class SidePanel extends Component {
       videoUrl
     } = this.props;
     return (
-      <div className='instructions-panel' role='complementary' tabIndex='-1'>
+      <div
+        className='instructions-panel'
+        ref={instructionsPanelRef}
+        role='complementary'
+        tabIndex='-1'
+      >
         <div>
           <ChallengeTitle
             block={block}