diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx
index a9fb2b1c39b43d..e4c18236396efa 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx
+++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
 import {
-  CalendarLtr20Regular,
   Flag20Regular,
   FluentIconsProps,
+  Image20Regular,
   Important16Regular,
   LockClosed20Regular,
   MoreHorizontal20Regular,
@@ -16,10 +16,10 @@ const iconStyleProps: FluentIconsProps = {
   primaryFill: 'red',
 };
 
-const Badges = () => (
+const Badges = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
   <>
-    <Important16Regular {...iconStyleProps} />
-    <CounterBadge count={1} color="danger" size="small" />
+    {isImportant && <Important16Regular {...iconStyleProps} />}
+    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
   </>
 );
 
@@ -32,10 +32,10 @@ const RenderIconsAfter = () => (
 
 const Actions = () => (
   <>
-    <Button appearance="subtle" icon={<Flag20Regular />} />
+    <Button aria-label="Report" appearance="subtle" icon={<Flag20Regular />} />
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+        <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
       </MenuTrigger>
 
       <MenuPopover>
@@ -51,58 +51,56 @@ const Actions = () => (
 );
 
 const treeItemLayoutProps = {
-  iconBefore: <CalendarLtr20Regular />,
+  iconBefore: <Image20Regular />,
   iconAfter: <RenderIconsAfter />,
 };
 
-export const Layout = () => {
-  return (
-    <Tree aria-label="Tree">
-      <TreeItem actions={<Actions />}>
-        <TreeItemLayout {...treeItemLayoutProps} aside={<Badges />}>
-          Content
-        </TreeItemLayout>
-        <Tree>
-          <TreeItem actions={<Actions />}>
-            <TreeItemLayout>Tree Item</TreeItemLayout>
-            <Tree>
-              <TreeItem>
-                <TreeItemLayout>level 2, item 1</TreeItemLayout>
-              </TreeItem>
-              <TreeItem>
-                <TreeItemLayout>level 2, item 2</TreeItemLayout>
-              </TreeItem>
-              <TreeItem>
-                <TreeItemLayout>level 2, item 3</TreeItemLayout>
-              </TreeItem>
-            </Tree>
-          </TreeItem>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 2</TreeItemLayout>
-          </TreeItem>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 3</TreeItemLayout>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem actions={<Actions />}>
-        <TreeItemLayout {...treeItemLayoutProps} aside={<Important16Regular {...iconStyleProps} />}>
-          Content
-        </TreeItemLayout>
-        <Tree>
-          <TreeItem actions={<Actions />}>
-            <TreeItemLayout>level 2, item 1</TreeItemLayout>
-            <Tree>
-              <TreeItem>
-                <TreeItemLayout>level 3, item 1</TreeItemLayout>
-              </TreeItem>
-            </Tree>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-    </Tree>
-  );
-};
+export const Layout = () => (
+  <Tree aria-label="Tree">
+    <TreeItem aria-description="Private, 1 message" actions={<Actions />}>
+      <TreeItemLayout {...treeItemLayoutProps} aside={<Badges isImportant={true} messageCount={1} />}>
+        Content
+      </TreeItemLayout>
+      <Tree>
+        <TreeItem actions={<Actions />}>
+          <TreeItemLayout>Tree Item</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 2</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 3</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+        <TreeItem>
+          <TreeItemLayout>level 2, item 2</TreeItemLayout>
+        </TreeItem>
+        <TreeItem>
+          <TreeItemLayout>level 2, item 3</TreeItemLayout>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+    <TreeItem aria-description="Private" actions={<Actions />}>
+      <TreeItemLayout {...treeItemLayoutProps} aside={<Important16Regular {...iconStyleProps} />}>
+        Content
+      </TreeItemLayout>
+      <Tree>
+        <TreeItem actions={<Actions />}>
+          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout>level 3, item 1</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+  </Tree>
+);
 
 Layout.parameters = {
   docs: {
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx
index 6d78eb13092406..4b3ba588c7dd4f 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx
+++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx
@@ -8,41 +8,41 @@ const iconStyleProps: FluentIconsProps = {
   primaryFill: 'red',
 };
 
-const RenderAside = () => (
+const RenderAside = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
   <>
-    <Important16Regular {...iconStyleProps} />
-    <CounterBadge count={1} color="danger" size="small" />
+    {isImportant && <Important16Regular {...iconStyleProps} />}
+    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
   </>
 );
 
 const Actions = () => (
   <>
-    <Button appearance="subtle" icon={<Edit20Regular />} />
-    <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+    <Button appearance="subtle" icon={<Edit20Regular aria-label="Edit" />} />
+    <Button appearance="subtle" icon={<MoreHorizontal20Regular aria-label="More options" />} />
   </>
 );
 
 export const Aside = () => (
   <Tree aria-label="Tree">
-    <TreeItem>
-      <TreeItemLayout aside={<RenderAside />}>level 1, item 1</TreeItemLayout>
+    <TreeItem aria-description="Important, 3 message">
+      <TreeItemLayout aside={<RenderAside isImportant={true} messageCount={3} />}>level 1, item 1</TreeItemLayout>
       <Tree>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside />}>level 2, item 1</TreeItemLayout>
+        <TreeItem aria-description="Important" actions={<Actions />}>
+          <TreeItemLayout aside={<RenderAside isImportant={true} />}>level 2, item 1</TreeItemLayout>
         </TreeItem>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside />}>level 2, item 2</TreeItemLayout>
+        <TreeItem aria-description="2 messages" actions={<Actions />}>
+          <TreeItemLayout aside={<RenderAside messageCount={2} />}>level 2, item 2</TreeItemLayout>
         </TreeItem>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside />}>level 2, item 3</TreeItemLayout>
+        <TreeItem aria-description="1 messages" actions={<Actions />}>
+          <TreeItemLayout aside={<RenderAside messageCount={1} />}>level 2, item 3</TreeItemLayout>
         </TreeItem>
       </Tree>
     </TreeItem>
-    <TreeItem>
-      <TreeItemLayout aside={<RenderAside />}>level 1, item 2</TreeItemLayout>
+    <TreeItem aria-description="Important, 1 message">
+      <TreeItemLayout aside={<RenderAside isImportant={true} messageCount={1} />}>level 1, item 2</TreeItemLayout>
       <Tree>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside />}>level 2, item 1</TreeItemLayout>
+        <TreeItem aria-description="1 message" actions={<Actions />}>
+          <TreeItemLayout aside={<RenderAside messageCount={1} />}>level 2, item 1</TreeItemLayout>
           <Tree>
             <TreeItem actions={<Actions />}>
               <TreeItemLayout aside={<RenderAside />}>level 3, item 1</TreeItemLayout>
@@ -50,17 +50,17 @@ export const Aside = () => (
           </Tree>
         </TreeItem>
 
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside />}>level 2, item 2</TreeItemLayout>
+        <TreeItem aria-description="Important" actions={<Actions />}>
+          <TreeItemLayout aside={<RenderAside isImportant={true} />}>level 2, item 2</TreeItemLayout>
           <Tree>
             <TreeItem actions={<Actions />}>
-              <TreeItemLayout aside={<RenderAside />}>level 3, item 1</TreeItemLayout>
+              <TreeItemLayout>level 3, item 1</TreeItemLayout>
             </TreeItem>
             <TreeItem actions={<Actions />}>
-              <TreeItemLayout aside={<RenderAside />}>level 3, item 2</TreeItemLayout>
+              <TreeItemLayout>level 3, item 2</TreeItemLayout>
             </TreeItem>
             <TreeItem actions={<Actions />}>
-              <TreeItemLayout aside={<RenderAside />}>level 3, item 3</TreeItemLayout>
+              <TreeItemLayout>level 3, item 3</TreeItemLayout>
             </TreeItem>
           </Tree>
         </TreeItem>
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx
index 091de57556bdf4..8a7b3a94cec786 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx
+++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx
@@ -39,7 +39,7 @@ const iconStyleProps: FluentIconsProps = {
 const Badges = () => {
   const badgeStyles = useBadgeStyles();
   return (
-    <div aria-hidden className={badgeStyles.base}>
+    <div className={badgeStyles.base}>
       <Important16Regular {...iconStyleProps} />
       <CounterBadge count={1} color="danger" size="small" />
     </div>
@@ -49,10 +49,10 @@ const Badges = () => {
 const RenderActions = () => {
   return (
     <>
-      <Button appearance="subtle" icon={<Flag20Regular />} />
+      <Button aria-label="Report" appearance="subtle" icon={<Flag20Regular />} />
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
         </MenuTrigger>
 
         <MenuPopover>
@@ -73,9 +73,9 @@ export const TreePersonaLayout = () => {
 
   return (
     <Tree aria-label="Tree">
-      <TreeItem actions={<RenderActions />}>
+      <TreeItem aria-description="1 new message, important" actions={<RenderActions />}>
         <TreeItemPersonaLayout
-          description="Secondary text slot"
+          description={<div className={styles.unread}>Secondary text slot</div>}
           aside={
             <>
               <span>00:00 AM</span>
@@ -84,27 +84,26 @@ export const TreePersonaLayout = () => {
           }
           media={<Avatar />}
         >
-          Primary text slot
+          <div className={styles.unread}>Primary text slot</div>
         </TreeItemPersonaLayout>
         <Tree>
-          <TreeItem>
-            <TreeItemPersonaLayout media={<Avatar />}>content</TreeItemPersonaLayout>
-          </TreeItem>
-          <TreeItem>
-            <TreeItemPersonaLayout description="description" media={<Avatar />}>
-              content
-            </TreeItemPersonaLayout>
-          </TreeItem>
           <TreeItem>
             <TreeItemPersonaLayout description="description" media={<Avatar />}>
               content
             </TreeItemPersonaLayout>
+            <Tree>
+              <TreeItem>
+                <TreeItemPersonaLayout description="description" media={<Avatar />}>
+                  content
+                </TreeItemPersonaLayout>
+              </TreeItem>
+            </Tree>
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem actions={<RenderActions />}>
+      <TreeItem aria-description="1 message, important" actions={<RenderActions />}>
         <TreeItemPersonaLayout
-          description={<div className={styles.unread}>Secondary text slot</div>}
+          description="Secondary text slot"
           aside={
             <>
               <span>00:00 AM</span>
@@ -113,20 +112,21 @@ export const TreePersonaLayout = () => {
           }
           media={<Avatar />}
         >
-          <div className={styles.unread}>Primary text slot</div>
+          Primary text slot
         </TreeItemPersonaLayout>
         <Tree>
+          <TreeItem>
+            <TreeItemPersonaLayout media={<Avatar />}>content</TreeItemPersonaLayout>
+          </TreeItem>
+          <TreeItem>
+            <TreeItemPersonaLayout description="description" media={<Avatar />}>
+              content
+            </TreeItemPersonaLayout>
+          </TreeItem>
           <TreeItem>
             <TreeItemPersonaLayout description="description" media={<Avatar />}>
               content
             </TreeItemPersonaLayout>
-            <Tree>
-              <TreeItem>
-                <TreeItemPersonaLayout description="description" media={<Avatar />}>
-                  content
-                </TreeItemPersonaLayout>
-              </TreeItem>
-            </Tree>
           </TreeItem>
         </Tree>
       </TreeItem>
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
index a3a1ddddffb7ba..1b645c8592cfe7 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
+++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
@@ -19,7 +19,7 @@ export const ReadUnread = () => {
           Read content message
         </TreeItemPersonaLayout>
       </TreeItem>
-      <TreeItem>
+      <TreeItem aria-description="New message">
         <TreeItemPersonaLayout
           description={<div className={styles.unread}>Secondary text content</div>}
           media={<Avatar />}
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx
index f536e9418ae5a7..3d8c8fc7a1aa22 100644
--- a/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx
@@ -7,10 +7,10 @@ import story from './TreeItemActions.md';
 const RenderActions = () => {
   return (
     <>
-      <Button appearance="subtle" icon={<Edit20Regular />} />
+      <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <Button appearance="subtle" icon={<MoreHorizontal20Regular />} />
+          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
         </MenuTrigger>
 
         <MenuPopover>
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx
index 7d3cb158a70c83..b479790af6946a 100644
--- a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx
+++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx
@@ -5,7 +5,7 @@ import { LockClosed20Regular } from '@fluentui/react-icons';
 export const IconAfter = () => {
   return (
     <Tree aria-label="Tree">
-      <TreeItem>
+      <TreeItem aria-description="Private">
         <TreeItemLayout iconAfter={<LockClosed20Regular />}>level 1, item 1</TreeItemLayout>
         <Tree>
           <TreeItem>
@@ -19,7 +19,7 @@ export const IconAfter = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem>
+      <TreeItem aria-description="Private">
         <TreeItemLayout iconAfter={<LockClosed20Regular />}>level 1, item 2</TreeItemLayout>
         <Tree>
           <TreeItem>
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx
index 111fc58d95cc7c..3f48f39de41687 100644
--- a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx
+++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import { CheckboxChecked20Filled, CheckboxUnchecked20Filled } from '@fluentui/react-icons';
+import { Image20Regular } from '@fluentui/react-icons';
 import story from './TreeItemIconBefore.md';
 
 export const IconBefore = () => {
   return (
     <Tree aria-label="Tree">
       <TreeItem>
-        <TreeItemLayout iconBefore={<CheckboxUnchecked20Filled />}>level 1, item 1</TreeItemLayout>
+        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 1</TreeItemLayout>
         <Tree>
           <TreeItem>
             <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -21,7 +21,7 @@ export const IconBefore = () => {
         </Tree>
       </TreeItem>
       <TreeItem>
-        <TreeItemLayout iconBefore={<CheckboxChecked20Filled />}>level 1, item 2</TreeItemLayout>
+        <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 2</TreeItemLayout>
         <Tree>
           <TreeItem>
             level 2, item 1