From bc5035bfcd53277a39075c596b14b9731020d1de Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Fri, 10 Jul 2026 10:58:05 -0700
Subject: [PATCH] fix(web-components): fix focusgroup in tree when focusgroup
 is natively supported (#36379)

---
 ...eb-components-9c7dc48c-180c-4d64-aeb6-b7e3f1415e45.json | 7 +++++++
 packages/web-components/src/tree/tree.template.html        | 1 -
 packages/web-components/src/tree/tree.template.ts          | 3 +--
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-web-components-9c7dc48c-180c-4d64-aeb6-b7e3f1415e45.json

diff --git a/change/@fluentui-web-components-9c7dc48c-180c-4d64-aeb6-b7e3f1415e45.json b/change/@fluentui-web-components-9c7dc48c-180c-4d64-aeb6-b7e3f1415e45.json
new file mode 100644
index 00000000000000..14d25fba181ab9
--- /dev/null
+++ b/change/@fluentui-web-components-9c7dc48c-180c-4d64-aeb6-b7e3f1415e45.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix focusgroup in tree when focusgroup is natively supported",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/tree/tree.template.html b/packages/web-components/src/tree/tree.template.html
index 450b538fc68fed..178cbc0109223f 100644
--- a/packages/web-components/src/tree/tree.template.html
+++ b/packages/web-components/src/tree/tree.template.html
@@ -1,6 +1,5 @@
 <f-template name="fluent-tree" shadowrootmode="open">
   <template
-    tabindex="0"
     focusgroup="menu inline block nowrap nomemory"
     @click="{clickHandler($e)}"
     @keydown="{keydownHandler($e)}"
diff --git a/packages/web-components/src/tree/tree.template.ts b/packages/web-components/src/tree/tree.template.ts
index 84d034b2146e84..e61e8d89ea2f85 100644
--- a/packages/web-components/src/tree/tree.template.ts
+++ b/packages/web-components/src/tree/tree.template.ts
@@ -3,12 +3,11 @@ import type { Tree } from './tree.js';
 
 export const template = html<Tree>`
   <template
-    tabindex="0"
     focusgroup="menu inline block nowrap nomemory"
     @click="${(x, c) => x.clickHandler(c.event)}"
     @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
-    @toggle="${(x, c) => x.itemToggleHandler()}"
+    @toggle="${x => x.itemToggleHandler()}"
   >
     <slot ${ref('defaultSlot')} @slotchange="${x => x.handleDefaultSlotChange()}"></slot>
   </template>