Add autofocus for jwt token input

src/features/common/components/code-editor/editor.component.tsx

@@ -18,6 +18,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
   textareaId?: string;
   textareaClassName?: string;
   autoFocus?: boolean;
+  focusOnWindowFocus?: boolean;
   disabled?: boolean;
   form?: string;
   maxLength?: number;
@@ -87,6 +88,15 @@ export class EditorComponent extends React.Component<Props, State> {
 
   componentDidMount() {
     this._recordCurrentState();
+    if (this.props.focusOnWindowFocus) {
+      window.addEventListener("focus", this._focusInput);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.focusOnWindowFocus) {
+      window.removeEventListener("focus", this._focusInput);
+    }
   }
 
   private _recordCurrentState = () => {
@@ -161,6 +171,13 @@ export class EditorComponent extends React.Component<Props, State> {
     this._history.offset++;
   };
 
+  private _focusInput = () => {
+    const input = this._input;
+
+    if (!input) return;
+    input.focus();
+  };
+
   private _updateInput = (record: Record) => {
     const input = this._input;
 
@@ -466,7 +483,7 @@ export class EditorComponent extends React.Component<Props, State> {
         selectionStart,
         selectionEnd,
       },
-      true,
+      true
     );
 
     this.props.onValueChange(value);
@@ -516,6 +533,7 @@ export class EditorComponent extends React.Component<Props, State> {
       insertSpaces,
       ignoreTabKey,
       preClassName,
+      focusOnWindowFocus,
       ...rest
     } = this.props;
 

src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import styles from "./debugger-toolbar.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
 import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
@@ -18,9 +18,22 @@ interface DebuggerToolbarComponentProps {
 export const DebuggerToolbarComponent: React.FC<
   DebuggerToolbarComponentProps
 > = ({ decoderDictionary, encoderDictionary, mode }) => {
+  const tabRefs = useRef<Array<HTMLLIElement | null>>([]);
   const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
-
   const setActiveWidget$ = useDebuggerStore((state) => state.setActiveWidget$);
+  const isDecoder = activeWidget$ === DebuggerWidgetValues.DECODER;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    const { key } = e;
+
+    if (key == "ArrowRight" || key == "ArrowLeft") {
+      setActiveWidget$(
+        isDecoder ? DebuggerWidgetValues.ENCODER : DebuggerWidgetValues.DECODER
+      );
+      e.preventDefault();
+    }
+    tabRefs.current[isDecoder ? 0 : 1]?.focus();
+  };
 
   if (mode === DebuggerModeValues.UNIFIED) {
     return (
@@ -40,8 +53,15 @@ export const DebuggerToolbarComponent: React.FC<
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.DECODER);
               }}
+              onKeyDown={handleKeyDown}
               data-active={activeWidget$ === DebuggerWidgetValues.DECODER}
               data-testid={dataTestidDictionary.debugger.decoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.DECODER}
+              aria-controls={`${DebuggerWidgetValues.DECODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[0] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.DECODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {decoderDictionary.compactTitle}
@@ -53,11 +73,18 @@ export const DebuggerToolbarComponent: React.FC<
             <li
               role="tab"
               className={styles.titleTab}
+              onKeyDown={handleKeyDown}
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.ENCODER);
               }}
               data-active={activeWidget$ === DebuggerWidgetValues.ENCODER}
               data-testid={dataTestidDictionary.debugger.encoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.ENCODER}
+              aria-controls={`${DebuggerWidgetValues.ENCODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[1] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.ENCODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {encoderDictionary.compactTitle}

src/features/decoder/components/jwt-editor.component.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { EditorComponent } from "@/features/common/components/code-editor/editor.component";
 
 interface JwtEditorComponentProps {
@@ -14,6 +14,8 @@ export const JwtEditorComponent: React.FC<JwtEditorComponentProps> = ({
     <EditorComponent
       aria-label="JWT editor input"
       value={token}
+      autoFocus
+      focusOnWindowFocus
       onValueChange={(code) => handleJwtChange(code)}
       highlight={(code) => {
         if (!code) {