fix(react): terminal's tablist missing tabs and tabpanels

Author: AriPerkkio

packages/components/react/src/Panels/TerminalPanel.tsx

@@ -70,7 +70,10 @@ export function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps) {
                       },
                     )}
                     title={title}
+                    id={`tk-terminal-tab-${index}`}
+                    role="tab"
                     aria-selected={selected}
+                    aria-controls={`tk-terminal-tapbanel-${index}`}
                     onClick={() => setTabIndex(index)}
                   >
                     <span
@@ -93,6 +96,9 @@ export function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps) {
             {terminalConfig.panels.map(({ id, type }, index) => (
               <Terminal
                 key={id}
+                role="tabpanel"
+                id={`tk-terminal-tapbanel-${index}`}
+                aria-labelledby={`tk-terminal-tab-${index}`}
                 className={tabIndex !== index ? 'hidden h-full' : 'h-full'}
                 theme={theme}
                 readonly={type === 'output'}

packages/components/react/src/core/Terminal/index.tsx

@@ -2,7 +2,7 @@ import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { Terminal as XTerm } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, type ComponentProps } from 'react';
 import '../../styles/terminal.css';
 import { getTerminalTheme } from './theme.js';
 
@@ -13,13 +13,28 @@ export interface TerminalRef {
 export interface TerminalProps {
   theme: 'dark' | 'light';
   className?: string;
+  id?: string;
+  role?: ComponentProps<'div'>['role'];
+  'aria-labelledby'?: string;
   readonly?: boolean;
   onTerminalReady?: (terminal: XTerm) => void;
   onTerminalResize?: (cols: number, rows: number) => void;
 }
 
 export const Terminal = forwardRef<TerminalRef, TerminalProps>(
-  ({ theme, className = '', readonly = true, onTerminalReady, onTerminalResize }, ref) => {
+  (
+    {
+      theme,
+      className,
+      id,
+      role,
+      'aria-labelledby': ariaLabelledby,
+      readonly = true,
+      onTerminalReady,
+      onTerminalResize,
+    },
+    ref,
+  ) => {
     const divRef = useRef<HTMLDivElement>(null);
     const terminalRef = useRef<XTerm>();
 
@@ -79,7 +94,7 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(
       };
     }, []);
 
-    return <div className={className} ref={divRef} />;
+    return <div id={id} role={role} aria-labelledby={ariaLabelledby} className={className} ref={divRef} />;
   },
 );