Polish workbench keyboard focus

frontend/src/components/inspector/WorkbenchInspector.tsx

@@ -86,6 +86,8 @@ export function WorkbenchInspector({
   )
   const latestQualityCheck = qualityChecks[0] ?? null
   const latestPersistedExport = exports[0] ?? null
+  const activeTabId = `inspector-tab-${activeTab}`
+  const activePanelId = `inspector-panel-${activeTab}`
 
   const tabs: Array<{ key: InspectorTab; label: string }> = [
     { key: 'context', label: 'Context' },
@@ -111,6 +113,8 @@ export function WorkbenchInspector({
             onClick={() => setActiveTab(tab.key)}
             role="tab"
             aria-selected={activeTab === tab.key}
+            aria-controls={`inspector-panel-${tab.key}`}
+            id={`inspector-tab-${tab.key}`}
             data-testid={`inspector-tab-${tab.key}`}
           >
             {tab.label}
@@ -119,7 +123,7 @@ export function WorkbenchInspector({
       </div>
 
       {activeTab === 'context' ? (
-        <div className="inspector-tab-panel">
+        <div className="inspector-tab-panel" role="tabpanel" id={activePanelId} aria-labelledby={activeTabId}>
           <div className="inspector-card">
             <h3>Project context</h3>
             <InspectorField label="Project" value={selectedProject?.name} />
@@ -157,7 +161,7 @@ export function WorkbenchInspector({
       ) : null}
 
       {activeTab === 'dataset' ? (
-        <div className="inspector-tab-panel">
+        <div className="inspector-tab-panel" role="tabpanel" id={activePanelId} aria-labelledby={activeTabId}>
           <div className="inspector-action-bar">
             <button type="button" className="secondary-action" onClick={onOpenDataWorkspace}>
               Data catalog
@@ -174,7 +178,7 @@ export function WorkbenchInspector({
       ) : null}
 
       {activeTab === 'quality' ? (
-        <div className="inspector-tab-panel">
+        <div className="inspector-tab-panel" role="tabpanel" id={activePanelId} aria-labelledby={activeTabId}>
           <div className="inspector-card">
             <h3>Latest QA/QC</h3>
             <InspectorField label="Check type" value={latestQualityCheck?.check_type} />
@@ -205,7 +209,7 @@ export function WorkbenchInspector({
       ) : null}
 
       {activeTab === 'ai' ? (
-        <div className="inspector-tab-panel">
+        <div className="inspector-tab-panel" role="tabpanel" id={activePanelId} aria-labelledby={activeTabId}>
           <div className="inspector-card">
             <h3>Detection run</h3>
             <InspectorField label="Selected run" value={selectedDetectionRunId} />