diff --git a/packages/react-components/react-tree/stories/Tree/FlatTree.stories.tsx b/packages/react-components/react-tree/stories/Tree/FlatTree.stories.tsx
index c494ff949fe37..d721e01387b35 100644
--- a/packages/react-components/react-tree/stories/Tree/FlatTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/FlatTree.stories.tsx
@@ -8,57 +8,67 @@ import {
   useHeadlessFlatTree_unstable,
   HeadlessFlatTreeItemProps,
 } from '@fluentui/react-tree';
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  useRestoreFocusTarget,
+} from '@fluentui/react-components';
+import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
 
-type FlatItem = HeadlessFlatTreeItemProps & { layout: string };
+type FlatItem = HeadlessFlatTreeItemProps & { content: string };
 
 const flatTreeItems: FlatItem[] = [
-  { value: '1', layout: 'Level 1, item 1' },
-  { value: '1-1', parentValue: '1', layout: 'Level 2, item 1' },
-  { value: '1-2', parentValue: '1', layout: 'Level 2, item 2' },
-  { value: '1-3', parentValue: '1', layout: 'Level 2, item 3' },
-  { value: '2', layout: 'Level 1, item 2' },
-  { value: '2-1', parentValue: '2', layout: 'Level 2, item 1' },
-  { value: '2-1-1', parentValue: '2-1', layout: 'Level 3, item 1' },
-  { value: '2-1-1-1', parentValue: '2-1-1', layout: 'Level 4, item 1' },
+  { value: '1', content: 'Level 1, item 1' },
+  { value: '1-1', parentValue: '1', content: 'Level 2, item 1' },
+  { value: '1-2', parentValue: '1', content: 'Level 2, item 2' },
+  { value: '1-3', parentValue: '1', content: 'Level 2, item 3' },
+  { value: '2', content: 'Level 1, item 2' },
+  { value: '2-1', parentValue: '2', content: 'Level 2, item 1' },
+  { value: '2-1-1', parentValue: '2-1', content: 'Level 3, item 1' },
+  { value: '2-1-1-1', parentValue: '2-1-1', content: 'Level 4, item 1' },
 ];
 
 // // EXAMPLE OF NESTED TREE ITEMS BEING FLATTEN BY `flattenTree`:
-// type Item = TreeItemProps & { layout: React.ReactNode };
+// type Item = TreeItemProps & { content: React.ReactNode };
 
 // const nestedTreeItems = [
 //   {
 //     value: '1',
-//     layout: <>level 1, item 1</>,
+//     content: <>level 1, item 1</>,
 //     subtree: [
 //       {
 //         value: '1-1',
-//         layout: <>level 2, item 1</>,
+//         content: <>level 2, item 1</>,
 //       },
 //       {
 //         value: '1-2',
-//         layout: <>level 2, item 2</>,
+//         content: <>level 2, item 2</>,
 //       },
 //       {
 //         value: '1-3',
-//         layout: <>level 2, item 3</>,
+//         content: <>level 2, item 3</>,
 //       },
 //     ],
 //   },
 //   {
 //     value: '2',
-//     layout: <>level 1, item 2</>,
+//     content: <>level 1, item 2</>,
 //     subtree: [
 //       {
 //         value: '2-1',
-//         layout: <>level 2, item 1</>,
+//         content: <>level 2, item 1</>,
 //         subtree: [
 //           {
 //             value: '2-1-1',
-//             layout: <>level 3, item 1</>,
+//             content: <>level 3, item 1</>,
 //             subtree: [
 //               {
 //                 value: '2-1-1-1',
-//                 layout: <>level 4, item 1</>,
+//                 content: <>level 4, item 1</>,
 //               },
 //             ],
 //           },
@@ -70,16 +80,51 @@ const flatTreeItems: FlatItem[] = [
 
 // const flatTreeItems = flattenTree_unstable<Item>(nestedTreeItems);
 
+const ActionsExample = () => (
+  <>
+    <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+    <Menu>
+      <MenuTrigger disableButtonEnhancement>
+        <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>New</MenuItem>
+          <MenuItem>New Window</MenuItem>
+          <MenuItem disabled>Open File</MenuItem>
+          <MenuItem>Open Folder</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  </>
+);
+
 export const FlatTree = () => {
-  const virtualTree = useHeadlessFlatTree_unstable(flatTreeItems);
+  const flatTree = useHeadlessFlatTree_unstable(flatTreeItems);
+  const focusTargetAttribute = useRestoreFocusTarget();
+
   return (
-    <Tree {...virtualTree.getTreeProps()} aria-label="Tree">
-      {Array.from(virtualTree.items(), item => {
-        const { layout, ...itemProps } = item.getTreeItemProps();
+    <Tree {...flatTree.getTreeProps()} aria-label="Tree">
+      {Array.from(flatTree.items(), flatTreeItem => {
+        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
         return (
-          <TreeItem {...itemProps} key={item.value}>
-            <TreeItemLayout>{layout}</TreeItemLayout>
-          </TreeItem>
+          <Menu key={flatTreeItem.value} positioning="below-end" openOnContext>
+            <MenuTrigger disableButtonEnhancement>
+              <TreeItem aria-description="has context menu" {...focusTargetAttribute} {...treeItemProps}>
+                <TreeItemLayout actions={<ActionsExample />}>{content}</TreeItemLayout>
+              </TreeItem>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>Edit</MenuItem>
+                <MenuItem>New</MenuItem>
+                <MenuItem>New Window</MenuItem>
+                <MenuItem disabled>Open File</MenuItem>
+                <MenuItem>Open Folder</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
         );
       })}
     </Tree>
diff --git a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
index 3738e6928eeac..7635e941260c5 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout, TreeItemProps } from '@fluentui/react-tree';
+import { Tree, TreeItem as FuiTreeItem, TreeItemLayout, TreeItemProps as FuiTreeItemProps } from '@fluentui/react-tree';
 import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
 import {
   Button,
@@ -8,102 +8,109 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
+  Slot,
+  getSlots,
+  ComponentProps,
+  resolveShorthand,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
 
-const ActionsExample = () => {
-  return (
-    <>
-      <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
-      <Menu>
-        <MenuTrigger disableButtonEnhancement>
-          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-        </MenuTrigger>
+type TreeItemSlots = { layout: Slot<typeof TreeItemLayout> };
+type TreeItemProps = FuiTreeItemProps & ComponentProps<Partial<TreeItemSlots>>;
+
+const TreeItem = ({ layout, children, ...props }: TreeItemProps) => {
+  const focusTargetAttribute = useRestoreFocusTarget();
+  const [layoutChildren, subtree] = React.Children.toArray(children);
 
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>New </MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem disabled>Open File</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
+  // same items to be used between contextmenu and actions
+  const commonMenuItems = (
+    <>
+      <MenuItem>New </MenuItem>
+      <MenuItem>New Window</MenuItem>
+      <MenuItem disabled>Open File</MenuItem>
+      <MenuItem>Open Folder</MenuItem>
     </>
   );
-};
 
-const ActionableTreeItem = ({ children, ...rest }: TreeItemProps) => {
-  const [open, setOpen] = React.useState(false);
-  const focusTargetAttribute = useRestoreFocusTarget();
-  const [layout, subtree] = React.Children.toArray(children);
+  const { slots, slotProps } = getSlots<TreeItemSlots>({
+    components: { layout: TreeItemLayout },
+    layout: resolveShorthand(layout, {
+      required: true,
+      defaultProps: {
+        actions: (
+          <>
+            <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+            <Menu>
+              <MenuTrigger disableButtonEnhancement>
+                <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>{commonMenuItems}</MenuList>
+              </MenuPopover>
+            </Menu>
+          </>
+        ),
+        children: layoutChildren,
+      },
+    }),
+  });
+
   return (
-    <TreeItem
-      onContextMenu={e => {
-        if (e.isDefaultPrevented()) {
-          return;
-        }
-        e.preventDefault();
-        setOpen(true);
-      }}
-      {...focusTargetAttribute}
-      {...rest}
-    >
-      <Menu open={open} positioning={'below-end'} onOpenChange={(_, data) => setOpen(data.open)} openOnContext>
-        <MenuTrigger disableButtonEnhancement>
-          <TreeItemLayout actions={<ActionsExample />}>{layout}</TreeItemLayout>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>Edit</MenuItem>
-            <MenuItem>New</MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem disabled>Open File</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-      {subtree}
-    </TreeItem>
+    <Menu positioning="below-end" openOnContext>
+      <MenuTrigger disableButtonEnhancement>
+        <FuiTreeItem aria-description="has context menu" {...focusTargetAttribute} {...props}>
+          <slots.layout {...slotProps.layout} />
+          {subtree}
+        </FuiTreeItem>
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+          {commonMenuItems}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
   );
 };
 
 export const Actions = () => {
   return (
     <Tree aria-label="Tree">
-      <ActionableTreeItem itemType="branch">
-        level 1, item 1
+      <TreeItem itemType="branch">
+        item 1
         <Tree>
-          <ActionableTreeItem itemType="branch">
-            level 2, item 1
+          <TreeItem itemType="branch">
+            item 1-1
             <Tree>
-              <ActionableTreeItem itemType="leaf">level 3, item 1</ActionableTreeItem>
-              <ActionableTreeItem itemType="leaf">level 3, item 2</ActionableTreeItem>
+              <TreeItem itemType="leaf">item 1-1-1</TreeItem>
+              <TreeItem itemType="leaf">item 1-1-2</TreeItem>
+              <TreeItem itemType="leaf">item 1-1-3</TreeItem>
             </Tree>
-          </ActionableTreeItem>
-          <ActionableTreeItem itemType="leaf">level 2, item 2</ActionableTreeItem>
-          <ActionableTreeItem itemType="leaf">level 2, item 3</ActionableTreeItem>
+          </TreeItem>
+          <TreeItem itemType="leaf">item 1-2</TreeItem>
+          <TreeItem itemType="leaf">item 1-3</TreeItem>
         </Tree>
-      </ActionableTreeItem>
-      <ActionableTreeItem itemType="branch">
-        level 1, item 2
+      </TreeItem>
+      <TreeItem itemType="branch">
+        item 2
         <Tree>
-          <ActionableTreeItem itemType="branch">
-            level 2, item 1
+          <TreeItem itemType="branch">
+            item 2-1
             <Tree>
-              <ActionableTreeItem itemType="leaf">level 3, item 1</ActionableTreeItem>
+              <TreeItem itemType="leaf">item 2-1-1</TreeItem>
             </Tree>
-          </ActionableTreeItem>
+          </TreeItem>
 
-          <ActionableTreeItem itemType="branch">
-            level 2, item 2
+          <TreeItem itemType="branch">
+            item 3
             <Tree>
-              <ActionableTreeItem itemType="leaf">level 2, item 1</ActionableTreeItem>
-              <ActionableTreeItem itemType="leaf">level 2, item 2</ActionableTreeItem>
+              <TreeItem itemType="leaf">item 3-1</TreeItem>
+              <TreeItem itemType="leaf">item 3-2</TreeItem>
+              <TreeItem itemType="leaf">item 3-3</TreeItem>
             </Tree>
-          </ActionableTreeItem>
+          </TreeItem>
         </Tree>
-      </ActionableTreeItem>
+      </TreeItem>
     </Tree>
   );
 };
@@ -111,9 +118,9 @@ export const Actions = () => {
 Actions.parameters = {
   docs: {
     description: {
-      story: `In addition to \`aside\` content, both tree item layouts support \`actions\` prop that can be used for tasks such as edit, rename, or triggering a menu. These action buttons are initially hidden but are shown on hover or can be controlled by the \`visible\` property, ensuring they take priority over the \`aside\` content when needed.
+      story: `In addition to the \`aside\` content, both tree item layouts support \`actions\` prop that can be used for tasks such as edit, rename, or triggering a menu. These action buttons are initially hidden but are shown on hover or can be controlled by the \`visible\` property, ensuring they take priority over the \`aside\` content when needed.
 
-> ⚠️ Actions prop is \`aria-hidden\` by default. Always include a context menu to ensure that actions are accessible for all users.`,
+> ⚠️ The \`actions\` prop is \`aria-hidden\` by default. Always implement a context menu to ensure that these actions are accessible to all users. Additionally, include an \`aria-description\` or \`aria-describedby\` on tree items with actions or context menus to indicate interactions, such as "has context menu."`,
     },
   },
 };
diff --git a/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md b/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md
index 2a047f3d7602b..db0eda833f6d9 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md
+++ b/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md
@@ -13,6 +13,9 @@
 
 - **Use the `aria-label` attribute on the root of the `Tree` component to provide an accessible name for the tree:** This attribute helps screen readers to understand the purpose of the tree, making it more accessible and inclusive.
 
-- **If you provide additional buttons or functionality within tree items, make them accessible with a context menu:** Ensure that any additional actions or features in tree items are accessible for both mouse and keyboard users by implementing a context menu. The additional functionality should not disturb keyboard navigation within the tree.
+- **If you provide additional buttons or functionality within tree items, make them accessible with a context menu:**
+  - Ensure that any additional actions or features in tree items are accessible for both mouse and keyboard users by implementing a context menu.
+  - Include an `aria-description` or `aria-describedby` on tree items with actions/context menu to offer more descriptive information about the interactions, e.g., "has context menu."
+  - The added functionality should not disrupt keyboard navigation within the tree.
 
 </details>
diff --git a/packages/react-components/react-tree/stories/Tree/TreeInfiniteScrolling.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeInfiniteScrolling.stories.tsx
index 4e312e9c70b8a..922fdcce4fdcc 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeInfiniteScrolling.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/TreeInfiniteScrolling.stories.tsx
@@ -8,13 +8,8 @@ import {
 } from '@fluentui/react-tree';
 import { makeStyles, shorthands, Spinner } from '@fluentui/react-components';
 
-interface Result {
-  results: { name: string }[];
-}
-
-type Item = HeadlessFlatTreeItemProps & { name: string | React.ReactNode };
-
-const MAX_PAGES = 3;
+const ITEMS_PER_PAGE = 10;
+const MAX_PAGES = 4;
 
 const pinnedItems = [
   { value: 'pinned', name: 'Pinned', id: 'pinned' },
@@ -23,6 +18,12 @@ const pinnedItems = [
   { value: 'pinned-item-3', parentValue: 'pinned', name: 'Pinned item 3' },
 ];
 
+interface Result {
+  results: { name: string }[];
+}
+
+type Item = HeadlessFlatTreeItemProps & { name: string | React.ReactNode };
+
 const useStyles = makeStyles({
   container: {
     height: '400px',
@@ -36,7 +37,7 @@ export const InfiniteScrolling = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   const peopleItems = useQuery<Item[]>([
     { value: 'people', name: 'People' },
-    ...Array.from({ length: 10 }, (_, index) => ({
+    ...Array.from({ length: ITEMS_PER_PAGE }, (_, index) => ({
       value: `person-${index + 1}`,
       parentValue: 'people',
       name: `Person ${index + 1}`,
@@ -67,19 +68,17 @@ export const InfiniteScrolling = () => {
   const fetchMoreItems = () => {
     setIsLoading(true);
 
-    fetch(`https://swapi.dev/api/people?page=${page}`)
-      .then(res => res.json())
-      .then((json: Result) => {
-        const fetchedItems = json.results.map<Item>(person => ({
-          value: `person-${person.name}`,
-          parentValue: 'people',
-          name: person.name,
-        }));
-
-        setIsLoading(false);
-        setPage(page + 1);
-        peopleItems.query(() => [...peopleItems.value, ...fetchedItems]);
-      });
+    mockFetchPeople(page).then((json: Result) => {
+      const fetchedItems = json.results.map<Item>(person => ({
+        value: `person-${person.name}`,
+        parentValue: 'people',
+        name: person.name,
+      }));
+
+      setIsLoading(false);
+      setPage(prev => prev + 1);
+      peopleItems.query(() => [...peopleItems.value, ...fetchedItems]);
+    });
   };
 
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
@@ -120,6 +119,19 @@ function useQuery<Value>(initialValue: Value) {
   return { ...queryResult, query } as const;
 }
 
+function mockFetchPeople(page: number): Promise<Result> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const startIndex = page * ITEMS_PER_PAGE + 1;
+      const results = Array.from({ length: ITEMS_PER_PAGE }, (_, index) => ({
+        name: `Person ${startIndex + index}`,
+      }));
+
+      resolve({ results });
+    }, 1000);
+  });
+}
+
 InfiniteScrolling.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-tree/stories/Tree/TreeLazyLoading.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeLazyLoading.stories.tsx
index b1ca14dc01bdd..33102fef69af7 100644
--- a/packages/react-components/react-tree/stories/Tree/TreeLazyLoading.stories.tsx
+++ b/packages/react-components/react-tree/stories/Tree/TreeLazyLoading.stories.tsx
@@ -57,15 +57,13 @@ export const LazyLoading = () => {
         !trees[data.value].isLoaded
       ) {
         trees[data.value].query(() =>
-          fetch(`https://swapi.dev/api/${data.value}`)
-            .then(result => result.json())
-            .then((json: Result) =>
-              json.results.map<Entity>(people => ({
-                value: `${data.value}/${people.name}`,
-                parentValue: data.value,
-                name: people.name,
-              })),
-            ),
+          mockFetch(data.value as string).then((json: Result) =>
+            json.results.map<Entity>(entity => ({
+              value: `${data.value}/${entity.name}`,
+              parentValue: data.value,
+              name: entity.name,
+            })),
+          ),
         );
       }
     }
@@ -103,6 +101,19 @@ function useQuery<Value>(initialValue: Value) {
   return { ...queryResult, query } as const;
 }
 
+const mockFetch = (type: string) => {
+  return new Promise<Result>(resolve => {
+    setTimeout(() => {
+      const mockData: Result = {
+        results: Array.from({ length: 10 }, (_, index) => ({
+          name: `${type.charAt(0).toUpperCase() + type.slice(1)} ${index + 1}`,
+        })),
+      };
+      resolve(mockData);
+    }, 1000);
+  });
+};
+
 LazyLoading.parameters = {
   docs: {
     description: {