Upgrade async GPU analysis and workbench UX

2026-08-23 21:50:11 +02:00
parent 4040cbca7b
commit b996986d20
59 changed files with 3999 additions and 274 deletions
@@ -23,4 +23,45 @@ describe('AiPipelineIllustration', () => {
    fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
    expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
  })
+
+  it('moves selection and focus through the tablist with keyboard controls', () => {
+    render(
+      <AiPipelineIllustration
+        hasImagery
+        hasTiles
+        gpuReady
+        hasDetections={false}
+        hasQualityEvidence={false}
+        running={false}
+      />,
+    )
+
+    const tabs = screen.getAllByRole('tab') as HTMLButtonElement[]
+    const selectedTab = screen.getByRole('tab', { name: /Detecties/ }) as HTMLButtonElement
+    const panel = screen.getByRole('tabpanel')
+
+    expect(selectedTab.tabIndex).toBe(0)
+    expect(tabs.filter((tab) => tab.tabIndex === 0)).toHaveLength(1)
+    expect(selectedTab.getAttribute('aria-controls')).toBe(panel.id)
+    expect(panel.getAttribute('aria-labelledby')).toBe(selectedTab.id)
+
+    selectedTab.focus()
+    fireEvent.keyDown(selectedTab, { key: 'ArrowRight' })
+    expect(screen.getByRole('tab', { name: /QA-bewijs/ }).getAttribute('aria-selected')).toBe('true')
+    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))
+
+    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))
+
+    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'End' })
+    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))
+
+    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Home' })
+    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))
+
+    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowLeft' })
+    const wrappedTab = screen.getByRole('tab', { name: /QA-bewijs/ })
+    expect(document.activeElement).toBe(wrappedTab)
+    expect(screen.getByRole('tabpanel').getAttribute('aria-labelledby')).toBe(wrappedTab.id)
+  })
 })