TreeView: Fix initial focus

.changeset/few-deers-work.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: When moving focus to TreeView, the current item will be focused by default.

src/TreeView/TreeView.features.stories.tsx

@@ -773,6 +773,20 @@ export const ContainIntrinsicSize: Story = () => {
   )
 }
 
+export const InitialFocus: Story = () => (
+  <div>
+    <Button>Focusable element before TreeView</Button>
+    <TreeView aria-label="Test tree">
+      <TreeView.Item id="item-1">Item 1</TreeView.Item>
+      <TreeView.Item id="item-2" current>
+        Item 2
+      </TreeView.Item>
+      <TreeView.Item id="item-3">Item 3</TreeView.Item>
+    </TreeView>
+    <Button>Focusable element after TreeView</Button>
+  </div>
+)
+
 ContainIntrinsicSize.parameters = {
   chromatic: {disableSnapshot: true},
 }

src/TreeView/TreeView.test.tsx

@@ -1224,9 +1224,6 @@ describe('Asyncronous loading', () => {
     // Parent item should be expanded
     expect(parentItem).toHaveAttribute('aria-expanded', 'true')
 
-    // Focus first item
-    parentItem.focus()
-
     // Press ←
     fireEvent.keyDown(document.activeElement || document.body, {key: 'ArrowLeft'})
 

src/TreeView/useRovingTabIndex.ts

@@ -18,6 +18,23 @@ export function useRovingTabIndex({containerRef}: {containerRef: React.RefObject
 
       return getNextFocusableElement(from, event) ?? from
     },
+    focusInStrategy: () => {
+      const currentItem = containerRef.current?.querySelector('[aria-current]')
+      const firstItem = containerRef.current?.querySelector('[role="treeitem"]')
+
+      // Focus the aria-current item if it exists
+      if (currentItem instanceof HTMLElement) {
+        return currentItem
+      }
+
+      // Otherwise, focus the activeElement if it's a treeitem
+      if (document.activeElement instanceof HTMLElement && containerRef.current?.contains(document.activeElement)) {
+        return document.activeElement
+      }
+
+      // Otherwise, focus the first treeitem
+      return firstItem instanceof HTMLElement ? firstItem : undefined
+    },
   })
 }