[TreeView] Set focus on the focused Tree Item instead of the Tree View (

mui#12226)

docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md

@@ -402,6 +402,38 @@ you can use the new `onItemSelectionToggle` prop which is called whenever an ite
 
 :::
 
+### Focus the Tree Item instead of the Tree View
+
+The focus is now applied to the Tree Item root element instead of the Tree View root element.
+
+This change will allow new features that require the focus to be on the Tree Item,
+like the drag and drop reordering of items.
+It also solves several issues with focus management,
+like the inability to scroll to the focused item when a lot of items are rendered.
+
+This will mostly impact how you write tests to interact with the Tree View:
+
+For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
+
+```diff
+ it('test example on first item', () => {
+   const { getByRole } = render(
+     <SimpleTreeView>
+       <TreeItem itemId="one">One</TreeItem>
+       <TreeItem itemId="two">Two</TreeItem>
+    </SimpleTreeView>
+   );
+-  const tree = getByRole('tree');
++  const treeItem = getByRole('treeitem', { name: 'One' });
+   act(() => {
+-    tree.focus();
++    treeItem.focus();
+   });
+-  fireEvent.keyDown(tree, { key: 'ArrowDown' });
++  fireEvent.keyDown(treeItem, { key: 'ArrowDown' });
+ })
+```
+
 ### ✅ Use `useTreeItemState` instead of `useTreeItem`
 
 The `useTreeItem` hook has been renamed `useTreeItemState`.