diff --git a/change/@fluentui-web-components-b9ad2d8f-37a9-4a6d-b6fb-9d498fa34fb5.json b/change/@fluentui-web-components-b9ad2d8f-37a9-4a6d-b6fb-9d498fa34fb5.json
new file mode 100644
index 0000000000000..e7ddd4bfa239e
--- /dev/null
+++ b/change/@fluentui-web-components-b9ad2d8f-37a9-4a6d-b6fb-9d498fa34fb5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "adopt focusgroup and polyfill",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-ce5d6bec-0682-4483-9813-9fd1c1275adb.json b/change/@fluentui-web-components-ce5d6bec-0682-4483-9813-9fd1c1275adb.json
new file mode 100644
index 0000000000000..21cfab3010083
--- /dev/null
+++ b/change/@fluentui-web-components-ce5d6bec-0682-4483-9813-9fd1c1275adb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix components for native focusgroup implementation",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index 586e301ed9513..6da693a8bdd19 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
-    "@microsoft/focusgroup-polyfill": "^1.2.1",
+    "@microsoft/focusgroup-polyfill": "^1.3.0",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
     "@microsoft/tsdoc": "0.15.1",
diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index 3d4298702c839..ee7caf3dacb89 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/packages/web-components/docs/web-components.api.md
@@ -739,11 +739,7 @@ export class BaseMenuList extends FASTElement {
     elementInternals: ElementInternals;
     focus(): void;
     handleChange(source: any, propertyName: string): void;
-    // @internal
-    handleFocusOut: (e: FocusEvent) => void;
-    // @internal (undocumented)
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
-    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    protected isMenuItemElement(el: Element): el is MenuItem;
     // @internal (undocumented)
     readonly isNestedMenu: () => boolean;
     // @internal (undocumented)
@@ -751,7 +747,9 @@ export class BaseMenuList extends FASTElement {
     // (undocumented)
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     // (undocumented)
-    protected menuItems: Element[] | undefined;
+    protected menuChildren: HTMLElement[] | undefined;
+    // (undocumented)
+    protected menuItems: MenuItem[] | undefined;
     // (undocumented)
     protected setItems(): void;
 }
@@ -808,8 +806,6 @@ export class BaseRadioGroup extends FASTElement {
     focus(): void;
     // @internal
     focusinHandler(e: FocusEvent): boolean | void;
-    // @internal
-    focusoutHandler(e: FocusEvent): boolean | void;
     static formAssociated: boolean;
     // (undocumented)
     formResetCallback(): void;
@@ -893,22 +889,26 @@ export class BaseTablist extends FASTElement {
     // @internal (undocumented)
     protected activeidChanged(oldValue: string, newValue: string): void;
     activetab: Tab;
-    adjust(adjustment: number): void;
     // @internal (undocumented)
     connectedCallback(): void;
     disabled: boolean;
-    // @internal
+    // @internal (undocumented)
     protected disabledChanged(prev: boolean, next: boolean): void;
     // @internal
     elementInternals: ElementInternals;
-    orientation: TablistOrientation;
     // @internal (undocumented)
+    handleFocusIn(event: FocusEvent): void;
+    orientation: TablistOrientation;
+    // (undocumented)
     protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
-    protected setTabs(): void;
+    protected setTabs({ connectToPanel, forceDisabled }?: {
+        connectToPanel?: boolean | undefined;
+        forceDisabled?: boolean | undefined;
+    }): void;
     // @internal
     slottedTabs: Node[];
-    // @internal
-    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    // @internal (undocumented)
+    protected slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
     // @internal (undocumented)
     tabs: Tab[];
     // @internal (undocumented)
@@ -1076,8 +1076,6 @@ export class BaseTextInput extends FASTElement {
 export class BaseTree extends FASTElement {
     constructor();
     // @internal
-    blurHandler(e: FocusEvent): void;
-    // @internal
     changeHandler(e: Event): boolean | void;
     // Warning: (ae-forgotten-export) The symbol "BaseTreeItem" needs to be exported by the entry point index.d.ts
     //
@@ -1087,17 +1085,14 @@ export class BaseTree extends FASTElement {
     childTreeItemsChanged(): void;
     // @internal
     clickHandler(e: Event): boolean | void;
-    // (undocumented)
-    connectedCallback(): void;
     currentSelected: HTMLElement | null;
     // @internal (undocumented)
     defaultSlot: HTMLSlotElement;
     // @internal
     defaultSlotChanged(): void;
+    protected get descendantTreeItems(): BaseTreeItem[];
     // @internal
     elementInternals: ElementInternals;
-    // @internal
-    focusHandler(e: FocusEvent): void;
     // @internal (undocumented)
     handleDefaultSlotChange(): void;
     // @internal
@@ -3287,6 +3282,10 @@ export class MenuItem extends FASTElement {
     handleMouseOut: (e: MouseEvent) => boolean;
     // @internal (undocumented)
     handleMouseOver: (e: MouseEvent) => boolean;
+    // @internal (undocumented)
+    handleSubmenuFocusOut: (e: FocusEvent) => void;
+    // @internal
+    handleToggle: (e: Event) => void;
     hidden: boolean;
     role: MenuItemRole;
     roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
@@ -3298,8 +3297,6 @@ export class MenuItem extends FASTElement {
     protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
     // @internal (undocumented)
     submenu: HTMLElement | undefined;
-    // @internal
-    toggleHandler: (e: Event) => void;
 }
 
 // @internal
@@ -3340,6 +3337,10 @@ export const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 // @public
 export class MenuList extends BaseMenuList {
+    // (undocumented)
+    disconnectedCallback(): void;
+    // (undocumented)
+    setItems(): void;
 }
 
 // @public (undocumented)
@@ -3486,6 +3487,10 @@ export const RadioDefinition: FASTElementDefinition<typeof Radio>;
 
 // @public
 export class RadioGroup extends BaseRadioGroup {
+    // (undocumented)
+    disconnectedCallback(): void;
+    // (undocumented)
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
 }
 
 // @public
@@ -3955,6 +3960,8 @@ export class Tab extends FASTElement {
     // (undocumented)
     connectedCallback(): void;
     disabled: boolean;
+    // (undocumented)
+    protected disabledChanged(prev: boolean, next: boolean): void;
     // @internal
     elementInternals: ElementInternals;
 }
@@ -3970,9 +3977,11 @@ export const TabDefinition: FASTElementDefinition<typeof Tab>;
 
 // @public
 export class Tablist extends BaseTablist {
-    activeidChanged(oldValue: string, newValue: string): void;
     appearance?: TablistAppearance;
+    // (undocumented)
+    disconnectedCallback(): void;
     size?: TablistSize;
+    // (undocumented)
     tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }
 
@@ -4369,6 +4378,10 @@ export class Tree extends BaseTree {
     protected appearanceChanged(): void;
     // @internal
     childTreeItemsChanged(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // @internal (undocumented)
+    itemToggleHandler(): void;
     size: TreeItemSize;
     // (undocumented)
     protected sizeChanged(): void;
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index d6c3726f90a2f..cc1b9b7c7df83 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -77,6 +77,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.10.10",
     "@microsoft/fast-element": "2.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.3.0",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",
     "@storybook/html-vite": "9.1.17",
@@ -93,7 +94,8 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0"
+    "@microsoft/fast-element": "^2.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.3.0"
   },
   "beachball": {
     "disallowedChangeTypes": [
diff --git a/packages/web-components/src/_docs/developer/polyfilling.mdx b/packages/web-components/src/_docs/developer/polyfilling.mdx
index 70e19d36cad9b..2e24491fcb8d5 100644
--- a/packages/web-components/src/_docs/developer/polyfilling.mdx
+++ b/packages/web-components/src/_docs/developer/polyfilling.mdx
@@ -94,3 +94,17 @@ if (!CSS.supports('anchor-name: --foo')) {
 import { default as applyPolyfill } from '@oddbird/css-anchor-positioning/fn';
 window.CSS_ANCHOR_POLYFILL = applyPolyfill;
 ```
+
+## HTML Focusgroup
+
+For components that require directional navigations (moving focus between focusable elements within a component with arrow keys instead of tab), Fluent Web Components have adopted [HTML Focusgroup](https://open-ui.org/components/scoped-focusgroup.explainer/). The components that currently use focusgroup include MenuList/MenuItem, RadioGroup/Radio, Tablist/Tab, and Tree/TreeItem.
+
+For browsers that don’t yet support focusgroup, we use [`@microsoft/focusgroup-polyfill`](https://github.com/microsoft/polyfills/tree/main/packages/focusgroup) and automatically polyfill the components when they are connected to the DOM.
+
+If you want to opt out of the polyfill, you can use the base classes of these components, e.g.
+
+```js
+import { BaseTablist } from '@fluentui/web-components/tablist/base.js';
+
+export class MyTablist extends BaseTablist {}
+```
diff --git a/packages/web-components/src/menu-item/menu-item.template.ts b/packages/web-components/src/menu-item/menu-item.template.ts
index 9fc26092f8bb3..71f7537acab80 100644
--- a/packages/web-components/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/src/menu-item/menu-item.template.ts
@@ -14,11 +14,12 @@ const chevronRight16Filled = html.partial(
 export function menuItemTemplate<T extends MenuItem>(options: MenuItemOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template
+      tabindex="0"
       @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
       @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
       @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
       @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
-      @toggle="${(x, c) => x.toggleHandler(c.event as ToggleEvent)}"
+      @toggle="${(x, c) => x.handleToggle(c.event as ToggleEvent)}"
     >
       <slot name="indicator"> ${staticallyCompose(options.indicator)} </slot>
       ${startSlotTemplate(options)}
diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts
index b5e6e4b73c8ef..b6ea94d1f3bdd 100644
--- a/packages/web-components/src/menu-item/menu-item.ts
+++ b/packages/web-components/src/menu-item/menu-item.ts
@@ -133,12 +133,15 @@ export class MenuItem extends FASTElement {
    * @internal
    */
   protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]) {
-    this.submenu?.removeEventListener('toggle', this.toggleHandler);
+    this.submenu?.removeEventListener('toggle', this.handleToggle);
+    this.submenu?.removeEventListener('focusout', this.handleSubmenuFocusOut);
 
     if (next.length) {
       this.submenu = next[0];
       this.submenu.toggleAttribute('popover', true);
-      this.submenu.addEventListener('toggle', this.toggleHandler);
+      this.submenu.setAttribute('focusgroup', 'none');
+      this.submenu.addEventListener('toggle', this.handleToggle);
+      this.submenu.addEventListener('focusout', this.handleSubmenuFocusOut);
       this.elementInternals.ariaHasPopup = 'menu';
       toggleState(this.elementInternals, 'submenu', true);
     } else {
@@ -236,16 +239,29 @@ export class MenuItem extends FASTElement {
    * Setup required ARIA on open/close
    * @internal
    */
-  public toggleHandler = (e: Event): void => {
-    if (e instanceof ToggleEvent && e.newState === 'open') {
-      this.setAttribute('tabindex', '-1');
+  public handleToggle = (e: Event): void => {
+    if (!(e instanceof ToggleEvent)) {
+      return;
+    }
+
+    if (e.newState === 'open') {
       this.elementInternals.ariaExpanded = 'true';
       this.setSubmenuPosition();
     }
-    if (e instanceof ToggleEvent && e.newState === 'closed') {
+    if (e.newState === 'closed') {
       this.elementInternals.ariaExpanded = 'false';
-      this.setAttribute('tabindex', '0');
     }
+
+    this.submenu?.setAttribute('focusgroup', e.newState === 'open' ? 'menu' : 'none');
+  };
+
+  /** @internal */
+  public handleSubmenuFocusOut = (e: FocusEvent) => {
+    if (e.relatedTarget && this.submenu?.contains(e.relatedTarget as Node)) {
+      return;
+    }
+
+    this.submenu?.togglePopover(false);
   };
 
   /**
diff --git a/packages/web-components/src/menu-list/menu-list.base.ts b/packages/web-components/src/menu-list/menu-list.base.ts
index 2071db75c55a7..404189e966810 100644
--- a/packages/web-components/src/menu-list/menu-list.base.ts
+++ b/packages/web-components/src/menu-list/menu-list.base.ts
@@ -1,11 +1,11 @@
-import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
-import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
+import { FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { isHTMLElement } from '@microsoft/fast-web-utilities';
 import type { MenuItemColumnCount } from '../menu-item/menu-item.js';
 import type { MenuItem } from '../menu-item/menu-item.js';
 import { isMenuItem, MenuItemRole } from '../menu-item/menu-item.options.js';
 
 /**
- * A Base Menu List Custom HTML Element.
+ * A Base MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @public
@@ -27,18 +27,14 @@ export class BaseMenuList extends FASTElement {
     // only update children after the component is connected and
     // the setItems has run on connectedCallback
     // (menuItems is undefined until then)
-    if (this.$fastController.isConnected && this.menuItems !== undefined) {
+    if (this.$fastController.isConnected && this.menuChildren !== undefined) {
       this.setItems();
     }
   }
 
-  protected menuItems: Element[] | undefined;
+  protected menuChildren: HTMLElement[] | undefined;
 
-  /**
-   * The index of the focusable element in the items array
-   * defaults to -1
-   */
-  private focusIndex: number = -1;
+  protected menuItems: MenuItem[] | undefined;
 
   private static focusableElementRoles = MenuItemRole;
 
@@ -67,8 +63,7 @@ export class BaseMenuList extends FASTElement {
    */
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.removeItemListeners();
-    this.menuItems = undefined;
+    this.menuChildren = undefined;
     this.removeEventListener('change', this.changedMenuItemHandler);
   }
 
@@ -89,71 +84,7 @@ export class BaseMenuList extends FASTElement {
    * @public
    */
   public focus(): void {
-    this.setFocus(0, 1);
-  }
-
-  /**
-   * @internal
-   */
-  public handleMenuKeyDown(e: KeyboardEvent): void | boolean {
-    if (e.defaultPrevented || this.menuItems === undefined) {
-      return;
-    }
-    switch (e.key) {
-      case keyArrowDown:
-        // go forward one index
-        this.setFocus(this.focusIndex + 1, 1);
-        return;
-      case keyArrowUp:
-        // go back one index
-        this.setFocus(this.focusIndex - 1, -1);
-        return;
-      case keyEnd:
-        // set focus on last item
-        this.setFocus(this.menuItems.length - 1, -1);
-        return;
-      case keyHome:
-        // set focus on first item
-        this.setFocus(0, 1);
-        return;
-      default:
-        // if we are not handling the event, do not prevent default
-        return true;
-    }
-  }
-
-  /**
-   * if focus is moving out of the menu, reset to a stable initial state
-   * @internal
-   */
-  public handleFocusOut = (e: FocusEvent) => {
-    if (!this.contains(e.relatedTarget as Element) && this.menuItems !== undefined) {
-      // find our first focusable element
-      const focusIndex: number = this.menuItems.findIndex(this.isFocusableElement);
-      // set the current focus index's tabindex to -1
-      this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-      // set the first focusable element tabindex to 0
-      this.menuItems[focusIndex].setAttribute('tabindex', '0');
-      // set the focus index
-      this.focusIndex = focusIndex;
-    }
-  };
-
-  private handleItemFocus = (e: FocusEvent) => {
-    const targetItem: HTMLElement = e.target as HTMLElement;
-
-    if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
-      this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-      this.focusIndex = this.menuItems.indexOf(targetItem);
-      targetItem.setAttribute('tabindex', '0');
-    }
-  };
-
-  private removeItemListeners(items: HTMLElement[] = this.items): void {
-    items.forEach(item => {
-      item.removeEventListener('focus', this.handleItemFocus);
-      Observable.getNotifier(item).unsubscribe(this, 'hidden');
-    });
+    this.menuItems?.find(item => !item.disabled)?.focus();
   }
 
   private static elementIndent(el: HTMLElement): MenuItemColumnCount {
@@ -170,39 +101,21 @@ export class BaseMenuList extends FASTElement {
   protected setItems(): void {
     const children: HTMLElement[] = Array.from(this.children) as HTMLElement[];
 
-    this.removeItemListeners(children);
-
-    children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'hidden'));
-
-    const newItems: Element[] = children.filter(child => !child.hasAttribute('hidden'));
-
-    this.menuItems = newItems;
-
-    const menuItems = this.menuItems.filter(this.isMenuItemElement);
-
-    // if our focus index is not -1 we have items
-    if (menuItems.length) {
-      this.focusIndex = 0;
-    }
-
-    menuItems.forEach((item: HTMLElement, index: number) => {
-      item.setAttribute('tabindex', index === 0 ? '0' : '-1');
-      item.addEventListener('focus', this.handleItemFocus);
-    });
+    this.menuChildren = children.filter(child => !child.hasAttribute('hidden'));
 
     /**
      * Set the indent attribute on MenuItem elements based on their
      * position in the MenuList. Each MenuItem element has a data-indent attribute that is
      * used to set the indent of the element's start slot content.
      */
-    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-    const indent: MenuItemColumnCount = filteredMenuListItems?.reduce<MenuItemColumnCount>((accum, current) => {
+    this.menuItems = this.menuChildren?.filter(this.isMenuItemElement);
+    const indent: MenuItemColumnCount = this.menuItems?.reduce<MenuItemColumnCount>((accum, current) => {
       const elementValue = BaseMenuList.elementIndent(current as HTMLElement);
 
       return Math.max(accum, elementValue as number) as MenuItemColumnCount;
     }, 0);
 
-    filteredMenuListItems?.forEach((item: HTMLElement) => {
+    this.menuItems?.forEach((item: HTMLElement) => {
       item.dataset.indent = `${indent}`;
     });
   }
@@ -220,11 +133,11 @@ export class BaseMenuList extends FASTElement {
    * Handle change from child MenuItem element and set radio group behavior
    */
   private changedMenuItemHandler = (e: Event): void => {
-    if (this.menuItems === undefined) {
+    if (this.menuChildren === undefined) {
       return;
     }
     const changedMenuItem: MenuItem = e.target as MenuItem;
-    const changeItemIndex: number = this.menuItems.indexOf(changedMenuItem);
+    const changeItemIndex: number = this.menuChildren.indexOf(changedMenuItem);
 
     if (changeItemIndex === -1) {
       return;
@@ -232,7 +145,7 @@ export class BaseMenuList extends FASTElement {
 
     if (changedMenuItem.role === 'menuitemradio' && changedMenuItem.checked === true) {
       for (let i = changeItemIndex - 1; i >= 0; --i) {
-        const item: Element = this.menuItems[i];
+        const item: Element = this.menuChildren[i];
         const role: string | null = (item as HTMLElement).role;
         if (role === MenuItemRole.menuitemradio) {
           (item as MenuItem).checked = false;
@@ -241,9 +154,9 @@ export class BaseMenuList extends FASTElement {
           break;
         }
       }
-      const maxIndex: number = this.menuItems.length - 1;
+      const maxIndex: number = this.menuChildren.length - 1;
       for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-        const item: Element = this.menuItems[i];
+        const item: Element = this.menuChildren[i];
         const role: string | null = (item as HTMLElement).role;
         if (role === MenuItemRole.menuitemradio) {
           (item as MenuItem).checked = false;
@@ -258,44 +171,7 @@ export class BaseMenuList extends FASTElement {
   /**
    * check if the item is a menu item
    */
-  protected isMenuItemElement = (el: Element): el is HTMLElement => {
+  protected isMenuItemElement(el: Element): el is MenuItem {
     return isMenuItem(el) || (isHTMLElement(el) && !!el.role && el.role in BaseMenuList.focusableElementRoles);
-  };
-
-  /**
-   * check if the item is focusable
-   */
-  private isFocusableElement = (el: Element): el is HTMLElement => {
-    return this.isMenuItemElement(el);
-  };
-
-  private setFocus(focusIndex: number, adjustment: number): void {
-    if (this.menuItems === undefined) {
-      return;
-    }
-
-    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-      const child: Element = this.menuItems[focusIndex];
-
-      if (this.isFocusableElement(child)) {
-        // change the previous index to -1
-        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-          this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-        }
-
-        // update the focus index
-        this.focusIndex = focusIndex;
-
-        // update the tabindex of next focusable element
-        child.setAttribute('tabindex', '0');
-
-        // focus the element
-        child.focus();
-
-        break;
-      }
-
-      focusIndex += adjustment;
-    }
   }
 }
diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts
index 2210e8c3b0881..be9d7281371c3 100644
--- a/packages/web-components/src/menu-list/menu-list.spec.ts
+++ b/packages/web-components/src/menu-list/menu-list.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '../../test/playwright/index.js';
 import type { MenuItem } from '../menu-item/menu-item.js';
 import { MenuItemRole } from '../menu-item/menu-item.options.js';
 
-test.describe('Menu', () => {
+test.describe('MenuList', () => {
   test.use({
     tagName: 'fluent-menu-list',
     waitFor: ['fluent-menu-item'],
diff --git a/packages/web-components/src/menu-list/menu-list.stories.ts b/packages/web-components/src/menu-list/menu-list.stories.ts
index 2a43ed5aa3260..d72aa56672230 100644
--- a/packages/web-components/src/menu-list/menu-list.stories.ts
+++ b/packages/web-components/src/menu-list/menu-list.stories.ts
@@ -128,6 +128,21 @@ export const RadioItems: Story = {
   },
 };
 
+export const RadioItemsWithSeparators: Story = {
+  args: {
+    slottedContent: () => html`
+      <fluent-menu-item role="menuitemradio">Item 1</fluent-menu-item>
+      <fluent-menu-item role="menuitemradio">Item 2</fluent-menu-item>
+      <fluent-divider role="separator"></fluent-divider>
+      <fluent-menu-item role="menuitemradio">Item 3</fluent-menu-item>
+      <fluent-menu-item role="menuitemradio">Item 4</fluent-menu-item>
+      <fluent-divider role="separator"></fluent-divider>
+      <fluent-menu-item role="menuitemradio">Item 5</fluent-menu-item>
+      <fluent-menu-item role="menuitemradio">Item 6</fluent-menu-item>
+    `,
+  },
+};
+
 export const DisabledItems: Story = {
   args: {
     slottedContent: () => html`
diff --git a/packages/web-components/src/menu-list/menu-list.template.ts b/packages/web-components/src/menu-list/menu-list.template.ts
index 6c5b222d63610..f0f347186ed5c 100644
--- a/packages/web-components/src/menu-list/menu-list.template.ts
+++ b/packages/web-components/src/menu-list/menu-list.template.ts
@@ -3,11 +3,7 @@ import type { MenuList } from './menu-list.js';
 
 export function menuTemplate<T extends MenuList>(): ElementViewTemplate<T> {
   return html<T>`
-    <template
-      slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}"
-      @keydown="${(x, c) => x.handleMenuKeyDown(c.event as KeyboardEvent)}"
-      @focusout="${(x, c) => x.handleFocusOut(c.event as FocusEvent)}"
-    >
+    <template focusgroup="menu" slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}">
       <slot ${slotted('items')}></slot>
     </template>
   `;
diff --git a/packages/web-components/src/menu-list/menu-list.ts b/packages/web-components/src/menu-list/menu-list.ts
index 92b949156b85d..76dae478d0da8 100644
--- a/packages/web-components/src/menu-list/menu-list.ts
+++ b/packages/web-components/src/menu-list/menu-list.ts
@@ -1,7 +1,10 @@
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
+import type { MenuItem } from '../menu-item/menu-item.js';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseMenuList } from './menu-list.base.js';
 
 /**
- * A Menu List Custom HTML Element.
+ * A MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @tag fluent-menu-list
@@ -10,4 +13,30 @@ import { BaseMenuList } from './menu-list.base.js';
  *
  * @public
  */
-export class MenuList extends BaseMenuList {}
+export class MenuList extends BaseMenuList {
+  private fg?: FocusGroup;
+
+  private fgItems?: ArrayItemCollection<MenuItem>;
+
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  override setItems(): void {
+    super.setItems();
+
+    this.fgItems ??= new ArrayItemCollection<MenuItem>(() => this.menuItems?.filter(i => !i.hidden) ?? []);
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: 'menu',
+          axis: 'block',
+          wrap: true,
+        },
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+}
diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts
index cdc29cf067a9a..3d48840d8ae2e 100644
--- a/packages/web-components/src/menu/menu.ts
+++ b/packages/web-components/src/menu/menu.ts
@@ -279,9 +279,10 @@ export class Menu extends FASTElement {
     // @ts-expect-error - Baseline 2024
     if (e.type === 'toggle' && e.newState) {
       // @ts-expect-error - Baseline 2024
-      const newState = e.newState === 'open';
-      this._trigger?.setAttribute('aria-expanded', `${newState}`);
-      this._open = newState;
+      const open = e.newState === 'open';
+      this._trigger?.setAttribute('aria-expanded', `${open}`);
+      this._menuList?.setAttribute('focusgroup', open ? 'menu' : 'none');
+      this._open = open;
       if (this._open) {
         this.focusMenuList();
       }
diff --git a/packages/web-components/src/radio-group/radio-group.base.ts b/packages/web-components/src/radio-group/radio-group.base.ts
index 8edf42c8ba8ce..45070ad7c42cc 100644
--- a/packages/web-components/src/radio-group/radio-group.base.ts
+++ b/packages/web-components/src/radio-group/radio-group.base.ts
@@ -1,9 +1,16 @@
-import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
-import { findLastIndex } from '@microsoft/fast-web-utilities';
-import { Radio } from '../radio/radio.js';
+import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
+import {
+  findLastIndex,
+  keyArrowDown,
+  keyArrowLeft,
+  keyArrowRight,
+  keyArrowUp,
+  keyEnd,
+  keyHome,
+  keySpace,
+} from '@microsoft/fast-web-utilities';
+import type { Radio } from '../radio/radio.js';
 import { isRadio } from '../radio/radio.options.js';
-import { getDirection } from '../utils/direction.js';
-import { getRootActiveElement } from '../utils/root-active-element.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
 
 /**
@@ -13,6 +20,8 @@ import { RadioGroupOrientation } from './radio-group.options.js';
  * @public
  */
 export class BaseRadioGroup extends FASTElement {
+  private isNavigating = false;
+
   /**
    * The index of the checked radio, scoped to the enabled radios.
    *
@@ -64,7 +73,6 @@ export class BaseRadioGroup extends FASTElement {
       this.radios?.forEach(radio => {
         radio.disabled = !!radio.disabledAttribute || !!this.disabled;
       });
-      this.restrictFocus();
     }
   }
 
@@ -170,6 +178,7 @@ export class BaseRadioGroup extends FASTElement {
 
       radio.name = this.name ?? radio.name;
       radio.disabled = !!this.disabled || !!radio.disabledAttribute;
+      radio.toggleAttribute('focusgroupstart', radio.checked && !radio.disabled);
     });
 
     if (!this.dirtyState && this.initialValue) {
@@ -179,15 +188,8 @@ export class BaseRadioGroup extends FASTElement {
     if (
       !this.value ||
       // This logic covers the case when the RadioGroup doesn't have a `value`
-      // attribute, but does have a checked child Radio. Without this condition,
-      // the checked Radio's value will be assigned to `this.value`, and
-      // `checkedIndex` will be the checked Radio's index, but `this.checkedIndex`
-      // will remain `undefined`, which would cause the RadioGroup to add
-      // `tabindex=-1` to the checked Radio, and effectively makes the whole
-      // RadioGroup unfocusable.
       (this.value && typeof this.checkedIndex !== 'number' && checkedIndex >= 0)
     ) {
-      // TODO: Switch to standard `Array.findLastIndex` when TypeScript 5 is available
       this.checkedIndex = checkedIndex;
     }
 
@@ -196,10 +198,6 @@ export class BaseRadioGroup extends FASTElement {
     if (radioIds) {
       this.setAttribute('aria-owns', radioIds);
     }
-
-    Updates.enqueue(() => {
-      this.restrictFocus();
-    });
   }
 
   /**
@@ -422,6 +420,13 @@ export class BaseRadioGroup extends FASTElement {
     this.enabledRadios[Math.max(0, this.checkedIndex)]?.focus();
   }
 
+  formResetCallback(): void {
+    this.dirtyState = false;
+    this.checkedIndex = -1;
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
+
   /**
    * Enables tabbing through the radio group when the group receives focus.
    *
@@ -429,44 +434,25 @@ export class BaseRadioGroup extends FASTElement {
    * @internal
    */
   public focusinHandler(e: FocusEvent): boolean | void {
-    if (!this.disabled) {
-      this.enabledRadios.forEach(radio => {
-        radio.tabIndex = 0;
+    if (!this.disabled && (this.isNavigating || this.value)) {
+      // Uncheck the checked disabled radio, if any.
+      this.radios?.forEach(radio => {
+        if (radio.disabled && radio.checked) {
+          radio.checked = false;
+        }
       });
-    }
 
-    return true;
-  }
+      const index = this.enabledRadios.indexOf(e.target as Radio);
+      if (index > -1) {
+        this.checkRadio(index, true);
+      }
 
-  /**
-   * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
-   *
-   * @param e - the focusout event
-   * @internal
-   */
-  public focusoutHandler(e: FocusEvent): boolean | void {
-    if (this.radios?.includes(e.relatedTarget as Radio) && this.radios?.some(x => x.checked)) {
-      this.restrictFocus();
+      this.isNavigating = false;
     }
 
     return true;
   }
 
-  formResetCallback(): void {
-    this.dirtyState = false;
-    this.checkedIndex = -1;
-    this.setFormValue(this.value);
-    this.setValidity();
-  }
-
-  private getEnabledIndexInBounds(index: number, upperBound = this.enabledRadios.length): number {
-    if (upperBound === 0) {
-      return -1;
-    }
-
-    return (index + upperBound) % upperBound;
-  }
-
   /**
    * Handles keydown events for the radio group.
    *
@@ -474,49 +460,20 @@ export class BaseRadioGroup extends FASTElement {
    * @internal
    */
   public keydownHandler(e: KeyboardEvent): boolean | void {
-    const isRtl = getDirection(this) === 'rtl';
-    const checkedIndex = this.enabledRadios.findIndex(x => x === getRootActiveElement(this)) ?? this.checkedIndex;
-    let increment = 0;
-
     switch (e.key) {
-      case 'ArrowLeft': {
-        increment = isRtl ? 1 : -1;
+      case keyArrowUp:
+      case keyArrowDown:
+      case keyArrowLeft:
+      case keyArrowRight:
+      case keyHome:
+      case keyEnd:
+        this.isNavigating = true;
         break;
-      }
-
-      case 'ArrowUp': {
-        increment = -1;
-        break;
-      }
-
-      case 'ArrowRight': {
-        increment = isRtl ? -1 : 1;
-        break;
-      }
-
-      case 'ArrowDown': {
-        increment = 1;
-        break;
-      }
-
-      case 'Tab': {
-        this.restrictFocus();
-        break;
-      }
-
-      case ' ': {
+      case keySpace:
         this.checkRadio();
         break;
-      }
     }
-
-    if (!increment) {
-      return true;
-    }
-
-    const nextIndex = checkedIndex + increment;
-    this.checkRadio(this.getEnabledIndexInBounds(nextIndex), true);
-    this.enabledRadios[this.checkedIndex]?.focus();
+    return true;
   }
 
   /**
@@ -540,26 +497,6 @@ export class BaseRadioGroup extends FASTElement {
     return this.elementInternals.reportValidity();
   }
 
-  /**
-   * Resets the `tabIndex` for all child radios when the radio group loses focus.
-   *
-   * @internal
-   */
-  private restrictFocus() {
-    let activeIndex = Math.max(this.checkedIndex, 0);
-    const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this) as Radio);
-
-    if (focusedRadioIndex !== -1) {
-      activeIndex = focusedRadioIndex;
-    }
-
-    activeIndex = this.getEnabledIndexInBounds(activeIndex);
-
-    this.enabledRadios.forEach((item, index) => {
-      item.tabIndex = index === activeIndex ? 0 : -1;
-    });
-  }
-
   /**
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
    *
diff --git a/packages/web-components/src/radio-group/radio-group.spec.ts b/packages/web-components/src/radio-group/radio-group.spec.ts
index c2b6bfa496ca2..56dea1212bc9f 100644
--- a/packages/web-components/src/radio-group/radio-group.spec.ts
+++ b/packages/web-components/src/radio-group/radio-group.spec.ts
@@ -502,14 +502,16 @@ test.describe('RadioGroup', () => {
     const { element } = fastPage;
     const radios = element.locator('fluent-radio');
 
-    await fastPage.setTemplate({
-      innerHTML: /* html */ `
+    await fastPage.setTemplate(/* html */ `
+      <button data-testid="before">before</button>
+      <fluent-radio-group>
         <fluent-radio></fluent-radio>
         <fluent-radio></fluent-radio>
         <fluent-radio></fluent-radio>
-      `,
-    });
+      </fluent-radio-group>
+    `);
 
+    await page.getByTestId('before').focus();
     await page.keyboard.press('Tab');
 
     await expect(radios.nth(0)).toBeFocused();
@@ -736,4 +738,56 @@ test.describe('RadioGroup', () => {
 
     await expect(page).not.toHaveURL(/radio=/);
   });
+
+  test('should NOT check the first radio when the group gains focus and check when space is hit', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const radios = element.locator('fluent-radio');
+    const before = page.getByTestId('before');
+
+    await fastPage.setTemplate(/* html */ `
+      <button data-testid="before">before</button>
+      <fluent-radio-group name="radio">
+        <fluent-radio value="foo"></fluent-radio>
+        <fluent-radio value="bar"></fluent-radio>
+        <fluent-radio value="baz"></fluent-radio>
+      </fluent-radio-group>
+    `);
+
+    await before.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(radios.nth(0)).toBeFocused();
+    await expect(radios.nth(0)).toHaveJSProperty('checked', false);
+
+    await page.keyboard.press('Space');
+    await expect(radios.nth(0)).toHaveJSProperty('checked', true);
+  });
+
+  test('should check the second radio when the focus is moved to it by directional navigation', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const radios = element.locator('fluent-radio');
+    const before = page.getByTestId('before');
+
+    await fastPage.setTemplate(/* html */ `
+      <button data-testid="before">before</button>
+      <fluent-radio-group name="radio">
+        <fluent-radio value="foo"></fluent-radio>
+        <fluent-radio value="bar"></fluent-radio>
+        <fluent-radio value="baz"></fluent-radio>
+      </fluent-radio-group>
+    `);
+
+    await before.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('ArrowRight');
+
+    await expect(radios.nth(1)).toBeFocused();
+    await expect(radios.nth(1)).toHaveJSProperty('checked', true);
+  });
 });
diff --git a/packages/web-components/src/radio-group/radio-group.template.ts b/packages/web-components/src/radio-group/radio-group.template.ts
index bde47ac0ac22a..6bddc0011cc1d 100644
--- a/packages/web-components/src/radio-group/radio-group.template.ts
+++ b/packages/web-components/src/radio-group/radio-group.template.ts
@@ -4,11 +4,11 @@ import type { RadioGroup } from './radio-group.js';
 export function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<T> {
   return html<T>`
     <template
+      focusgroup="radiogroup wrap"
       @disabled="${(x, c) => x.disabledRadioHandler(c.event as CustomEvent)}"
       @change="${(x, c) => x.changeHandler(c.event as Event)}"
       @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
       @focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
-      @focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
       @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     >
       <slot ${slotted('slottedRadios')}></slot>
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 5d15482015363..c28e4a07cff60 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,3 +1,6 @@
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
+import type { Radio } from '../radio/radio.js';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseRadioGroup } from './radio-group.base.js';
 
 /**
@@ -10,4 +13,33 @@ import { BaseRadioGroup } from './radio-group.base.js';
  *
  * @public
  */
-export class RadioGroup extends BaseRadioGroup {}
+export class RadioGroup extends BaseRadioGroup {
+  private fg!: FocusGroup;
+
+  private fgItems!: ArrayItemCollection<Radio>;
+
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  public radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void {
+    super.radiosChanged(prev, next);
+
+    this.fgItems ??= new ArrayItemCollection<Radio>(
+      () => this.enabledRadios?.filter(r => !r.hidden) ?? [],
+      () => this.enabledRadios?.find(r => r.checked) ?? null,
+    );
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: 'radiogroup',
+          axis: undefined,
+          wrap: true,
+        },
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+}
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index 30d277d6787bd..d3a4c766b9f7c 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -77,6 +77,23 @@ export const styles = css`
     z-index: 1;
   }
 
+  /*
+   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
+   * https://bugs.webkit.org/show_bug.cgi?id=298646
+   * Also remove the same trick from tablist.styles.ts.
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * using CSS Anchor Positioning here because it crashes.
+   */
+  @supports (anchor-name: --a) and (text-size-adjust: auto) {
+    :host([aria-selected='true'])::after {
+      background-color: transparent;
+    }
+
+    :host([aria-selected='true']:hover)::after {
+      background-color: ${colorNeutralStroke1Hover};
+    }
+  }
+
   :host([aria-selected='true'][disabled])::after {
     background-color: ${colorNeutralForegroundDisabled};
   }
@@ -89,6 +106,7 @@ export const styles = css`
     cursor: not-allowed;
     fill: ${colorNeutralForegroundDisabled};
     color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
   }
 
   :host([disabled]:hover)::after {
diff --git a/packages/web-components/src/tab/tab.template.ts b/packages/web-components/src/tab/tab.template.ts
index 3a58bcf56b546..62470c15fe57d 100644
--- a/packages/web-components/src/tab/tab.template.ts
+++ b/packages/web-components/src/tab/tab.template.ts
@@ -4,7 +4,7 @@ import type { Tab, TabOptions } from './tab.js';
 
 export function tabTemplate<T extends Tab>(options: TabOptions = {}): ElementViewTemplate<T> {
   return html<T>`
-    <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
+    <template slot="tab" role="tab">
       ${startSlotTemplate(options)}
       <span class="tab-content"><slot></slot></span>
       ${endSlotTemplate(options)}
diff --git a/packages/web-components/src/tab/tab.ts b/packages/web-components/src/tab/tab.ts
index 20daac51e389e..42929cc963bae 100644
--- a/packages/web-components/src/tab/tab.ts
+++ b/packages/web-components/src/tab/tab.ts
@@ -23,6 +23,9 @@ export class Tab extends FASTElement {
    */
   @attr({ mode: 'boolean' })
   public disabled!: boolean;
+  protected disabledChanged(prev: boolean, next: boolean) {
+    this.setDisabledSideEffect(next);
+  }
 
   /**
    * Internal text content stylesheet, used to set the content of the `::after`
@@ -49,9 +52,7 @@ export class Tab extends FASTElement {
 
     this.slot ||= 'tab';
 
-    if (this.disabled) {
-      this.setAttribute('aria-disabled', 'true');
-    }
+    this.setDisabledSideEffect(this.disabled);
 
     if (this.styles) {
       this.$fastController.removeStyles(this.styles);
@@ -59,12 +60,21 @@ export class Tab extends FASTElement {
 
     this.styles = css`
       :host {
-        --textContent: '${this.textContent as any}';
+        --textContent: '${this.textContent as string}';
       }
     `;
 
     this.$fastController.addStyles(this.styles);
   }
+
+  private setDisabledSideEffect(disabled: boolean) {
+    if (disabled) {
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.removeAttribute('aria-disabled');
+    }
+    this.tabIndex = disabled && this.getAttribute('aria-selected') !== 'true' ? -1 : 0;
+  }
 }
 
 /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
diff --git a/packages/web-components/src/tablist/tablist.base.ts b/packages/web-components/src/tablist/tablist.base.ts
index c38b471caf71e..fad8d3d5508a4 100644
--- a/packages/web-components/src/tablist/tablist.base.ts
+++ b/packages/web-components/src/tablist/tablist.base.ts
@@ -1,19 +1,8 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import {
-  keyArrowDown,
-  keyArrowLeft,
-  keyArrowRight,
-  keyArrowUp,
-  keyEnd,
-  keyHome,
-  uniqueId,
-  wrapInBounds,
-} from '@microsoft/fast-web-utilities';
+import { uniqueId } from '@microsoft/fast-web-utilities';
 import type { Tab } from '../tab/tab.js';
 import { isTab } from '../tab/tab.options.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
-import { isFocusableElement } from '../utils/focusable-element.js';
-import { getDirection } from '../utils/direction.js';
 import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { TablistOrientation } from './tablist.options.js';
 
@@ -28,6 +17,7 @@ export class BaseTablist extends FASTElement {
    * @internal
    */
   public elementInternals: ElementInternals = this.attachInternals();
+
   /**
    * Used for disabling all click and keyboard events for the tabs, child tab elements.
    * @public
@@ -36,17 +26,13 @@ export class BaseTablist extends FASTElement {
    */
   @attr({ mode: 'boolean' })
   public disabled: boolean = false;
-
-  /**
-   * Handles disabled changes
-   * @param prev - previous value
-   * @param next - next value
-   *
-   * @internal
-   */
+  /** @internal */
   protected disabledChanged(prev: boolean, next: boolean): void {
-    toggleState(this.elementInternals, 'disabled', next);
-    this.setTabs();
+    if (this.elementInternals) {
+      toggleState(this.elementInternals, 'disabled', next);
+    }
+
+    this.setTabs({ forceDisabled: true });
   }
 
   /**
@@ -57,9 +43,6 @@ export class BaseTablist extends FASTElement {
    */
   @attr
   public orientation: TablistOrientation = TablistOrientation.horizontal;
-  /**
-   * @internal
-   */
   protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void {
     if (this.elementInternals) {
       this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
@@ -78,32 +61,10 @@ export class BaseTablist extends FASTElement {
    */
   @attr
   public activeid!: string;
-  /**
-   * @internal
-   */
+  /** @internal */
   protected activeidChanged(oldValue: string, newValue: string): void {
     if (this.tabs?.length > 0) {
-      this.prevActiveTabIndex = this.tabs.findIndex((item: HTMLElement) => item.id === oldValue);
-      this.setTabs();
-
-      if (oldValue) {
-        const prevActiveTab = this.tabs[this.prevActiveTabIndex];
-        const prevActivePanel = this.tabPanelMap.get(prevActiveTab);
-        if (prevActivePanel) {
-          prevActivePanel.hidden = true;
-        }
-      }
-
-      if (newValue && this.activetab) {
-        const activePanel = this.tabPanelMap.get(this.activetab);
-        if (activePanel) {
-          activePanel.hidden = false;
-        }
-      }
-
-      if (oldValue !== newValue) {
-        this.change();
-      }
+      this.changeTab(oldValue, newValue);
     }
   }
 
@@ -113,45 +74,18 @@ export class BaseTablist extends FASTElement {
    */
   @observable
   public slottedTabs!: Node[];
-
-  /**
-   * Updates the tabs property when content in the tabs slot changes.
-   * @internal
-   */
-  public slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void {
+  /** @internal */
+  protected slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void {
     this.tabs = (next?.filter(tab => isTab(tab)) as Tab[]) ?? [];
   }
 
-  /**
-   * @internal
-   */
+  /** @internal */
   @observable
-  public tabs!: Tab[];
-  /**
-   * @internal
-   */
+  public tabs: Tab[] = [];
+  /** @internal */
   protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void {
-    if (prev?.length) {
-      prev.forEach((tab: Tab) => {
-        tab.removeEventListener('click', this.handleTabClick);
-        tab.removeEventListener('keydown', this.handleTabKeyDown);
-      });
-    }
-
-    if (this.tabs.length > 0) {
-      this.tabIds = this.getTabIds();
-      this.setTabs();
-
-      for (const tab of this.tabs) {
-        const ariaControls = tab.getAttribute('aria-controls') ?? '';
-        const rootNode = this.getRootNode() as Document | ShadowRoot;
-        const panel = rootNode.getElementById(ariaControls);
-        if (ariaControls && panel) {
-          panel.role ??= 'tabpanel';
-          panel.hidden = this.activeid !== tab.id;
-          this.tabPanelMap.set(tab, panel);
-        }
-      }
+    if (this.tabs?.length > 0) {
+      this.setTabs({ connectToPanel: true });
     }
   }
 
@@ -161,167 +95,102 @@ export class BaseTablist extends FASTElement {
    */
   public activetab!: Tab;
 
-  private prevActiveTabIndex: number = 0;
-  private activeTabIndex: number = 0;
-  private tabIds!: Array<string>;
-
   private tabPanelMap = new WeakMap<HTMLElement, HTMLElement>();
 
   private change = (): void => {
     this.$emit('change', this.activetab);
   };
 
-  private getActiveIndex(): number {
-    const id: string = this.activeid;
-    if (id !== undefined) {
-      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
-    } else {
-      return 0;
-    }
-  }
-
   /**
    * Function that is invoked whenever the selected tab or the tab collection changes.
-   *
-   * @public
    */
-  protected setTabs(): void {
-    this.activeTabIndex = this.getActiveIndex();
+  protected setTabs({ connectToPanel = false, forceDisabled = false } = {}): void {
+    if (!this.tabs) {
+      return;
+    }
 
-    const hasStartSlot = this.tabs?.some(tab => !!tab.querySelector("[slot='start']"));
+    const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
+    const rootNode = this.getRootNode() as Document | ShadowRoot;
+    let firstEnabledTabId = '';
 
-    this.tabs?.forEach((tab: Tab, index: number) => {
-      if (tab.slot === 'tab') {
-        const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
-        const tabId: string = this.tabIds[index];
-        if (!tab.disabled) {
-          this.disabled ? tab.setAttribute('aria-disabled', 'true') : tab.removeAttribute('aria-disabled');
-        }
-        tab.setAttribute('id', tabId);
-        tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
-        tab.addEventListener('click', this.handleTabClick);
-        tab.addEventListener('keydown', this.handleTabKeyDown);
-        tab.setAttribute('tabindex', isActiveTab && !this.disabled ? '0' : '-1');
-        if (isActiveTab) {
-          this.activetab = tab;
-          this.activeid = tabId;
-        }
-        // Only set the data-hasIndent attribute if the tab has a start slot and the orientation is vertical
-        if (hasStartSlot && this.orientation === TablistOrientation.vertical) {
-          tab.setAttribute('data-hasIndent', '');
-        }
+    for (const tab of this.tabs) {
+      if (tab.slot !== 'tab') {
+        continue;
       }
-    });
-  }
 
-  private getTabIds(): Array<string> {
-    return (
-      this.tabs?.map((tab: HTMLElement) => {
-        return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
-      }) ?? []
-    );
-  }
+      tab.id ||= uniqueId('tab-');
+      if (forceDisabled) {
+        tab.disabled = this.disabled;
+      } else {
+        tab.disabled = tab.disabled || this.disabled;
+      }
+
+      if (!firstEnabledTabId && !tab.disabled) {
+        firstEnabledTabId = tab.id;
+      }
 
-  private setComponent(): void {
-    if (this.activeTabIndex !== this.prevActiveTabIndex) {
-      this.activeid = this.tabIds[this.activeTabIndex] as string;
-      this.focusTab();
+      const isSelected = this.activeid === tab.id;
+      tab.toggleAttribute('focusgroupstart', isSelected);
+      tab.setAttribute('aria-selected', isSelected.toString());
+
+      // Only set the data-hasIndent attribute if the tab has a start slot and the orientation is vertical
+      tab.toggleAttribute('data-hasIndent', hasStartSlot && this.orientation === TablistOrientation.vertical);
+
+      if (connectToPanel) {
+        const ariaControls = tab.getAttribute('aria-controls') ?? '';
+        const panel = rootNode.getElementById(ariaControls);
+        if (ariaControls && panel) {
+          panel.role ??= 'tabpanel';
+          panel.hidden = this.activeid !== tab.id;
+          this.tabPanelMap.set(tab, panel);
+        }
+      }
+    }
+
+    if (!this.disabled) {
+      if (this.activeid) {
+        this.changeTab(undefined, this.activeid);
+      } else if (firstEnabledTabId) {
+        this.activeid = firstEnabledTabId;
+      }
     }
   }
 
-  private handleTabClick = (event: MouseEvent): void => {
-    const selectedTab = event.currentTarget as Tab;
-    if (selectedTab.disabled || this.disabled) {
+  /** @internal */
+  public handleFocusIn(event: FocusEvent) {
+    const target = event.target as Node;
+    if (!isTab(target) || target.disabled) {
       return;
     }
-    if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
-      this.prevActiveTabIndex = this.activeTabIndex;
-      this.activeTabIndex = this.tabs.indexOf(selectedTab);
-      this.setComponent();
-    }
-  };
-
-  private isHorizontal(): boolean {
-    return this.orientation === TablistOrientation.horizontal;
+    this.activeid = target.id;
   }
 
-  private handleTabKeyDown = (event: KeyboardEvent): void => {
-    if (this.disabled) {
+  private changeTab(oldId: undefined | string, newId: string) {
+    const rootNode = this.getRootNode() as Document | ShadowRoot;
+    const prevTab = oldId ? rootNode.getElementById(oldId) : null;
+    const nextTab = rootNode.getElementById(newId);
+
+    if (!isTab(nextTab) || !this.contains(nextTab)) {
       return;
     }
 
-    const dir = getDirection(this);
-    switch (event.key) {
-      case keyArrowLeft:
-        if (!this.isHorizontal()) {
-          return;
-        }
-        event.preventDefault();
-        this.adjust(dir === 'ltr' ? -1 : 1);
-        break;
-      case keyArrowRight:
-        if (!this.isHorizontal()) {
-          return;
-        }
-        event.preventDefault();
-        this.adjust(dir === 'ltr' ? 1 : -1);
-        break;
-      case keyArrowUp:
-        if (this.isHorizontal()) {
-          return;
-        }
-        event.preventDefault();
-        this.adjust(-1);
-        break;
-      case keyArrowDown:
-        if (this.isHorizontal()) {
-          return;
-        }
-        event.preventDefault();
-        this.adjust(1);
-        break;
-      case keyHome:
-        event.preventDefault();
-        this.adjust(-this.activeTabIndex);
-        break;
-      case keyEnd:
-        event.preventDefault();
-        this.adjust(this.tabs.filter(t => isFocusableElement(t)).length - this.activeTabIndex - 1);
-        break;
+    if (prevTab) {
+      prevTab.setAttribute('aria-selected', 'false');
+      const prevPanel = this.tabPanelMap.get(prevTab);
+      if (prevPanel) {
+        prevPanel.hidden = true;
+      }
     }
-  };
 
-  /**
-   * The adjust method for FASTTabs
-   * @public
-   * @remarks
-   * This method allows the active index to be adjusted by numerical increments
-   */
-  public adjust(adjustment: number): void {
-    const focusableTabs = this.tabs.filter(t => isFocusableElement(t));
-    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-
-    const nextTabIndex = wrapInBounds(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-
-    // the index of the next focusable tab within the context of all available tabs
-    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
-
-    if (nextIndex > -1) {
-      this.activateTabByIndex(this.tabs, nextIndex);
+    nextTab.setAttribute('aria-selected', 'true');
+    const nextPanel = this.tabPanelMap.get(nextTab);
+    if (nextPanel) {
+      nextPanel.hidden = false;
     }
-  }
 
-  private activateTabByIndex(group: Tab[], index: number) {
-    const tab = group[index];
-    this.activetab = tab;
-    this.prevActiveTabIndex = this.activeTabIndex;
-    this.activeTabIndex = index;
-    tab.focus();
-    this.setComponent();
-  }
+    this.activetab = nextTab;
 
-  private focusTab(): void {
-    this.tabs[this.activeTabIndex].focus();
+    this.change();
   }
 
   constructor() {
@@ -340,7 +209,6 @@ export class BaseTablist extends FASTElement {
     waitForConnectedDescendants(
       this,
       () => {
-        this.tabIds = this.getTabIds();
         this.setTabs();
       },
       { shallow: true },
diff --git a/packages/web-components/src/tablist/tablist.spec.ts b/packages/web-components/src/tablist/tablist.spec.ts
index 4445b214c3717..7cbf89f3ea5d9 100644
--- a/packages/web-components/src/tablist/tablist.spec.ts
+++ b/packages/web-components/src/tablist/tablist.spec.ts
@@ -30,31 +30,6 @@ test.describe('Tablist', () => {
     expect(hasError).toBe(false);
   });
 
-  test('should reset tab indicator offset and scale for horizontal orientation after animation', async ({
-    fastPage,
-  }) => {
-    const { element } = fastPage;
-    const tabs = element.locator('fluent-tab');
-
-    await tabs.nth(2).click();
-
-    await expect(element).toHaveCSS('--tabIndicatorOffset', '0px');
-
-    await expect(element).toHaveCSS('--tabIndicatorScale', '1');
-  });
-
-  test('should animate the active tab indicator', async ({ fastPage }) => {
-    const { element } = fastPage;
-    const tabs = element.locator('fluent-tab');
-    const tab = tabs.nth(2);
-
-    await expect(tab).not.toHaveAttribute('data-animate');
-
-    await tab.click();
-
-    await expect(tab).toHaveAttribute('data-animate', 'true');
-  });
-
   test('should have reflect disabled attribute on control', async ({ fastPage }) => {
     const { element } = fastPage;
 
@@ -156,8 +131,6 @@ test.describe('Tablist', () => {
       const tabs = element.locator('fluent-tab');
 
       await expect(tabs.nth(0)).toHaveAttribute('aria-selected', 'true');
-
-      await expect(element).toHaveJSProperty('activeTabIndex', 0);
     });
   });
 
@@ -301,6 +274,37 @@ test.describe('Tablist', () => {
     await expect(element).toHaveJSProperty('activeid', secondTabId);
   });
 
+  test('should keep disabled selected tab focusable until it loses selected state', async ({ fastPage }) => {
+    const { element, page } = fastPage;
+    const tabs = element.locator('fluent-tab');
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+        <fluent-tab>Tab one</fluent-tab>
+        <fluent-tab>Tab two</fluent-tab>
+        <fluent-tab>Tab three</fluent-tab>
+      `,
+    });
+
+    const secondTab = tabs.nth(1);
+
+    await secondTab.focus();
+    await expect(secondTab).toHaveAttribute('aria-selected', 'true');
+
+    await secondTab.evaluate((node: Tab) => {
+      node.disabled = true;
+    });
+
+    await secondTab.focus();
+    await page.keyboard.press('ArrowLeft');
+
+    await expect(tabs.nth(0)).toBeFocused();
+
+    await page.keyboard.press('ArrowRight');
+
+    await expect(tabs.nth(2)).toBeFocused();
+  });
+
   test('should not allow selecting hidden tab using arrow keys', async ({ fastPage }) => {
     const { element } = fastPage;
     const tabs = element.locator('fluent-tab');
diff --git a/packages/web-components/src/tablist/tablist.stories.ts b/packages/web-components/src/tablist/tablist.stories.ts
index 053d9b92353d0..5999cb5366552 100644
--- a/packages/web-components/src/tablist/tablist.stories.ts
+++ b/packages/web-components/src/tablist/tablist.stories.ts
@@ -18,8 +18,8 @@ const storyTemplate = html<StoryArgs<FluentTablist>>`
       }}"
       ${ref('tablist')}
     >
-      <fluent-tab id="first-tab">First Tab</fluent-tab>
-      <fluent-tab id="second-tab">
+      <fluent-tab id="${story => story.ids?.[0]}">First Tab</fluent-tab>
+      <fluent-tab id="${story => story.ids?.[1]}">
         ${when(
           story => story.hasStartSlot,
           html`<span slot="start">
@@ -40,8 +40,8 @@ const storyTemplate = html<StoryArgs<FluentTablist>>`
         )}
         Second Tab
       </fluent-tab>
-      <fluent-tab id="third-tab">Third Tab</fluent-tab>
-      <fluent-tab id="fourth-tab">Fourth Tab</fluent-tab>
+      <fluent-tab id="${story => story.ids?.[2]}">Third Tab</fluent-tab>
+      <fluent-tab id="${story => story.ids?.[3]}">Fourth Tab</fluent-tab>
     </fluent-tablist>
     <div ${ref('panel')}></div>
   </div>
@@ -93,6 +93,7 @@ export default {
         type: { summary: Object.values(TablistSize).join('|') },
       },
     },
+    ids: { table: { disable: true } },
   },
 } as Meta<FluentTablist>;
 
@@ -140,6 +141,7 @@ export const Disabled: Story = {
 export const ActiveId: Story = {
   args: {
     activeid: 'third-tab',
+    ids: ['first-tab', 'second-tab', 'third-tab', 'fourth-tab'],
   },
 };
 
diff --git a/packages/web-components/src/tablist/tablist.styles.ts b/packages/web-components/src/tablist/tablist.styles.ts
index c7086f1be0454..9aa5160ea2cf9 100644
--- a/packages/web-components/src/tablist/tablist.styles.ts
+++ b/packages/web-components/src/tablist/tablist.styles.ts
@@ -3,6 +3,7 @@ import { display } from '../utils/display.js';
 import {
   borderRadiusCircular,
   colorCompoundBrandForeground1Hover,
+  colorCompoundBrandStroke,
   colorNeutralForeground1,
   colorNeutralForeground1Hover,
   colorNeutralForeground2,
@@ -15,6 +16,7 @@ import {
   fontSizeBase400,
   lineHeightBase300,
   lineHeightBase400,
+  spacingHorizontalM,
   spacingHorizontalMNudge,
   spacingHorizontalSNudge,
   spacingVerticalL,
@@ -32,43 +34,60 @@ export const styles = css`
   ${display('flex')}
 
   :host {
-    --tabPaddingInline: inherit;
-    --tabPaddingBlock: inherit;
-    --tabIndicatorInsetInline: 0;
+    --tabPaddingInline: ${spacingHorizontalMNudge};
+    --tabPaddingBlock: ${spacingHorizontalM};
+    --tabIndicatorInsetInline: var(--tabPaddingInline);
     --tabIndicatorInsetBlock: 0;
     box-sizing: border-box;
     color: ${colorNeutralForeground2};
     flex-direction: row;
+    position: relative;
+  }
+
+  :host([size='small']) {
+    --tabPaddingBlock: ${spacingVerticalSNudge};
+    --tabPaddingInline: ${spacingHorizontalSNudge};
+  }
+
+  :host([size='large']) {
+    --tabPaddingBlock: ${spacingVerticalL};
+    --tabPaddingInline: ${spacingHorizontalMNudge};
   }
 
   :host([orientation='vertical']) {
+    --tabPaddingBlock: ${spacingVerticalS};
+    --tabIndicatorInsetBlock: ${spacingVerticalS};
     flex-direction: column;
   }
 
-  :host([orientation='vertical']) ::slotted([role='tab']) {
-    justify-content: flex-start;
+  :host([orientation='vertical'][size='small']) {
+    --tabPaddingBlock: ${spacingVerticalXXS};
+    --tabIndicatorInsetBlock: ${spacingVerticalSNudge};
+  }
+
+  :host([orientation='vertical'][size='large']) {
+    --tabPaddingBlock: ${spacingVerticalS};
+    --tabIndicatorInsetBlock: ${spacingVerticalMNudge};
   }
 
-  /* indicator animation  */
-  :host ::slotted([slot='tab'][data-animate='true'])::after {
-    transition-property: transform;
-    transition-duration: ${durationSlow};
-    transition-timing-function: ${curveDecelerateMax};
+  ::slotted([slot='tab']) {
+    padding-inline: var(--tabPaddingInline);
+    padding-block: var(--tabPaddingBlock);
+  }
+
+  :host([orientation='vertical']) ::slotted([role='tab']) {
+    justify-content: flex-start;
   }
 
   :host ::slotted([slot='tab'])::after {
     height: ${strokeWidthThicker};
     margin-block-start: auto;
-    transform-origin: left;
-    transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
   }
 
   :host([orientation='vertical']) ::slotted([slot='tab'])::after {
     width: ${strokeWidthThicker};
     height: unset;
     margin-block-start: unset;
-    transform-origin: top;
-    transform: translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale));
   }
 
   /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
@@ -105,21 +124,12 @@ export const styles = css`
     transform-origin: top;
   }
 
-  :host(:where([size='small'], [size='large'])) ::slotted([slot='tab']) {
-    padding-inline: var(--tabPaddingInline);
-    padding-block: var(--tabPaddingBlock);
-  }
-
   :host([size='small']) ::slotted([slot='tab']) {
-    --tabPaddingBlock: ${spacingVerticalSNudge};
-    --tabPaddingInline: ${spacingHorizontalSNudge};
     font-size: ${fontSizeBase300};
     line-height: ${lineHeightBase300};
   }
 
   :host([size='large']) ::slotted([slot='tab']) {
-    --tabPaddingBlock: ${spacingVerticalL};
-    --tabPaddingInline: ${spacingHorizontalMNudge};
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
@@ -131,34 +141,6 @@ export const styles = css`
     inset-inline: var(--tabIndicatorInsetInline);
   }
 
-  :host ::slotted([slot='tab']) {
-    --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
-  }
-
-  :host([size='small']) ::slotted([slot='tab']) {
-    --tabIndicatorInsetInline: ${spacingHorizontalSNudge};
-  }
-
-  :host([size='large']) ::slotted([slot='tab']) {
-    --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
-  }
-
-  :host([orientation='vertical']) ::slotted([slot='tab']) {
-    padding-block: var(--tabPaddingBlock);
-  }
-
-  :host([orientation='vertical']) ::slotted([slot='tab']) {
-    --tabPaddingBlock: ${spacingVerticalS};
-  }
-
-  :host([orientation='vertical'][size='small']) ::slotted([slot='tab']) {
-    --tabPaddingBlock: ${spacingVerticalXXS};
-  }
-
-  :host([orientation='vertical'][size='large']) ::slotted([slot='tab']) {
-    --tabPaddingBlock: ${spacingVerticalS};
-  }
-
   :host([orientation='vertical']) ::slotted([slot='tab'])::after,
   :host([orientation='vertical']) ::slotted([slot='tab'])::before,
   :host([orientation='vertical']) ::slotted([slot='tab']:hover)::after {
@@ -166,18 +148,6 @@ export const styles = css`
     inset-block: var(--tabIndicatorInsetBlock);
   }
 
-  :host([orientation='vertical']) {
-    --tabIndicatorInsetBlock: ${spacingVerticalS};
-  }
-
-  :host([orientation='vertical'][size='small']) {
-    --tabIndicatorInsetBlock: ${spacingVerticalSNudge};
-  }
-
-  :host([orientation='vertical'][size='large']) {
-    --tabIndicatorInsetBlock: ${spacingVerticalMNudge};
-  }
-
   /* disabled styles */
   :host([disabled]) {
     cursor: not-allowed;
@@ -213,4 +183,54 @@ export const styles = css`
     fill: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground1};
   }
+
+  /*
+   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
+   * https://bugs.webkit.org/show_bug.cgi?id=298646
+   * Also remove the same trick from tab.styles.ts.
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * using CSS Anchor Positioning here because it crashes.
+   */
+  @supports (anchor-name: --a) and (text-size-adjust: auto) {
+    ::slotted([slot='tab'][aria-selected='true']) {
+      anchor-name: --tab;
+    }
+
+    :host::after {
+      background-color: ${colorCompoundBrandStroke};
+      content: '';
+      inline-size: 100%;
+      inset: auto auto anchor(end) anchor(center);
+      position: absolute;
+      position-anchor: --tab;
+      transform: translateX(-50%);
+      transition-property: inset-inline, width;
+      transition-duration: ${durationSlow};
+      transition-timing-function: ${curveDecelerateMax};
+      z-index: 3;
+
+      /* These styles should be in sync with tab.styles.ts’s :host::after */
+      border-radius: ${borderRadiusCircular};
+      width: calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);
+      height: ${strokeWidthThicker};
+    }
+
+    :host([orientation='vertical'])::after {
+      inset: anchor(center) anchor(end) auto 0;
+      transform: translateY(-50%);
+      transition-property: inset-block, height;
+
+      /* These styles should be in sync with #vertical-tab-highlight above */
+      width: ${strokeWidthThicker};
+      height: calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2);
+    }
+
+    :host(:dir(rtl)[orientation='vertical'])::after {
+      inset: anchor(center) anchor(start) auto 0;
+    }
+
+    :host([disabled])::after {
+      background-color: ${colorNeutralForegroundDisabled};
+    }
+  }
 `;
diff --git a/packages/web-components/src/tablist/tablist.template.ts b/packages/web-components/src/tablist/tablist.template.ts
index f1e74717e7a19..5a784b15e4471 100644
--- a/packages/web-components/src/tablist/tablist.template.ts
+++ b/packages/web-components/src/tablist/tablist.template.ts
@@ -5,7 +5,11 @@ import type { Tablist } from './tablist.js';
  * @public
  */
 export const template = html<Tablist>`
-  <template role="tablist">
+  <template
+    role="tablist"
+    focusgroup="tablist inline block"
+    @focusin="${(x, c) => x.handleFocusIn(c.event as FocusEvent)}"
+  >
     <slot name="tab" ${slotted('slottedTabs')}></slot>
   </template>
 `;
diff --git a/packages/web-components/src/tablist/tablist.ts b/packages/web-components/src/tablist/tablist.ts
index f6b25d0c2fa3a..e8bedfad79afa 100644
--- a/packages/web-components/src/tablist/tablist.ts
+++ b/packages/web-components/src/tablist/tablist.ts
@@ -1,39 +1,18 @@
 import { attr } from '@microsoft/fast-element';
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
 import type { Tab } from '../tab/tab.js';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseTablist } from './tablist.base.js';
-import { TablistAppearance, TablistOrientation, TablistSize } from './tablist.options.js';
-
-type TabData = Omit<DOMRect, 'top' | 'bottom' | 'left' | 'right' | 'toJSON'>;
+import { TablistAppearance, type TablistSize } from './tablist.options.js';
 
 /**
- * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * A Tablist component.
  *
  * @tag fluent-tablist
  *
  * @public
  */
 export class Tablist extends BaseTablist {
-  /**
-   * activeTabData
-   * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-   */
-  private activeTabData: TabData = { x: 0, y: 0, height: 0, width: 0 };
-  /**
-   * previousActiveTabData
-   * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-   */
-  private previousActiveTabData: TabData = { x: 0, y: 0, height: 0, width: 0 };
-  /**
-   * activeTabOffset
-   * Used to position the active indicator for animations of the active indicator on active tab changes.
-   */
-  private activeTabOffset = 0;
-  /**
-   * activeTabScale
-   * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-   */
-  private activeTabScale = 1;
-
   /**
    * appearance
    * There are two modes of appearance: transparent and subtle.
@@ -49,127 +28,33 @@ export class Tablist extends BaseTablist {
   @attr
   public size?: TablistSize;
 
-  /**
-   * calculateAnimationProperties
-   *
-   * Recalculates the active tab offset and scale.
-   * These values will be applied to css variables that control the tab active indicator position animations
-   */
-  private calculateAnimationProperties(tab: Tab) {
-    this.activeTabOffset = this.getTabPosition(tab);
-    this.activeTabScale = this.getTabScale(tab);
-  }
+  private fg?: FocusGroup;
 
-  /**
-   * getSelectedTabPosition - gets the x or y coordinates of the tab
-   */
-  private getTabPosition(tab: Tab): number {
-    if (this.orientation === TablistOrientation.horizontal) {
-      return this.previousActiveTabData.x - (tab.getBoundingClientRect().x - this.getBoundingClientRect().x);
-    } else return this.previousActiveTabData.y - (tab.getBoundingClientRect().y - this.getBoundingClientRect().y);
-  }
+  private fgItems?: ArrayItemCollection<Tab>;
 
-  /**
-   * getSelectedTabScale - gets the scale of the tab
-   */
-  private getTabScale(tab: Tab): number {
-    if (this.orientation === TablistOrientation.horizontal) {
-      return this.previousActiveTabData.width / tab.getBoundingClientRect().width;
-    } else return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
   }
 
-  /**
-   * Calculates and applies updated values to CSS variables.
-   *
-   * @param tab - the tab element to apply the updated values to
-   * @internal
-   */
-  private applyUpdatedCSSValues(tab: Tab) {
-    this.calculateAnimationProperties(tab);
-    this.setAnimationVars();
-  }
-
-  /**
-   * Runs through all the operations required for setting the tab active indicator to its starting location, ending
-   * location, and applying the animated css class to the tab.
-   *
-   * @param tab - the tab element to apply the updated values to
-   * @internal
-   */
-  private animationLoop(tab: Tab) {
-    // remove the animated class so nothing animates yet
-    tab.setAttribute('data-animate', 'false');
-    // animation start - this applyUpdatedCSSValues sets the active indicator to the location of the previously selected tab
-    this.applyUpdatedCSSValues(tab);
-    // changing the previously active tab allows the applyUpdatedCSSValues method to calculate the correct end to the animation.
-    this.previousActiveTabData = this.activeTabData;
-    // calculate and apply updated css values for animation.
-    this.applyUpdatedCSSValues(tab);
-    // add the css class and active indicator will animate from the previous tab location to its tab location
-    tab.setAttribute('data-animate', 'true');
-  }
-
-  /**
-   * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-   * tab indicator.
-   *
-   * @internal
-   */
-  private setTabData(): void {
-    if (this.tabs && this.tabs.length > 0) {
-      const tabs = this.tabs as Tab[];
-      const activeTab = this.activetab || tabs[0];
-      const activeRect = activeTab?.getBoundingClientRect();
-      const parentRect = this.getBoundingClientRect();
-
-      this.activeTabData = {
-        x: activeRect.x - parentRect.x,
-        y: activeRect.y - parentRect.y,
-        height: activeRect.height,
-        width: activeRect.width,
-      } as TabData;
-
-      if (
-        this.previousActiveTabData?.x !== this.activeTabData?.x &&
-        this.previousActiveTabData?.y !== this.activeTabData?.y
-      ) {
-        this.previousActiveTabData = this.activeTabData;
-      }
-    }
-  }
-
-  /**
-   * Sets the css variables for the active tab indicator.
-   * @internal
-   */
-  private setAnimationVars() {
-    this.style.setProperty('--tabIndicatorOffset', `${this.activeTabOffset}px`);
-    this.style.setProperty('--tabIndicatorScale', `${this.activeTabScale}`);
-  }
-
-  /**
-   * Initiates the active tab indicator animation loop when activeid changes.
-   * @param oldValue - the previous tabId
-   * @param newValue - the new tabId
-   */
-  public activeidChanged(oldValue: string, newValue: string) {
-    super.activeidChanged(oldValue, newValue);
-    this.setTabData();
-
-    if (this.activetab) {
-      this.animationLoop(this.activetab as Tab);
-    }
-  }
-
-  /**
-   * Initiates the active tab indicator animation loop when tabs change.
-   */
-  public tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void {
+  override tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void {
     super.tabsChanged(prev, next);
-    this.setTabData();
 
-    if (this.activetab) {
-      this.animationLoop(this.activetab as Tab);
+    this.fgItems ??= new ArrayItemCollection<Tab>(
+      () => this.tabs?.filter(t => (t.getAttribute('aria-selected') === 'true' || !t.disabled) && !t.hidden) ?? [],
+      () => this.activetab ?? null,
+    );
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: 'tablist',
+          axis: undefined,
+          memory: false,
+          wrap: true,
+        },
+      });
+    } else {
+      this.fg.update();
     }
   }
 }
diff --git a/packages/web-components/src/tree-item/tree-item.base.ts b/packages/web-components/src/tree-item/tree-item.base.ts
index 75cfbeb3113c3..3137b81a88504 100644
--- a/packages/web-components/src/tree-item/tree-item.base.ts
+++ b/packages/web-components/src/tree-item/tree-item.base.ts
@@ -1,4 +1,4 @@
-import { attr, css, ElementStyles, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, css, type ElementStyles, FASTElement, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
 import { isTreeItem } from './tree-item.options.js';
 
@@ -55,6 +55,23 @@ export class BaseTreeItem extends FASTElement {
     toggleState(this.elementInternals, 'expanded', next);
     if (this.childTreeItems && this.childTreeItems.length > 0) {
       this.elementInternals.ariaExpanded = next ? 'true' : 'false';
+      // Update focusgroup attributes after subtree show/hide rendering is done.
+      requestAnimationFrame(() => {
+        const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, node =>
+          isTreeItem(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
+        );
+        while (walker.nextNode()) {
+          const item = walker.currentNode as BaseTreeItem;
+          if (next) {
+            item.removeAttribute('focusgroup');
+          } else {
+            if (item.selected) {
+              item.selected = false;
+            }
+            item.setAttribute('focusgroup', 'none');
+          }
+        }
+      });
     }
   }
 
@@ -75,7 +92,6 @@ export class BaseTreeItem extends FASTElement {
    * @internal
    */
   protected selectedChanged(prev: boolean, next: boolean): void {
-    this.updateTabindexBySelected();
     this.$emit('change');
     toggleState(this.elementInternals, 'selected', next);
     this.elementInternals.ariaSelected = next ? 'true' : 'false';
@@ -130,14 +146,6 @@ export class BaseTreeItem extends FASTElement {
     this.updateChildTreeItems();
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    Updates.enqueue(() => {
-      this.updateTabindexBySelected();
-    });
-  }
-
   /**
    * Updates the childrens indent
    *
@@ -178,15 +186,26 @@ export class BaseTreeItem extends FASTElement {
   }
 
   /**
-   * Whether the tree is nested
+   * Whether the tree item is nested
    * @internal
    */
   get isNestedItem() {
     return isTreeItem(this.parentElement);
   }
 
-  protected updateTabindexBySelected() {
-    this.tabIndex = this.selected ? 0 : -1;
+  /**
+   * Whether the tree item is nested in a collapsed tree item.
+   * @internal
+   */
+  get isHidden(): boolean {
+    let parent = this.parentElement;
+    while (isTreeItem(parent)) {
+      if (!parent.expanded) {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
   }
 
   /** @internal */
diff --git a/packages/web-components/src/tree-item/tree-item.template.ts b/packages/web-components/src/tree-item/tree-item.template.ts
index 6c911e5325dca..de07b139fcd29 100644
--- a/packages/web-components/src/tree-item/tree-item.template.ts
+++ b/packages/web-components/src/tree-item/tree-item.template.ts
@@ -10,7 +10,7 @@ const chevronIcon = html`
 `;
 
 export const template = html<TreeItem>`
-  <template slot="${x => (x.isNestedItem ? 'item' : void 0)}">
+  <template slot="${x => (x.isNestedItem ? 'item' : void 0)}" tabindex="0" ?focusgroupstart="${x => x.selected}">
     <div class="positioning-region" part="positioning-region">
       <div class="content" part="content">
         <span class="chevron" part="chevron" aria-hidden="true">
diff --git a/packages/web-components/src/tree/tree.base.ts b/packages/web-components/src/tree/tree.base.ts
index 2b04c0f9e3840..5ae9a950f0b65 100644
--- a/packages/web-components/src/tree/tree.base.ts
+++ b/packages/web-components/src/tree/tree.base.ts
@@ -1,15 +1,5 @@
 import { FASTElement, observable } from '@microsoft/fast-element';
-import {
-  isHTMLElement,
-  keyArrowDown,
-  keyArrowLeft,
-  keyArrowRight,
-  keyArrowUp,
-  keyEnd,
-  keyEnter,
-  keyHome,
-  keySpace,
-} from '@microsoft/fast-web-utilities';
+import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import type { BaseTreeItem } from '../tree-item/tree-item.base.js';
 import { isTreeItem } from '../tree-item/tree-item.options.js';
 
@@ -21,13 +11,6 @@ export class BaseTree extends FASTElement {
   @observable
   public currentSelected: HTMLElement | null = null;
 
-  /**
-   * The tree item that is designated to be in the tab queue.
-   *
-   * @internal
-   */
-  private currentFocused: HTMLElement | null = null;
-
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -54,12 +37,6 @@ export class BaseTree extends FASTElement {
     this.elementInternals.role = 'tree';
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
-  }
-
   /** @internal */
   @observable
   childTreeItems!: BaseTreeItem[];
@@ -77,11 +54,6 @@ export class BaseTree extends FASTElement {
     // defaults to first one found
     const selectedItem = this.querySelector<HTMLElement>(`[selected]`);
     this.currentSelected = selectedItem;
-
-    // invalidate the current focused item if it is no longer valid
-    if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-      this.currentFocused = this.getValidFocusableItem();
-    }
   }
 
   /**
@@ -99,21 +71,7 @@ export class BaseTree extends FASTElement {
       return true;
     }
 
-    const elements = this.getVisibleNodes();
-
     switch (e.key) {
-      case keyHome: {
-        if (elements.length) {
-          elements[0].focus();
-        }
-        return;
-      }
-      case keyEnd: {
-        if (elements.length) {
-          elements[elements.length - 1].focus();
-        }
-        return;
-      }
       case keyArrowLeft: {
         if (item?.childTreeItems?.length && item.expanded) {
           item.expanded = false;
@@ -126,20 +84,10 @@ export class BaseTree extends FASTElement {
         if (item?.childTreeItems?.length) {
           if (!item.expanded) {
             item.expanded = true;
-          } else {
-            this.focusNextNode(1, item);
           }
         }
         return;
       }
-      case keyArrowDown: {
-        this.focusNextNode(1, item);
-        return;
-      }
-      case keyArrowUp: {
-        this.focusNextNode(-1, item);
-        return;
-      }
       case keyEnter: {
         // In single-select trees where selection does not follow focus (see note below),
         // the default action is typically to select the focused node.
@@ -156,44 +104,6 @@ export class BaseTree extends FASTElement {
     return true;
   }
 
-  /**
-   * Handle focus events
-   *
-   * @internal
-   */
-  public focusHandler(e: FocusEvent): void {
-    if (this.childTreeItems.length < 1) {
-      // no child items, nothing to do
-      return;
-    }
-
-    if (e.target === this) {
-      this.currentFocused = this.getValidFocusableItem();
-      if (this.currentFocused && this.currentFocused.tabIndex < 0) {
-        this.currentFocused.tabIndex = 0;
-      }
-      this.currentFocused?.focus();
-
-      return;
-    }
-
-    if (this.contains(e.target as Node)) {
-      this.setAttribute('tabindex', '-1');
-      this.currentFocused = e.target as HTMLElement;
-    }
-  }
-
-  /**
-   * Handle blur events
-   *
-   * @internal
-   */
-  public blurHandler(e: FocusEvent): void {
-    if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget as Node))) {
-      this.setAttribute('tabindex', '0');
-    }
-  }
-
   /**
    * Handles click events bubbling up
    *
@@ -235,7 +145,7 @@ export class BaseTree extends FASTElement {
     const item = e.target as BaseTreeItem;
 
     if (item.selected) {
-      // Deselect the prevously selected item
+      // Deselect the previously selected item
       if (this.currentSelected && this.currentSelected !== item && isTreeItem(this.currentSelected)) {
         this.currentSelected.selected = false;
       }
@@ -247,46 +157,27 @@ export class BaseTree extends FASTElement {
     }
   }
 
-  /**
-   * checks if there are any nested tree items
-   */
-  private getValidFocusableItem() {
-    const elements: HTMLElement[] | void = this.getVisibleNodes();
-    // default to selected element if there is one
-    let focusIndex = elements.findIndex(el => (el as any).selected);
-    if (focusIndex === -1) {
-      // otherwise first focusable tree item
-      focusIndex = elements.findIndex(el => isTreeItem(el));
-    }
-    if (focusIndex !== -1) {
-      return elements[focusIndex];
-    }
-    return null;
-  }
-
-  private getVisibleNodes(): HTMLElement[] {
-    return Array.from(this.querySelectorAll('*')).filter(
-      node => isTreeItem(node) && node.offsetParent !== null,
-    ) as HTMLElement[];
+  /** @internal */
+  public handleDefaultSlotChange() {
+    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
   }
 
   /**
-   * Move focus to a tree item based on its offset from the provided item
+   * All descendant tree items in DOM order, recursively flattened from
+   * `childTreeItems`.
    */
-  private focusNextNode(delta: number, item: BaseTreeItem): void {
-    const visibleNodes = this.getVisibleNodes();
-    if (!visibleNodes.length) {
-      return;
-    }
-
-    const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-    if (isHTMLElement(focusItem)) {
-      focusItem.focus();
-    }
-  }
-
-  /** @internal */
-  public handleDefaultSlotChange() {
-    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+  protected get descendantTreeItems(): BaseTreeItem[] {
+    const result: BaseTreeItem[] = [];
+    const visit = (items: BaseTreeItem[] | undefined) => {
+      if (!items) {
+        return;
+      }
+      for (const item of items) {
+        result.push(item);
+        visit(item.childTreeItems);
+      }
+    };
+    visit(this.childTreeItems);
+    return result;
   }
 }
diff --git a/packages/web-components/src/tree/tree.spec.ts b/packages/web-components/src/tree/tree.spec.ts
index acffbeea8ed07..a7e3da14a1fca 100644
--- a/packages/web-components/src/tree/tree.spec.ts
+++ b/packages/web-components/src/tree/tree.spec.ts
@@ -212,7 +212,7 @@ test.describe('Tree', () => {
     const treeItem1 = element.locator('fluent-tree-item').nth(0);
     expect(await treeItem1.getAttribute('selected')).toBeNull();
 
-    await element.focus();
+    await treeItem1.focus();
     expect(await elementHandle).toBe(false);
     await page.keyboard.press('Space');
 
@@ -231,14 +231,14 @@ test.describe('Tree', () => {
       innerHTML: /* html */ `
           <fluent-tree-item>
             Item1
-            <a href='edge://settings'>Link1</a>
+            <a href='edge://settings' focusgroup='none'>Link1</a>
           </fluent-tree-item>
           <fluent-tree-item>Item 2</fluent-tree-item>
       `,
     });
 
     const treeItems = page.locator('fluent-tree-item');
-    await element.focus();
+    await treeItems.nth(0).focus();
     await expect(treeItems.nth(0)).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(treeItems.nth(0)).toHaveAttribute('selected');
diff --git a/packages/web-components/src/tree/tree.template.ts b/packages/web-components/src/tree/tree.template.ts
index 943ff43028ba5..04f6392feefa4 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 nowrap nomemory"
     @click="${(x, c) => x.clickHandler(c.event)}"
-    @focusin="${(x, c) => x.focusHandler(c.event as FocusEvent)}"
-    @focusout="${(x, c) => x.blurHandler(c.event as FocusEvent)}"
     @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
+    @toggle="${(x, c) => x.itemToggleHandler()}"
   >
     <slot ${ref('defaultSlot')} @slotchange="${x => x.handleDefaultSlotChange()}"></slot>
   </template>
diff --git a/packages/web-components/src/tree/tree.ts b/packages/web-components/src/tree/tree.ts
index cada4caac65e7..576d3f224921e 100644
--- a/packages/web-components/src/tree/tree.ts
+++ b/packages/web-components/src/tree/tree.ts
@@ -1,6 +1,8 @@
 import { attr } from '@microsoft/fast-element';
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
 import type { TreeItem } from '../tree-item/tree-item.js';
 import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options.js';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseTree } from './tree.base.js';
 
 /**
@@ -38,13 +40,39 @@ export class Tree extends BaseTree {
     this.updateSizeAndAppearance();
   }
 
+  private fg?: FocusGroup;
+
+  private fgItems?: ArrayItemCollection<TreeItem>;
+
   /**
    * child tree items supered change event
    * @internal
    */
   public childTreeItemsChanged() {
     super.childTreeItemsChanged();
+
     this.updateSizeAndAppearance();
+
+    this.fgItems ??= new ArrayItemCollection<TreeItem>(
+      () => this.descendantTreeItems.filter(i => !i.isHidden) as TreeItem[],
+      () => (this.currentSelected as TreeItem | null) ?? null,
+    );
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: 'menu',
+          axis: 'block',
+          memory: false,
+        },
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
   }
 
   /**
@@ -61,4 +89,9 @@ export class Tree extends BaseTree {
       (item as TreeItem).appearance = this.appearance;
     });
   }
+
+  /** @internal */
+  public itemToggleHandler() {
+    this.fg?.update();
+  }
 }
diff --git a/packages/web-components/src/utils/focusgroup.ts b/packages/web-components/src/utils/focusgroup.ts
new file mode 100644
index 0000000000000..dfa3791f85f04
--- /dev/null
+++ b/packages/web-components/src/utils/focusgroup.ts
@@ -0,0 +1,47 @@
+import type { FocusGroupItemCollection } from '@microsoft/focusgroup-polyfill/shadowless';
+
+/**
+ * A {@link FocusGroupItemCollection} backed by a host-supplied array of items in DOM order.
+ *
+ * Stateless: every call reads from `getItems()` so the host is the single source of truth.
+ * Suitable for components whose items are flat slotted children (tablist, radio-group, menu-list)
+ * or any component that maintains its own ordered list of focusable descendants.
+ */
+export class ArrayItemCollection<T extends HTMLElement> implements FocusGroupItemCollection {
+  constructor(private getItems: () => readonly T[], private getStart?: () => T | null) {}
+
+  get start(): HTMLElement | null {
+    return this.getStart?.() ?? null;
+  }
+
+  first(): HTMLElement | null {
+    return this.getItems()[0] ?? null;
+  }
+
+  last(): HTMLElement | null {
+    const items = this.getItems();
+    return items[items.length - 1] ?? null;
+  }
+
+  next(current: HTMLElement): HTMLElement | null {
+    const items = this.getItems();
+    const i = items.indexOf(current as T);
+    return i === -1 ? null : items[i + 1] ?? null;
+  }
+
+  previous(current: HTMLElement): HTMLElement | null {
+    const items = this.getItems();
+    const i = items.indexOf(current as T);
+    return i <= 0 ? null : items[i - 1] ?? null;
+  }
+
+  *items(): Iterable<{ element: HTMLElement }> {
+    for (const element of this.getItems()) {
+      yield { element };
+    }
+  }
+
+  contains(element: Element): boolean {
+    return (this.getItems() as readonly Element[]).includes(element);
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 8ee9c3bdaa766..c268a50e5ecbb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2699,10 +2699,10 @@
   dependencies:
     exenv-es6 "^1.1.1"
 
-"@microsoft/focusgroup-polyfill@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/focusgroup-polyfill/-/focusgroup-polyfill-1.2.1.tgz#a46f4fb52d3d510816816bb9455c5d68db9eff5e"
-  integrity sha512-A0l7SeXgulSfGcjrouxwmC2CPUberpxduyD6nwjKBEEf+Bu+JeGgsGsGkRp2IKniyZQthFAC5gYCnbg/guiidg==
+"@microsoft/focusgroup-polyfill@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/focusgroup-polyfill/-/focusgroup-polyfill-1.3.0.tgz#12a4e9abac1b7736ca7c4f59c923a45713a8c274"
+  integrity sha512-rlhfgqEsC6jR36/LSrl4dd0xQha05gGv5q7cfz+dnGKGVcsCo6CI6C0GYiq+jSja+VzVY97fRQnMiBJR1EgOeg==
 
 "@microsoft/load-themed-styles@1.10.26", "@microsoft/load-themed-styles@^1.10.26":
   version "1.10.26"