diff --git a/client/src/templates/Challenges/classic/Show.tsx b/client/src/templates/Challenges/classic/Show.tsx index e261320f0f6..94ffdea78b4 100644 --- a/client/src/templates/Challenges/classic/Show.tsx +++ b/client/src/templates/Challenges/classic/Show.tsx @@ -119,6 +119,7 @@ class ShowClassic extends Component { static displayName: string; containerRef: React.RefObject; editorRef: React.RefObject; + instructionsPanelRef: React.RefObject; resizeProps: ResizePropsType; // eslint-disable-next-line @typescript-eslint/no-explicit-any layoutState: any; @@ -137,6 +138,7 @@ class ShowClassic extends Component { 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 { 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 { editorRef={this.editorRef} executeChallenge={executeChallenge} innerRef={this.containerRef} + instructionsPanelRef={this.instructionsPanelRef} nextChallengePath={nextChallengePath} prevChallengePath={prevChallengePath} > diff --git a/client/src/templates/Challenges/components/Hotkeys.tsx b/client/src/templates/Challenges/components/Hotkeys.tsx index fa30b4e6e2a..4f1a357e842 100644 --- a/client/src/templates/Challenges/components/Hotkeys.tsx +++ b/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 | any; executeChallenge?: () => void; innerRef: React.Ref | unknown; + instructionsPanelRef?: React.RefObject; 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); diff --git a/client/src/templates/Challenges/components/Side-Panel.js b/client/src/templates/Challenges/components/Side-Panel.js index 32f2244de85..05f7c52f590 100644 --- a/client/src/templates/Challenges/components/Side-Panel.js +++ b/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 ( -
+