fix(web-components): fix focusgroup in tree when focusgroup is natively supported (microsoft#36379)

Author: marchbox

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"
+}

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)}"

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>