Move keyboard focus into the chat panel when it opens

Author: emir-karabeg

apps/sim/platform/app/(shell)/chat/_components/panel/chat-panels.tsx

@@ -57,7 +57,18 @@ export function ChatPanels({ children, data, workspaces }: ChatPanelsProps) {
   const [current, setCurrent] = useState('initial')
   const [removed, setRemoved] = useState<string[]>([])
   const trigger = useRef<HTMLButtonElement>(null)
+  const panel = useRef<HTMLElement>(null)
   const recents = (data?.recents ?? []).filter((item) => !removed.includes(item.id))
+  function show(element: HTMLButtonElement) {
+    trigger.current = element
+    setVisible(true)
+    requestAnimationFrame(() => {
+      const controls = panel.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')
+      Array.from(controls ?? [])
+        .find((control) => control.tabIndex >= 0 && control.getClientRects().length > 0)
+        ?.focus()
+    })
+  }
   function hide() {
     setVisible(false)
     requestAnimationFrame(() => trigger.current?.focus())
@@ -113,15 +124,10 @@ export function ChatPanels({ children, data, workspaces }: ChatPanelsProps) {
     }
   })
   return (
-    <OpenPanel.Provider
-      value={(element) => {
-        trigger.current = element
-        setVisible(true)
-      }}
-    >
+    <OpenPanel.Provider value={show}>
       <div className={styles.frame} data-panel-open={visible} data-expanded={visible && expanded}>
         <div className={styles.conversation}>{children}</div>
-        <aside className={styles.panel} aria-label='Chat panel' hidden={!visible}>
+        <aside ref={panel} className={styles.panel} aria-label='Chat panel' hidden={!visible}>
           <PanelTabs
             tabs={tabViews}
             current={current}

apps/sim/platform/checks/panels.spec.ts

@@ -10,12 +10,16 @@ test('a chat panel preserves its file, tabs and focus across resize, collapse an
   const open = page.getByRole('button', { name: 'Open chat panel' })
   const title = page.getByRole('heading', { level: 1, name: 'Review the renewal brief' })
   const titleBefore = await title.boundingBox()
-  await open.click()
+  await open.focus()
+  await page.keyboard.press('Enter')
   const titleAfter = await title.boundingBox()
   if (!titleBefore || !titleAfter) throw new Error('The title must remain visible in split view')
   expect(titleAfter.x).toBe(titleBefore.x)
   expect(titleAfter.y).toBe(titleBefore.y)
   const panel = page.getByRole('complementary', { name: 'Chat panel' })
+  await expect(panel.getByRole('tab', { selected: true })).toBeFocused()
+  await page.keyboard.press('Tab')
+  await expect(panel.getByRole('button', { name: 'Close Workspaces tab' })).toBeFocused()
   await panel.getByRole('button', { name: 'Renewal brief', exact: true }).click()
   await expect(panel.getByRole('heading', { name: 'Aster Labs renewal brief' })).toBeVisible()
   await panel.getByRole('button', { name: 'New panel tab' }).click()
@@ -46,8 +50,11 @@ test('a chat panel preserves its file, tabs and focus across resize, collapse an
   await expect(panel.getByRole('heading', { name: 'Aster Labs renewal brief' })).toBeVisible()
   await panel.getByRole('button', { name: 'Close chat panel' }).click()
   await expect(open).toBeFocused()
-  await open.click()
-  await panel.getByRole('button', { name: 'Panel tabs' }).click()
+  await page.keyboard.press('Enter')
+  await expect(panel.getByRole('button', { name: 'New panel tab' })).toBeFocused()
+  await page.keyboard.press('Tab')
+  await expect(panel.getByRole('button', { name: 'Panel tabs' })).toBeFocused()
+  await page.keyboard.press('Enter')
   await page.getByRole('menuitemcheckbox', { name: 'Workspaces' }).click()
   await panel.getByRole('button', { name: 'Customer operations', exact: true }).last().click()
   await expect(page).toHaveURL(/\/home\?.*state=full/)