add key binding for switching panels and enable autofocus on mount

Author: javiert-okta

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,26 @@ 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;
+  
+  useEffect(() => {
+    tabRefs.current[isDecoder ? 0 : 1]?.focus();
+  }, [isDecoder]);
+
+  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 +57,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 +77,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}