From e5b0e2412175216210360fee356a404af60f38d5 Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 12 May 2026 10:11:44 -0700
Subject: [PATCH 1/4] fix: clean up fast-element dependency hierarchy and
 update to 2.10.4 (#36184)

## Previous Behavior

The `@microsoft/fast-element` dependency was pinned to version `2.0.0` across multiple packages, and the dependency hierarchy had several issues:

- `packages/web-components/package.json` listed `@microsoft/fast-element` and `@microsoft/focusgroup-polyfill` as `devDependencies` despite already declaring them as `peerDependencies`, duplicating the hoisted entries unnecessarily.
- `packages/charts/chart-web-components/package.json` had a redundant `devDependencies` entry for `@microsoft/fast-element` pinned to `2.0.0`, and its `peerDependencies` range included the pre-release syntax `^2.0.0-beta.26 || ^2.0.0`.
- `apps/vr-tests-web-components/package.json` pinned `@microsoft/fast-element` to exactly `2.0.0`.
- The root `package.json` did not hoist `@microsoft/fast-element`, so the resolved version in `yarn.lock` was stuck at `2.0.0`.

## New Behavior

- Removed the redundant `devDependencies` entries for `@microsoft/fast-element` and `@microsoft/focusgroup-polyfill` from `packages/web-components/package.json` since they are already declared as `peerDependencies` and satisfied by the root.
- Removed the redundant `devDependencies` entry for `@microsoft/fast-element` from `packages/charts/chart-web-components/package.json`.
- Simplified the `peerDependencies` range in `chart-web-components` to `^2.0.0` (dropping the unnecessary beta range).
- Changed `apps/vr-tests-web-components` to use `^2.0.0` instead of the exact pin.
- Added `@microsoft/fast-element` at version `2.10.4` to the root `devDependencies` so it is hoisted and all workspace packages resolve to the same up-to-date version.
- `yarn.lock` now resolves `@microsoft/fast-element` to `2.10.4`.
---
 apps/vr-tests-web-components/package.json                 | 2 +-
 ...b-components-efc149c5-3d43-4300-a413-b3d9048e2248.json | 7 +++++++
 ...b-components-38caae0f-3c50-46f0-b0c2-bb87de96d641.json | 7 +++++++
 package.json                                              | 1 +
 packages/charts/chart-web-components/package.json         | 3 +--
 packages/web-components/package.json                      | 2 --
 yarn.lock                                                 | 8 ++++----
 7 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 change/@fluentui-chart-web-components-efc149c5-3d43-4300-a413-b3d9048e2248.json
 create mode 100644 change/@fluentui-web-components-38caae0f-3c50-46f0-b0c2-bb87de96d641.json

diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json
index 99a3830b50f54f..026b60422ff0b8 100644
--- a/apps/vr-tests-web-components/package.json
+++ b/apps/vr-tests-web-components/package.json
@@ -18,7 +18,7 @@
     "html-react-parser": "4.0.0",
     "@fluentui/tokens": ">=1.0.0-alpha",
     "@fluentui/web-components": ">=3.0.0-alpha",
-    "@microsoft/fast-element": "2.0.0",
+    "@microsoft/fast-element": "^2.0.0",
     "tslib": "^2.1.0"
   }
 }
diff --git a/change/@fluentui-chart-web-components-efc149c5-3d43-4300-a413-b3d9048e2248.json b/change/@fluentui-chart-web-components-efc149c5-3d43-4300-a413-b3d9048e2248.json
new file mode 100644
index 00000000000000..e7def50970997e
--- /dev/null
+++ b/change/@fluentui-chart-web-components-efc149c5-3d43-4300-a413-b3d9048e2248.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update fast-element dependency version",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-38caae0f-3c50-46f0-b0c2-bb87de96d641.json b/change/@fluentui-web-components-38caae0f-3c50-46f0-b0c2-bb87de96d641.json
new file mode 100644
index 00000000000000..9e94b949c3f1ed
--- /dev/null
+++ b/change/@fluentui-web-components-38caae0f-3c50-46f0-b0c2-bb87de96d641.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: remove hoisted peer dependency entries",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index 756753194acc26..2096a7d2c09783 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
+    "@microsoft/fast-element": "2.10.4",
     "@microsoft/focusgroup-polyfill": "^1.4.1",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json
index ffaac36ba9d6dc..b190c9a5f06147 100644
--- a/packages/charts/chart-web-components/package.json
+++ b/packages/charts/chart-web-components/package.json
@@ -61,7 +61,6 @@
     "test:dev": "node ./scripts/e2e.js"
   },
   "devDependencies": {
-    "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",
     "@storybook/html-vite": "9.1.17",
@@ -79,7 +78,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0-beta.26 || ^2.0.0"
+    "@microsoft/fast-element": "^2.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 0f4cd54a7c993c..3064cc7dc3eaf4 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -90,8 +90,6 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.10.10",
-    "@microsoft/fast-element": "2.0.0",
-    "@microsoft/focusgroup-polyfill": "^1.4.1",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",
     "@storybook/html-vite": "9.1.17",
diff --git a/yarn.lock b/yarn.lock
index 629621be4153c6..747a1e412521fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2687,10 +2687,10 @@
     eslint-plugin-react "7.35.2"
     eslint-plugin-security "1.4.0"
 
-"@microsoft/fast-element@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-2.0.0.tgz#4b3551159290f14ec59f9b48c6c4c26b4e086a0f"
-  integrity sha512-Tzv4dCGTg10NNyqWWGRy3bYG4vacQUapjy5gpdpmFbSgvNF8aOzJJMkG5CfVUDoC9gWxY1ZyGgjXX0p86ZXX5w==
+"@microsoft/fast-element@2.10.4", "@microsoft/fast-element@^2.0.0":
+  version "2.10.4"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-2.10.4.tgz#12b8c6c90902f2a54d5b27f618d7d095e133546d"
+  integrity sha512-OkHIlMztq7+PgkRF1LscgBd/MVzMhGrWPkJRDvOEqdqEdZOKocKvaKcUKZubIBz4RpLIrhLD3lOJzCsspk6jXg==
 
 "@microsoft/fast-web-utilities@^6.0.0":
   version "6.0.0"

From 52fd89c25172001d37bc9e36a7b2f2587272edbe Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Tue, 12 May 2026 10:19:56 -0700
Subject: [PATCH 2/4] fix(web-components): fix keyboard navigation regressions
 for tree and menu-list (#36118)

---
 ...-80c47489-fa3b-4929-8f16-f8ff8d79b89f.json |   7 +
 .../src/menu-list/menu-list.base.ts           |   8 +-
 .../src/menu-list/menu-list.spec.ts           |  38 ++++
 packages/web-components/src/tree/tree.base.ts |   2 +
 packages/web-components/src/tree/tree.spec.ts | 182 ++++++++++++++++++
 .../web-components/src/tree/tree.template.ts  |   2 +-
 packages/web-components/src/tree/tree.ts      |   2 +-
 7 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-web-components-80c47489-fa3b-4929-8f16-f8ff8d79b89f.json

diff --git a/change/@fluentui-web-components-80c47489-fa3b-4929-8f16-f8ff8d79b89f.json b/change/@fluentui-web-components-80c47489-fa3b-4929-8f16-f8ff8d79b89f.json
new file mode 100644
index 00000000000000..b6ae232147899a
--- /dev/null
+++ b/change/@fluentui-web-components-80c47489-fa3b-4929-8f16-f8ff8d79b89f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix keyboard navigation regressions for tree and menu-list",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
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 d08aaa46d3b2ae..6ebcd314be5c0d 100644
--- a/packages/web-components/src/menu-list/menu-list.base.ts
+++ b/packages/web-components/src/menu-list/menu-list.base.ts
@@ -1,4 +1,4 @@
-import { FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
 import { isHTMLElement } from '../utils/typings.js';
 import type { MenuItemColumnCount } from '../menu-item/menu-item.js';
 import type { MenuItem } from '../menu-item/menu-item.js';
@@ -63,6 +63,9 @@ export class BaseMenuList extends FASTElement {
    */
   public disconnectedCallback(): void {
     super.disconnectedCallback();
+    Array.from(this.children).forEach(child => {
+      Observable.getNotifier(child).unsubscribe(this, 'hidden');
+    });
     this.menuChildren = undefined;
     this.removeEventListener('change', this.changedMenuItemHandler);
   }
@@ -100,6 +103,9 @@ export class BaseMenuList extends FASTElement {
 
   protected setItems(): void {
     const children: HTMLElement[] = Array.from(this.children) as HTMLElement[];
+    children.forEach((child: Element) => {
+      Observable.getNotifier(child).subscribe(this, 'hidden');
+    });
 
     this.menuChildren = children.filter(child => !child.hasAttribute('hidden'));
 
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 25372a141be4b9..68511a4c83f8a7 100644
--- a/packages/web-components/src/menu-list/menu-list.spec.ts
+++ b/packages/web-components/src/menu-list/menu-list.spec.ts
@@ -400,6 +400,44 @@ test.describe('MenuList', () => {
     await expect(menuItems.nth(0)).toBeFocused();
   });
 
+  test('should navigate to previously hidden items when visibility restored', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const menuItems = element.locator('fluent-menu-item');
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+        <fluent-menu-item>Menu item 1</fluent-menu-item>
+        <fluent-menu-item hidden="hidden">Menu item 2</fluent-menu-item>
+        <fluent-menu-item>Menu item 3</fluent-menu-item>
+        <fluent-menu-item>Menu item 4</fluent-menu-item>
+      `,
+    });
+
+    await element.evaluate(node => {
+      node.focus();
+    });
+
+    await expect(menuItems.nth(0)).toBeFocused();
+
+    await element.press('ArrowDown');
+
+    await expect(menuItems.nth(2)).toBeFocused();
+
+    await menuItems.nth(1).evaluate(node => {
+      node.removeAttribute('hidden');
+    });
+
+    await element.evaluate(node => {
+      node.focus();
+    });
+
+    await expect(menuItems.nth(0)).toBeFocused();
+
+    await element.press('ArrowDown');
+
+    await expect(menuItems.nth(1)).toBeFocused();
+  });
+
   test('should set the data-indent attribute to 0 correctly on all MenuItem elements when role of menuitem and not content in start slot', async ({
     fastPage,
   }) => {
diff --git a/packages/web-components/src/tree/tree.base.ts b/packages/web-components/src/tree/tree.base.ts
index aa8114ce468e98..b836dc312a3a8a 100644
--- a/packages/web-components/src/tree/tree.base.ts
+++ b/packages/web-components/src/tree/tree.base.ts
@@ -83,6 +83,8 @@ export class BaseTree extends FASTElement {
         if (item?.childTreeItems?.length) {
           if (!item.expanded) {
             item.expanded = true;
+          } else {
+            return true;
           }
         }
         return;
diff --git a/packages/web-components/src/tree/tree.spec.ts b/packages/web-components/src/tree/tree.spec.ts
index 72df168c459ea8..03b2c13c6b70c4 100644
--- a/packages/web-components/src/tree/tree.spec.ts
+++ b/packages/web-components/src/tree/tree.spec.ts
@@ -216,6 +216,7 @@ test.describe('Tree', () => {
     await expect(treeItem1).toHaveAttribute('selected');
     expect(await elementHandle).toBe(false);
   });
+
   test('keyboard navigation should work when the tree-item contains focusable elements', async ({
     fastPage,
     page,
@@ -241,4 +242,185 @@ test.describe('Tree', () => {
     await page.keyboard.press(browserName === 'webkit' ? 'Alt+Tab' : 'Tab');
     await expect(anchor).toBeFocused();
   });
+  test('should move focus down with ArrowDown', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const treeItems = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>Item 1</fluent-tree-item>
+                <fluent-tree-item>Item 2</fluent-tree-item>
+                <fluent-tree-item>Item 3</fluent-tree-item>
+            `,
+    });
+
+    await treeItems.nth(0).focus();
+    await expect(treeItems.nth(0)).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(treeItems.nth(1)).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(treeItems.nth(2)).toBeFocused();
+  });
+
+  test('should move focus up with ArrowUp', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const treeItems = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>Item 1</fluent-tree-item>
+                <fluent-tree-item>Item 2</fluent-tree-item>
+                <fluent-tree-item>Item 3</fluent-tree-item>
+            `,
+    });
+
+    await treeItems.nth(0).focus();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(treeItems.nth(2)).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(treeItems.nth(1)).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(treeItems.nth(0)).toBeFocused();
+  });
+
+  test('should expand a collapsed item with ArrowRight', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const parentItem = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>
+                    Item 1
+                    <fluent-tree-item slot="item">Nested Item A</fluent-tree-item>
+                </fluent-tree-item>
+            `,
+    });
+
+    await parentItem.focus();
+    await expect(parentItem).toBeFocused();
+    await expect(parentItem).not.toHaveAttribute('expanded');
+
+    await page.keyboard.press('ArrowRight');
+    await expect(parentItem).toHaveAttribute('expanded');
+  });
+
+  test('should focus child after ArrowRight on an expanded item', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const parentItem = element.locator(`:scope > fluent-tree-item`);
+    const nestedItem = parentItem.locator('fluent-tree-item');
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>
+                    Item 1
+                    <fluent-tree-item slot="item">Nested Item A</fluent-tree-item>
+                </fluent-tree-item>
+            `,
+    });
+
+    await parentItem.focus();
+    // expand first
+    await page.keyboard.press('ArrowRight');
+    await expect(parentItem).toHaveAttribute('expanded');
+    await expect(nestedItem).toBeVisible();
+
+    // arrow right again should focus the nested item
+    await page.keyboard.press('ArrowRight');
+    await expect(nestedItem).toBeFocused();
+  });
+
+  test('should collapse an expanded item with ArrowLeft', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const parentItem = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>
+                    Item 1
+                    <fluent-tree-item slot="item">Nested Item A</fluent-tree-item>
+                </fluent-tree-item>
+            `,
+    });
+
+    await parentItem.focus();
+    await page.keyboard.press('ArrowRight');
+    await expect(parentItem).toHaveAttribute('expanded');
+
+    await page.keyboard.press('ArrowLeft');
+    await expect(parentItem).not.toHaveAttribute('expanded');
+  });
+
+  test('should focus parent item with ArrowLeft on a nested item', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const parentItem = element.locator(`:scope > fluent-tree-item`);
+    const nestedItem = parentItem.locator('fluent-tree-item');
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>
+                    Item 1
+                    <fluent-tree-item slot="item">Nested Item A</fluent-tree-item>
+                </fluent-tree-item>
+            `,
+    });
+
+    await parentItem.focus();
+    // expand and wait for nested item to be visible
+    await page.keyboard.press('ArrowRight');
+    await expect(parentItem).toHaveAttribute('expanded');
+    await expect(nestedItem).toBeVisible();
+
+    // focus nested item
+    await page.keyboard.press('ArrowRight');
+    await expect(nestedItem).toBeFocused();
+
+    // arrow left on leaf should focus parent
+    await page.keyboard.press('ArrowLeft');
+    await expect(parentItem).toBeFocused();
+  });
+
+  test('should focus first item with Home key', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const treeItems = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>Item 1</fluent-tree-item>
+                <fluent-tree-item>Item 2</fluent-tree-item>
+                <fluent-tree-item>Item 3</fluent-tree-item>
+            `,
+    });
+
+    await treeItems.nth(0).focus();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(treeItems.nth(2)).toBeFocused();
+
+    await page.keyboard.press('Home');
+    await expect(treeItems.nth(0)).toBeFocused();
+  });
+
+  test('should focus last item with End key', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const treeItems = element.locator(`:scope > fluent-tree-item`);
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+                <fluent-tree-item>Item 1</fluent-tree-item>
+                <fluent-tree-item>Item 2</fluent-tree-item>
+                <fluent-tree-item>Item 3</fluent-tree-item>
+            `,
+    });
+
+    await treeItems.nth(0).focus();
+    await expect(treeItems.nth(0)).toBeFocused();
+
+    await page.keyboard.press('End');
+    await expect(treeItems.nth(2)).toBeFocused();
+  });
 });
diff --git a/packages/web-components/src/tree/tree.template.ts b/packages/web-components/src/tree/tree.template.ts
index 04f6392feefa4c..05b8e8073e1473 100644
--- a/packages/web-components/src/tree/tree.template.ts
+++ b/packages/web-components/src/tree/tree.template.ts
@@ -3,7 +3,7 @@ import type { Tree } from './tree.js';
 
 export const template = html<Tree>`
   <template
-    focusgroup="menu nowrap nomemory"
+    focusgroup="menu inline block nowrap nomemory"
     @click="${(x, c) => x.clickHandler(c.event)}"
     @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
diff --git a/packages/web-components/src/tree/tree.ts b/packages/web-components/src/tree/tree.ts
index 576d3f224921e4..1d82acfd6d27c5 100644
--- a/packages/web-components/src/tree/tree.ts
+++ b/packages/web-components/src/tree/tree.ts
@@ -61,7 +61,7 @@ export class Tree extends BaseTree {
       this.fg = new FocusGroup(this, this.fgItems, {
         definition: {
           behavior: 'menu',
-          axis: 'block',
+          axis: undefined,
           memory: false,
         },
       });

From 0403572a88a8fcd6a1dc7244fdfd21efe0787ec7 Mon Sep 17 00:00:00 2001
From: Victor Genaev <vgenaev@gmail.com>
Date: Tue, 12 May 2026 20:43:19 +0200
Subject: [PATCH 3/4] fix(headless): set default strategy to fixed (#36197)

---
 ...s-preview-812588d9-6ce9-49cb-b704-046cb6f998ff.json |  7 +++++++
 .../src/hooks/usePositioning/usePositioning.test.tsx   | 10 +++++-----
 .../library/src/hooks/usePositioning/usePositioning.ts |  3 ++-
 .../Positioning/PositioningMatchTargetSize.stories.tsx |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 change/@fluentui-react-headless-components-preview-812588d9-6ce9-49cb-b704-046cb6f998ff.json

diff --git a/change/@fluentui-react-headless-components-preview-812588d9-6ce9-49cb-b704-046cb6f998ff.json b/change/@fluentui-react-headless-components-preview-812588d9-6ce9-49cb-b704-046cb6f998ff.json
new file mode 100644
index 00000000000000..1c60969d9ee800
--- /dev/null
+++ b/change/@fluentui-react-headless-components-preview-812588d9-6ce9-49cb-b704-046cb6f998ff.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(headless): fix Popover flipping behavior",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.test.tsx b/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.test.tsx
index 7f849b3294e97a..e048c4c6421b0a 100644
--- a/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.test.tsx
@@ -54,18 +54,18 @@ describe('usePositioning', () => {
       result.current.containerRef(node);
     });
 
-    expect(node).toHaveStyle({ position: 'absolute', inset: 'auto', margin: '0px' });
+    expect(node).toHaveStyle({ position: 'fixed', inset: 'auto', margin: '0px' });
   });
 
-  it('containerRef honors strategy: "fixed"', () => {
-    const result = mountHook({ strategy: 'fixed' });
+  it('containerRef honors strategy: "absolute"', () => {
+    const result = mountHook({ strategy: 'absolute' });
     const node = document.createElement('div');
 
     act(() => {
       result.current.containerRef(node);
     });
 
-    expect(node).toHaveStyle({ position: 'fixed' });
+    expect(node).toHaveStyle({ position: 'absolute' });
   });
 
   it('containerRef writes data-placement matching (position, align)', () => {
@@ -79,7 +79,7 @@ describe('usePositioning', () => {
     expect(node).toHaveAttribute('data-placement', 'below-start');
   });
 
-  it('containerRef sets position-try-fallbacks to the three-try flip chain by default', () => {
+  it('containerRef sets position-try-fallbacks to the default flip chain', () => {
     const result = mountHook();
     const node = document.createElement('div');
 
diff --git a/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.ts b/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.ts
index 68bcd95c543733..53de720c0bbb58 100644
--- a/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.ts
+++ b/packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.ts
@@ -17,6 +17,7 @@ import { usePlacementObserver } from './usePlacementObserver';
 export type TargetElement = HTMLElement | PositioningVirtualElement;
 
 const DEFAULT_FLIP = ['flip-block', 'flip-inline', 'flip-block flip-inline'];
+
 const EMPTY_FALLBACK_POSITIONS: PositioningShorthandValue[] = [];
 
 export function usePositioning(options: PositioningProps): PositioningReturn {
@@ -28,7 +29,7 @@ export function usePositioning(options: PositioningProps): PositioningReturn {
     fallbackPositions = EMPTY_FALLBACK_POSITIONS,
     offset,
     coverTarget = false,
-    strategy = 'absolute',
+    strategy = 'fixed',
     matchTargetSize,
     positioningRef,
   } = options;
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
index dfd2e812a21755..12450363816641 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
@@ -6,7 +6,7 @@ import styles from './positioning.module.css';
 
 export const MatchTargetSize = (): React.ReactNode => (
   <div className={styles.column}>
-    <Popover open positioning={{ matchTargetSize: 'width' }}>
+    <Popover defaultOpen positioning={{ matchTargetSize: 'width' }}>
       <PopoverTrigger>
         <button className={`${styles.trigger} ${styles.triggerWide}`}>Click me</button>
       </PopoverTrigger>

From 28238ebebb45c41d0ec3df57003dbbe5fc422c6b Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 12 May 2026 13:18:36 -0700
Subject: [PATCH 4/4] fix: update various components and add spec modules
 (#36191)

---
 ...-669e37a5-2c7c-4b19-95d4-8b070c6d72f7.json |   7 +
 ...-962383bb-b75c-46a4-bc98-038f6dd7f558.json |   7 +
 ...-bc13b7de-bb06-4180-a517-c64ffe612490.json |   7 +
 ...-c28cec00-7029-4430-8cf5-17143006a866.json |   7 +
 package.json                                  |   6 +-
 .../web-components/docs/web-components.api.md |  42 +-
 .../compound-button/compound-button.spec.ts   | 723 +++++++++++++++++
 .../compound-button.template.ts               |   9 +-
 .../src/dialog-body/dialog-body.spec.ts       |  94 +++
 .../src/dialog/dialog.template.ts             |   8 +-
 packages/web-components/src/dialog/dialog.ts  | 108 ++-
 .../src/drawer-body/drawer-body.spec.ts       |  94 +++
 .../src/drawer/drawer.template.ts             |   8 +-
 packages/web-components/src/drawer/drawer.ts  | 121 +--
 .../src/menu-button/menu-button.spec.ts       | 734 ++++++++++++++++++
 .../src/menu-item/menu-item.spec.ts           |  40 +
 .../src/rating-display/rating-display.spec.ts |   5 +-
 yarn.lock                                     |  28 +-
 18 files changed, 1924 insertions(+), 124 deletions(-)
 create mode 100644 change/@fluentui-web-components-669e37a5-2c7c-4b19-95d4-8b070c6d72f7.json
 create mode 100644 change/@fluentui-web-components-962383bb-b75c-46a4-bc98-038f6dd7f558.json
 create mode 100644 change/@fluentui-web-components-bc13b7de-bb06-4180-a517-c64ffe612490.json
 create mode 100644 change/@fluentui-web-components-c28cec00-7029-4430-8cf5-17143006a866.json
 create mode 100644 packages/web-components/src/compound-button/compound-button.spec.ts
 create mode 100644 packages/web-components/src/dialog-body/dialog-body.spec.ts
 create mode 100644 packages/web-components/src/drawer-body/drawer-body.spec.ts
 create mode 100644 packages/web-components/src/menu-button/menu-button.spec.ts
 create mode 100644 packages/web-components/src/menu-item/menu-item.spec.ts

diff --git a/change/@fluentui-web-components-669e37a5-2c7c-4b19-95d4-8b070c6d72f7.json b/change/@fluentui-web-components-669e37a5-2c7c-4b19-95d4-8b070c6d72f7.json
new file mode 100644
index 00000000000000..f103de031e7866
--- /dev/null
+++ b/change/@fluentui-web-components-669e37a5-2c7c-4b19-95d4-8b070c6d72f7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: enhance accessibility attributes for drawer component",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-962383bb-b75c-46a4-bc98-038f6dd7f558.json b/change/@fluentui-web-components-962383bb-b75c-46a4-bc98-038f6dd7f558.json
new file mode 100644
index 00000000000000..fd3625aedc557d
--- /dev/null
+++ b/change/@fluentui-web-components-962383bb-b75c-46a4-bc98-038f6dd7f558.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "test: add tests for compound-button, dialog-body, drawer-body, menu-button, and menu-item components",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-web-components-bc13b7de-bb06-4180-a517-c64ffe612490.json b/change/@fluentui-web-components-bc13b7de-bb06-4180-a517-c64ffe612490.json
new file mode 100644
index 00000000000000..059d9e20d1efd2
--- /dev/null
+++ b/change/@fluentui-web-components-bc13b7de-bb06-4180-a517-c64ffe612490.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: synchronize compound-button template with button template",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-c28cec00-7029-4430-8cf5-17143006a866.json b/change/@fluentui-web-components-c28cec00-7029-4430-8cf5-17143006a866.json
new file mode 100644
index 00000000000000..cd2eda4e6017d8
--- /dev/null
+++ b/change/@fluentui-web-components-c28cec00-7029-4430-8cf5-17143006a866.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: enhance accessibility attributes for dialog component",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index 2096a7d2c09783..9dc6138cef295c 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "@octokit/rest": "18.12.0",
     "@oddbird/css-anchor-positioning": "0.4.0",
     "@phenomnomnominal/tsquery": "6.1.3",
-    "@playwright/test": "1.55.1",
+    "@playwright/test": "1.56.1",
     "@react-native/babel-preset": "0.73.21",
     "@rnx-kit/eslint-plugin": "0.8.6",
     "@rollup/plugin-node-resolve": "13.3.0",
@@ -257,7 +257,7 @@
     "parse-diff": "0.7.1",
     "patch-package": "8.0.0",
     "path-browserify": "1.0.1",
-    "playwright": "1.55.1",
+    "playwright": "1.56.1",
     "plop": "2.6.0",
     "portfinder": "1.0.28",
     "postcss": "8.5.10",
@@ -355,7 +355,7 @@
     "prettier": "2.8.8",
     "puppeteer": "24.42.0",
     "ws": "8.17.1",
-    "playwright": "1.55.1",
+    "playwright": "1.56.1",
     "**/prismjs": "^1.30.0",
     "**/@tensile-perf/runner/express": "^4.22.1",
     "**/tar-fs": "^2.1.4",
diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index 45c4edfeca7653..6b004a99989099 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/packages/web-components/docs/web-components.api.md
@@ -2514,18 +2514,24 @@ export class Dialog extends FASTElement {
     ariaLabel: string | null;
     ariaLabelledby?: string;
     clickHandler(event: Event): boolean;
-    dialog: HTMLDialogElement;
     // (undocumented)
-    protected dialogChanged(): void;
-    emitBeforeToggle: () => void;
+    connectedCallback(): void;
+    dialog: HTMLDialogElement;
+    // @internal
+    get dialogDescribedby(): string | undefined;
+    // @internal
+    get dialogLabel(): string | null | undefined;
+    // @internal
+    get dialogLabelledby(): string | undefined;
+    // @internal
+    get dialogModal(): boolean | undefined;
+    // @internal
+    get dialogRole(): string | undefined;
+    emitBeforeToggle(): void;
     emitToggle: () => void;
     hide(): void;
     show(): void;
     type: DialogType;
-    // (undocumented)
-    protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
-    // @internal
-    protected updateDialogAttributes(): void;
 }
 
 // @public
@@ -2644,27 +2650,29 @@ export class Drawer extends FASTElement {
     cancelHandler(): void;
     // (undocumented)
     clickHandler(event: Event): boolean;
-    // @internal (undocumented)
+    // (undocumented)
     connectedCallback(): void;
     dialog: HTMLDialogElement;
-    // @internal (undocumented)
-    disconnectedCallback(): void;
+    // @internal
+    get dialogDescribedby(): string | undefined;
+    // @internal
+    get dialogLabel(): string | null | undefined;
+    // @internal
+    get dialogLabelledby(): string | undefined;
+    // @internal
+    get dialogModal(): boolean | undefined;
+    // @internal
+    get dialogRole(): string | null;
     emitBeforeToggle: () => void;
     emitToggle: () => void;
     hide(): void;
-    // (undocumented)
-    protected observeRoleAttr(): void;
     position: DrawerPosition;
     // (undocumented)
-    protected roleAttrObserver: MutationObserver;
+    role: string | null;
     show(): void;
     // (undocumented)
     size: DrawerSize;
     type: DrawerType;
-    // (undocumented)
-    protected typeChanged(): void;
-    // (undocumented)
-    protected updateDialogRole(): void;
 }
 
 // Warning: (ae-missing-release-tag) "DrawerBody" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/packages/web-components/src/compound-button/compound-button.spec.ts b/packages/web-components/src/compound-button/compound-button.spec.ts
new file mode 100644
index 00000000000000..f0df3f89b8589a
--- /dev/null
+++ b/packages/web-components/src/compound-button/compound-button.spec.ts
@@ -0,0 +1,723 @@
+import { expect, test } from '../../test/playwright/index.js';
+import { tagName } from './compound-button.options.js';
+
+test.describe('Compound Button', () => {
+  test.use({
+    tagName,
+    innerHTML: 'Button <span slot="description">Description</span>',
+  });
+
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(tagName => {
+      document.createElement(tagName);
+    }, tagName);
+
+    expect(hasError).toBe(false);
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is not set', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName}>Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is set to "button"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="button">Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="reset">Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test("should submit the form with the submit button's name and value when clicked", async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <${tagName} type="submit" name="bar" value="baz">Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?bar=baz$/);
+  });
+
+  test('should NOT submit a value when the `name` attribute is NOT set and the `value` attribute is set', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <${tagName} type="submit" value="baz">Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?$/);
+  });
+
+  test('should be focusable by default', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate();
+
+    await element.focus();
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should NOT be focusable when the `disabled` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { disabled: true } });
+
+    await element.focus();
+
+    await expect(element).not.toBeFocused();
+  });
+
+  test('should apply transparency correctly when the `disabled` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate({ attributes: { disabled: true } });
+
+    const transparent = 'rgba(0, 0, 0, 0)';
+
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'primary'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'secondary'));
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'outline'));
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'subtle'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'transparent'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+  });
+
+  test('should be focusable when the `disabled-focusable` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { 'disabled-focusable': true } });
+
+    await element.focus();
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should apply transparency correctly when the `disabled-focusable` attribute is present', async ({
+    fastPage,
+  }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate({ attributes: { 'disabled-focusable': true } });
+
+    const transparent = 'rgba(0, 0, 0, 0)';
+
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'primary'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'secondary'));
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).not.toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'outline'));
+    await expect(element).not.toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'subtle'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+
+    await element.evaluate(node => node.setAttribute('appearance', 'transparent'));
+    await expect(element).toHaveCSS('border-color', transparent);
+    await expect(element).toHaveCSS('background-color', transparent);
+  });
+
+  test('should NOT be clickable when the `disabled` attribute is present', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { disabled: true } });
+
+    const wasNotClicked = await page.evaluate(el => {
+      const event = new KeyboardEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+
+      // The return value of dispatchEvent will be false if any event listener called preventDefault, or true otherwise.
+      return el?.dispatchEvent(event);
+    }, await element.elementHandle());
+
+    expect(wasNotClicked).toEqual(true);
+  });
+
+  for (const key of ['Enter', ' ']) {
+    test(`should NOT be actionable with \`${key}\` keypress when the \`disabled-focusable\` attribute is present`, async ({
+      fastPage,
+      page,
+    }) => {
+      const { element } = fastPage;
+
+      await fastPage.setTemplate({ attributes: { 'disabled-focusable': true } });
+
+      await element.focus();
+
+      const isActionable = await page.evaluate(
+        ([el, key]) => {
+          const event = new KeyboardEvent('keypress', {
+            key: key as string,
+            bubbles: true,
+            cancelable: true,
+            view: window,
+          });
+
+          // The return value of dispatchEvent will be false if any event listener called preventDefault, or true otherwise.
+          return (el as HTMLElement).dispatchEvent(event);
+        },
+        [await element.elementHandle(), key],
+      );
+
+      expect(isActionable).toBe(false);
+    });
+  }
+
+  test('should NOT receive focus when the `tabindex` is manually set to -1', async ({ fastPage, page }) => {
+    const element = page.locator(tagName, { hasText: 'Not Focusable' });
+    const focusable = page.locator(tagName, { hasText: 'Receives Focus' });
+
+    await fastPage.setTemplate(/* html */ `
+      <${tagName}>Receives Focus</${tagName}>
+      <${tagName} tabindex="-1">Not Focusable</${tagName}>
+    `);
+
+    await focusable.focus();
+
+    await expect(focusable).toBeFocused();
+
+    await focusable.press('Tab');
+
+    await expect(element).not.toBeFocused();
+  });
+
+  test('should focus the element when the `autofocus` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { autofocus: true } });
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should submit the parent form when clicked and `type` attribute is set to "submit"', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(fastPage.page).toHaveURL(/foo/);
+  });
+
+  test('should reset the parent form when clicked and `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <input type="text" id="text-input">
+        <${tagName} type="reset">Reset Button</${tagName}>
+      </form>
+    `);
+
+    await expect(input).toHaveValue('');
+
+    await input.fill('foo');
+
+    await expect(input).toHaveValue('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('');
+  });
+
+  test('should NOT reset the parent form when the `type` attribute is set to "reset" and the `disabled` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <input type="text" id="text-input">
+        <${tagName} type="reset" disabled>Reset Button</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('foo');
+  });
+
+  test('should do nothing when clicked while not in a form and the `type` attribute is set to "submit"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">Unrelated Form</form>
+      <${tagName} type="submit">Submit Button</${tagName}>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should do nothing when clicked while not in a form and the `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        Unrelated Form
+        <input type="text" id="text-input">
+      </form>
+      <${tagName} type="reset">Submit Button</${tagName}>
+    `);
+
+    await expect(input).toHaveValue('');
+
+    await input.fill('foo');
+
+    await expect(input).toHaveValue('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('foo');
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `disabled` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit" disabled>Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(fastPage.page).not.toHaveURL(/foo/);
+  });
+
+  test('should submit the parent form when clicked and the `form` attribute is provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo">
+        <input type="text" name="testinput" value="bar">
+      </form>
+
+      <${tagName} type="submit" form="testform">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the form action when the `formaction` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit" formaction="bar">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await expect(page).toHaveURL(/bar/);
+  });
+
+  test('should override the action of the referenced form when the `formaction` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo">
+        <input type="text" name="testinput" value="baz">
+      </form>
+      <${tagName} type="submit" form="testform" formaction="bar">Submit Button</${tagName}>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await expect(page).toHaveURL(/bar/);
+  });
+
+  test('should override the form method when the `formmethod` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" formmethod="get">
+        <${tagName} type="submit" formmethod="post">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    const method = page.waitForRequest(request => request.method() === 'POST');
+
+    await element.click();
+
+    await expect(method).resolves.toBeTruthy();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the method of the referenced form when the `formmethod` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" method="get">
+        <input type="text" name="testinput" value="bar">
+      </form>
+
+      <${tagName} type="submit" form="testform" formmethod="post">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    const method = page.waitForRequest(request => request.method() === 'POST');
+
+    await element.click();
+
+    await expect(method).resolves.toBeTruthy();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the form encoding when the `formenctype` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" enctype="application/x-www-form-urlencoded">
+        <input type="text" name="testinput" value="hello world">
+        <${tagName} type="submit" formenctype="plain/text">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?testinput=hello\+world$/);
+  });
+
+  test('should override the encoding of the referenced form when the `formenctype` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" enctype="application/x-www-form-urlencoded">
+        <input type="text" name="testinput" value="hello world">
+      </form>
+
+      <${tagName} type="submit" form="testform" formenctype="plain/text">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?testinput=hello\+world$/);
+  });
+
+  test('should override the form target when the `formtarget` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" target="_blank">
+        <${tagName} type="submit" formtarget="_self">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the target of the referenced form when the `formtarget` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" target="_blank">
+        <input type="text" name="testinput" value="hello world">
+      </form>
+
+      <${tagName} type="submit" form="testform" formtarget="_self">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should submit the parent form when form validation errors are present and the `formnovalidate` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const form = page.locator('#test-form');
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <input id="text-input" name="input-field" type="email">
+        <${tagName} type="submit" formnovalidate>Button</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    const validity = await form.evaluate((node: HTMLFormElement) => node.checkValidity());
+
+    expect(validity).toBe(false);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should submit the referenced form when form validation errors are present and the `formnovalidate` and `form` attributes are present', async ({
+    fastPage,
+    page,
+  }) => {
+    const form = page.locator('#test-form');
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <input id="text-input" name="input-field" type="email">
+      </form>
+
+      <${tagName} type="submit" form="test-form" formnovalidate>Button</${tagName}>
+    `);
+
+    await input.fill('foo');
+
+    expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBeFalsy();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when form validation errors are present and the `formnovalidate` is NOT present', async ({
+    fastPage,
+    page,
+  }) => {
+    const button = page.locator(tagName);
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="#">
+        <input id="text-input" name="input-field" type="email">
+        <${tagName} type="submit">Button</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    const wasNotSubmitted = input.evaluate(
+      node =>
+        new Promise(resolve => {
+          node.addEventListener('invalid', () => resolve(true));
+        }),
+    );
+
+    await button.click();
+
+    await expect(wasNotSubmitted).resolves.toBeTruthy();
+  });
+
+  test('should NOT submit the referenced form when form validation errors are present and the `formnovalidate` attribute is NOT present and the `form` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const button = page.locator(tagName);
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="#">
+        <input id="text-input" name="input-field" type="email">
+      </form>
+
+      <${tagName} type="submit" form="test-form">Button</${tagName}>
+    `);
+
+    await input.fill('foo');
+
+    const wasInvalid = input.evaluate(
+      node =>
+        new Promise(resolve => {
+          node.addEventListener('invalid', () => resolve(true));
+        }),
+    );
+
+    await button.click();
+
+    await expect(wasInvalid).resolves.toBeTruthy();
+  });
+
+  test.describe('description slot', () => {
+    test('should render content in the description slot', async ({ fastPage }) => {
+      const { element } = fastPage;
+      const description = element.locator('slot[name="description"]');
+
+      await fastPage.setTemplate({
+        innerHTML: 'Primary text <span slot="description">Secondary text</span>',
+      });
+
+      await expect(description).toHaveCount(1);
+      await expect(element).toContainText('Primary text');
+      await expect(element).toContainText('Secondary text');
+    });
+
+    test('should render without description slot content', async ({ fastPage }) => {
+      const { element } = fastPage;
+
+      await fastPage.setTemplate({ innerHTML: 'Button text only' });
+
+      await expect(element).toContainText('Button text only');
+    });
+
+    test('should place the description slot inside the content part', async ({ fastPage }) => {
+      const { element } = fastPage;
+      const contentPart = element.locator('slot:not([name])');
+      const descriptionSlot = element.locator('slot[name="description"]');
+
+      await fastPage.setTemplate({
+        innerHTML: 'Click me <span slot="description">More info</span>',
+      });
+
+      expect(
+        await contentPart.evaluate((node: HTMLSlotElement) =>
+          node.assignedNodes().map(n => ({ textContent: n.textContent })),
+        ),
+      ).toEqual([{ textContent: 'Click me ' }]);
+
+      expect(
+        await descriptionSlot.evaluate((node: HTMLSlotElement) =>
+          node.assignedElements().map(n => ({ textContent: n.textContent })),
+        ),
+      ).toEqual([{ textContent: 'More info' }]);
+    });
+  });
+});
diff --git a/packages/web-components/src/compound-button/compound-button.template.ts b/packages/web-components/src/compound-button/compound-button.template.ts
index bfe14d286e5959..49b5c4eb01c353 100644
--- a/packages/web-components/src/compound-button/compound-button.template.ts
+++ b/packages/web-components/src/compound-button/compound-button.template.ts
@@ -4,12 +4,16 @@ import type { CompoundButton } from './compound-button.js';
 import type { CompoundButtonOptions } from './compound-button.options.js';
 
 /**
- * The template for the Compound Button component.
+ * Generates a template for the Button component.
+ *
  * @public
  */
 export function buttonTemplate<T extends CompoundButton>(options: CompoundButtonOptions = {}): ElementViewTemplate<T> {
   return html<T>`
-    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}">
+    <template
+      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+      @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+    >
       ${startSlotTemplate(options)}
       <span class="content" part="content">
         <slot ${slotted('defaultSlottedContent')}></slot>
@@ -22,6 +26,7 @@ export function buttonTemplate<T extends CompoundButton>(options: CompoundButton
 
 /**
  * The template for the Button component.
+ *
  * @public
  */
 export const template: ElementViewTemplate<CompoundButton> = buttonTemplate();
diff --git a/packages/web-components/src/dialog-body/dialog-body.spec.ts b/packages/web-components/src/dialog-body/dialog-body.spec.ts
new file mode 100644
index 00000000000000..b751113ab8405e
--- /dev/null
+++ b/packages/web-components/src/dialog-body/dialog-body.spec.ts
@@ -0,0 +1,94 @@
+import { expect, test } from '../../test/playwright/index.js';
+import { tagName } from './dialog-body.options.js';
+
+test.describe('DialogBody', () => {
+  test.use({
+    tagName,
+    innerHTML: 'Dialog Body',
+  });
+
+  test('should create with `document.createElement()`', async ({ page, fastPage }) => {
+    await fastPage.setTemplate('');
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(tagName => {
+      document.createElement(tagName);
+    }, tagName);
+
+    expect(hasError).toBe(false);
+  });
+
+  test('should display a title when content is provided in the title slot', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+          <h2 slot="title">Dialog Title</h2>
+      `,
+    });
+
+    await expect(element).toHaveText('Dialog Title');
+  });
+
+  test("should call the parent element's `hide` method when elements in the close slot are clicked", async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const closeButton = element.locator('#close-button');
+    const customDialog = page.locator('custom-dialog');
+
+    await fastPage.setTemplate(/* html */ `
+      <custom-dialog>
+        <${tagName}>
+          <h2 slot="title">Dialog Title</h2>
+          <div>Dialog Body</div>
+          <button id="close-button" slot="close">Close</button>
+        </${tagName}>
+      </custom-dialog>
+    `);
+
+    await customDialog.evaluate((node: HTMLElement) => {
+      (node as any).hide = () => {
+        node.dataset.hideCalled = 'true';
+      };
+    });
+
+    await closeButton.click();
+
+    await expect(customDialog).toHaveAttribute('data-hide-called', 'true');
+  });
+
+  test("should not throw an error if the parent element doesn't have a `hide` method when elements in the close slot are clicked", async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const closeButton = element.locator('#close-button');
+
+    await fastPage.setTemplate(/* html */ `
+      <div>
+        <${tagName}>
+          <h2 slot="title">Dialog Title</h2>
+          <div>Dialog Body</div>
+          <button id="close-button" slot="close">Close</button>
+        </${tagName}>
+      </div>
+    `);
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await closeButton.click();
+
+    expect(hasError).toBe(false);
+  });
+});
diff --git a/packages/web-components/src/dialog/dialog.template.ts b/packages/web-components/src/dialog/dialog.template.ts
index 321cb4d02dc242..018eae02fa1a65 100644
--- a/packages/web-components/src/dialog/dialog.template.ts
+++ b/packages/web-components/src/dialog/dialog.template.ts
@@ -9,9 +9,11 @@ export const template: ElementViewTemplate<Dialog> = html`
   <dialog
     class="dialog"
     part="dialog"
-    aria-describedby="${x => x.ariaDescribedby}"
-    aria-labelledby="${x => x.ariaLabelledby}"
-    aria-label="${x => x.ariaLabel}"
+    aria-modal="${x => x.dialogModal}"
+    aria-describedby="${x => x.dialogDescribedby}"
+    aria-labelledby="${x => x.dialogLabelledby}"
+    aria-label="${x => x.dialogLabel}"
+    role="${x => x.dialogRole}"
     @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
     @cancel="${x => x.hide()}"
     ${ref('dialog')}
diff --git a/packages/web-components/src/dialog/dialog.ts b/packages/web-components/src/dialog/dialog.ts
index d01d30eba22a06..820957409fb0e0 100644
--- a/packages/web-components/src/dialog/dialog.ts
+++ b/packages/web-components/src/dialog/dialog.ts
@@ -1,4 +1,4 @@
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DialogType } from './dialog.options.js';
 
 /**
@@ -16,9 +16,6 @@ export class Dialog extends FASTElement {
    */
   @observable
   public dialog!: HTMLDialogElement;
-  protected dialogChanged() {
-    this.updateDialogAttributes();
-  }
 
   /**
    * The ID of the element that describes the dialog
@@ -50,9 +47,79 @@ export class Dialog extends FASTElement {
    * @public
    */
   @attr
-  public type: DialogType = DialogType.modal;
-  protected typeChanged(prev: DialogType | undefined, next: DialogType): void {
-    this.updateDialogAttributes();
+  public type!: DialogType;
+
+  /**
+   * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+   * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogDescribedby(): string | undefined {
+    if (this.dialog) {
+      return this.ariaDescribedby;
+    }
+  }
+
+  /**
+   * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+   * ensure that the dialog's accessible name is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogLabel(): string | null | undefined {
+    if (this.dialog) {
+      return this.ariaLabel;
+    }
+  }
+
+  /**
+   * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+   * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogLabelledby(): string | undefined {
+    if (this.dialog) {
+      return this.ariaLabelledby;
+    }
+  }
+
+  /**
+   * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+   * the modal state will be true, otherwise it will be undefined.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogModal(): boolean | undefined {
+    if (this.dialog && this.type !== DialogType.nonModal) {
+      return true;
+    }
+  }
+
+  /**
+   * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+   * be 'alertdialog', otherwise it will be undefined.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogRole(): string | undefined {
+    if (this.dialog && this.type === DialogType.alert) {
+      return 'alertdialog';
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    Updates.enqueue(() => {
+      this.type = this.type ?? DialogType.modal;
+    });
   }
 
   /**
@@ -61,12 +128,12 @@ export class Dialog extends FASTElement {
    *
    * @public
    */
-  public emitBeforeToggle = (): void => {
+  public emitBeforeToggle(): void {
     this.$emit('beforetoggle', {
       oldState: this.dialog.open ? 'open' : 'closed',
       newState: this.dialog.open ? 'closed' : 'open',
     });
-  };
+  }
 
   /**
    * Method to emit an event after the dialog's open state changes
@@ -123,27 +190,4 @@ export class Dialog extends FASTElement {
 
     return true;
   }
-
-  /**
-   * Updates the internal dialog element's attributes based on its type.
-   *
-   * @internal
-   */
-  protected updateDialogAttributes(): void {
-    if (!this.dialog) {
-      return;
-    }
-
-    if (this.type === DialogType.alert) {
-      this.dialog.setAttribute('role', 'alertdialog');
-    } else {
-      this.dialog.removeAttribute('role');
-    }
-
-    if (this.type !== DialogType.nonModal) {
-      this.dialog.setAttribute('aria-modal', 'true');
-    } else {
-      this.dialog.removeAttribute('aria-modal');
-    }
-  }
 }
diff --git a/packages/web-components/src/drawer-body/drawer-body.spec.ts b/packages/web-components/src/drawer-body/drawer-body.spec.ts
new file mode 100644
index 00000000000000..863c4ae7feb7d4
--- /dev/null
+++ b/packages/web-components/src/drawer-body/drawer-body.spec.ts
@@ -0,0 +1,94 @@
+import { expect, test } from '../../test/playwright/index.js';
+import { tagName } from './drawer-body.options.js';
+
+test.describe('DrawerBody', () => {
+  test.use({
+    tagName,
+    innerHTML: 'Drawer Body',
+  });
+
+  test('should create with `document.createElement()`', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(tagName => {
+      document.createElement(tagName);
+    }, tagName);
+
+    expect(hasError).toBe(false);
+  });
+
+  test('should display a title when content is provided in the title slot', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+          <h2 slot="title">Drawer Title</h2>
+      `,
+    });
+
+    await expect(element).toHaveText('Drawer Title');
+  });
+
+  test("should call the parent element's `hide` method when elements in the close slot are clicked", async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const closeButton = element.locator('#close-button');
+    const customDrawer = page.locator('custom-drawer');
+
+    await fastPage.setTemplate(/* html */ `
+      <custom-drawer>
+        <${tagName}>
+          <h2 slot="title">Drawer Title</h2>
+          <div>Drawer Body</div>
+          <button id="close-button" slot="close">Close</button>
+        </${tagName}>
+      </custom-drawer>
+    `);
+
+    await customDrawer.evaluate((node: HTMLElement) => {
+      (node as any).hide = () => {
+        node.dataset.hideCalled = 'true';
+      };
+    });
+
+    await closeButton.click();
+
+    await expect(customDrawer).toHaveAttribute('data-hide-called', 'true');
+  });
+
+  test("should not throw an error if the parent element doesn't have a `hide` method when elements in the close slot are clicked", async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const closeButton = element.locator('#close-button');
+
+    await fastPage.setTemplate(/* html */ `
+      <div>
+        <${tagName}>
+          <h2 slot="title">Drawer Title</h2>
+          <div>Drawer Body</div>
+          <button id="close-button" slot="close">Close</button>
+        </${tagName}>
+      </div>
+    `);
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await closeButton.click();
+
+    expect(hasError).toBe(false);
+  });
+});
diff --git a/packages/web-components/src/drawer/drawer.template.ts b/packages/web-components/src/drawer/drawer.template.ts
index 65773c7bfd6955..b4112326f4e986 100644
--- a/packages/web-components/src/drawer/drawer.template.ts
+++ b/packages/web-components/src/drawer/drawer.template.ts
@@ -10,9 +10,11 @@ export function drawerTemplate<T extends Drawer>(): ElementViewTemplate<T> {
     <dialog
       class="dialog"
       part="dialog"
-      aria-describedby="${x => x.ariaDescribedby}"
-      aria-labelledby="${x => x.ariaLabelledby}"
-      aria-label="${x => x.ariaLabel}"
+      aria-describedby="${x => x.dialogDescribedby}"
+      aria-labelledby="${x => x.dialogLabelledby}"
+      aria-label="${x => x.dialogLabel}"
+      aria-modal="${x => x.dialogModal}"
+      role="${x => x.dialogRole}"
       size="${x => x.size}"
       position="${x => x.position}"
       @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
diff --git a/packages/web-components/src/drawer/drawer.ts b/packages/web-components/src/drawer/drawer.ts
index d4bf9e65e16d88..91c16ca6c0c754 100644
--- a/packages/web-components/src/drawer/drawer.ts
+++ b/packages/web-components/src/drawer/drawer.ts
@@ -1,4 +1,4 @@
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
 
 /**
@@ -33,8 +33,6 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @tag fluent-drawer
  */
 export class Drawer extends FASTElement {
-  protected roleAttrObserver!: MutationObserver;
-
   /**
    * Determines whether the drawer should be displayed as modal or non-modal
    * When rendered as a modal, an overlay is applied over the rest of the view.
@@ -42,20 +40,7 @@ export class Drawer extends FASTElement {
    * @public
    */
   @attr
-  public type: DrawerType = DrawerType.modal;
-  protected typeChanged() {
-    if (!this.dialog) {
-      return;
-    }
-
-    this.updateDialogRole();
-
-    if (this.type === DrawerType.modal) {
-      this.dialog.setAttribute('aria-modal', 'true');
-    } else {
-      this.dialog.removeAttribute('aria-modal');
-    }
-  }
+  public type!: DrawerType;
 
   /**
    * The ID of the element that labels the drawer.
@@ -82,6 +67,9 @@ export class Drawer extends FASTElement {
   @attr
   public position: DrawerPosition = DrawerPosition.start;
 
+  @observable
+  public role!: string | null;
+
   /**
    * @public
    * @defaultValue medium
@@ -98,17 +86,79 @@ export class Drawer extends FASTElement {
   @observable
   public dialog!: HTMLDialogElement;
 
-  /** @internal */
+  /**
+   * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+   * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogDescribedby(): string | undefined {
+    if (this.dialog) {
+      return this.ariaDescribedby;
+    }
+  }
+
+  /**
+   * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+   * ensure that the dialog's accessible name is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogLabel(): string | null | undefined {
+    if (this.dialog) {
+      return this.ariaLabel;
+    }
+  }
+
+  /**
+   * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+   * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogLabelledby(): string | undefined {
+    if (this.dialog) {
+      return this.ariaLabelledby;
+    }
+  }
+
+  /**
+   * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+   * the modal state will be true, otherwise it will be undefined.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogModal(): boolean | undefined {
+    if (this.dialog && this.type === DrawerType.modal) {
+      return true;
+    }
+  }
+
+  /**
+   * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+   * be 'alertdialog', otherwise it will be undefined.
+   *
+   * @internal
+   */
+  @volatile
+  public get dialogRole(): string | null {
+    if (this.dialog && this.type === DrawerType.modal) {
+      return 'dialog';
+    }
+
+    return this.role;
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this.typeChanged();
-    this.observeRoleAttr();
-  }
 
-  /** @internal */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.roleAttrObserver.disconnect();
+    Updates.enqueue(() => {
+      this.type = this.type ?? DrawerType.modal;
+    });
   }
 
   /**
@@ -186,25 +236,4 @@ export class Drawer extends FASTElement {
   public cancelHandler() {
     this.hide();
   }
-
-  protected observeRoleAttr() {
-    if (this.roleAttrObserver) {
-      return;
-    }
-
-    this.roleAttrObserver = new MutationObserver(() => {
-      this.updateDialogRole();
-    });
-    this.roleAttrObserver.observe(this, {
-      attributes: true,
-      attributeFilter: ['role'],
-    });
-  }
-
-  protected updateDialogRole() {
-    if (!this.dialog) {
-      return;
-    }
-    this.dialog.role = this.type === DrawerType.modal ? 'dialog' : this.role;
-  }
 }
diff --git a/packages/web-components/src/menu-button/menu-button.spec.ts b/packages/web-components/src/menu-button/menu-button.spec.ts
new file mode 100644
index 00000000000000..2878631713eb33
--- /dev/null
+++ b/packages/web-components/src/menu-button/menu-button.spec.ts
@@ -0,0 +1,734 @@
+import { expect, test } from '../../test/playwright/index.js';
+import { MenuButtonAppearance, MenuButtonSize } from './menu-button.options.js';
+import { tagName } from './menu-button.options.js';
+
+test.describe('MenuButton', () => {
+  test.use({
+    tagName,
+    innerHTML: 'Toggle Menu',
+  });
+
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate('');
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(tagName => {
+      document.createElement(tagName);
+    }, tagName);
+
+    expect(hasError).toBe(false);
+  });
+
+  test('should render a menu button on the page', async ({ fastPage }) => {
+    await fastPage.setTemplate();
+    await expect(fastPage.element).toBeVisible();
+  });
+
+  test('should have a dropdown arrow icon in the end slot', async ({ fastPage }) => {
+    await fastPage.setTemplate();
+
+    const endSlot = fastPage.element.locator('slot[name="end"]');
+    const dropdownIcon = endSlot.locator('svg');
+
+    await expect(dropdownIcon).toBeVisible();
+    await expect(dropdownIcon).toHaveAttribute('viewBox', '0 0 20 20');
+  });
+
+  test('should allow custom content in the end slot', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const endSlot = element.locator('span[slot="end"]');
+
+    await fastPage.setTemplate({
+      innerHTML: `Toggle Menu <span slot="end">▼</span>`,
+    });
+
+    await expect(endSlot).toBeVisible();
+    await expect(endSlot).toHaveText('▼');
+  });
+
+  test('should support start slot for icons', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const startSlot = element.locator('span[slot="start"]');
+
+    await fastPage.setTemplate({
+      innerHTML: `<span slot="start">🎯</span> Toggle Menu`,
+    });
+
+    await expect(startSlot).toBeVisible();
+    await expect(startSlot).toHaveText('🎯');
+  });
+
+  test('should apply the `icon` property when the `icon-only` attribute is set', async ({ fastPage }) => {
+    await fastPage.setTemplate({ attributes: { 'icon-only': true } });
+
+    await expect(fastPage.element).toHaveJSProperty('iconOnly', true);
+  });
+
+  for (const size in MenuButtonSize) {
+    test(`should apply the \`${size}\` property when the \`size\` attribute is set to \`${size}\``, async ({
+      fastPage,
+    }) => {
+      await fastPage.setTemplate({ attributes: { size } });
+
+      await expect(fastPage.element).toHaveJSProperty('size', size);
+    });
+  }
+
+  test('should update the button size from large to medium', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate({ attributes: { size: 'large' } });
+
+    await expect(element).toHaveJSProperty('size', 'large');
+
+    await fastPage.updateTemplate(element, {
+      attributes: { size: 'medium' },
+    });
+
+    await expect(element).toHaveJSProperty('size', 'medium');
+  });
+
+  for (const appearance in MenuButtonAppearance) {
+    test(`should set the "${appearance}" property when the \`appearance\` attribute is set to \`${appearance}\``, async ({
+      fastPage,
+    }) => {
+      const { element } = fastPage;
+
+      await fastPage.setTemplate({ attributes: { appearance } });
+
+      await expect(element).toHaveJSProperty('appearance', appearance);
+    });
+  }
+
+  test('should be focusable and respond to clicks', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate();
+
+    await element.focus();
+    await expect(element).toBeFocused();
+
+    // Test that Enter key triggers click using a Promise
+    const clickPromise = element.evaluate(node => {
+      return new Promise(resolve => {
+        node.addEventListener('click', () => {
+          resolve('clicked!');
+        });
+      });
+    });
+
+    await element.click();
+
+    await expect(clickPromise).resolves.toBe('clicked!');
+  });
+
+  test('should have proper ARIA attributes for menu button', async ({ fastPage }) => {
+    await fastPage.setTemplate({
+      attributes: {
+        'aria-haspopup': 'true',
+        'aria-expanded': 'false',
+      },
+    });
+
+    await expect(fastPage.element).toHaveAttribute('aria-haspopup', 'true');
+    await expect(fastPage.element).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is not set', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName}>Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is set to "button"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="button">Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="reset">Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test("should submit the form with the submit button's name and value when clicked", async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <${tagName} type="submit" name="bar" value="baz">Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?bar=baz$/);
+  });
+
+  test('should NOT submit a value when the `name` attribute is NOT set and the `value` attribute is set', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <${tagName} type="submit" value="baz">Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?$/);
+  });
+
+  test('should be focusable by default', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate();
+
+    await element.focus();
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should NOT be focusable when the `disabled` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { disabled: true } });
+
+    await element.focus();
+
+    await expect(element).not.toBeFocused();
+  });
+
+  test('should be focusable when the `disabled-focusable` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({
+      attributes: { 'disabled-focusable': true },
+    });
+
+    await element.focus();
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should NOT be clickable when the `disabled` attribute is present', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { disabled: true } });
+
+    const wasNotClicked = await page.evaluate(el => {
+      const event = new KeyboardEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+
+      // The return value of dispatchEvent will be false if any event listener called preventDefault, or true otherwise.
+      return el?.dispatchEvent(event);
+    }, await element.elementHandle());
+
+    expect(wasNotClicked).toEqual(true);
+  });
+
+  for (const key of ['Enter', ' ']) {
+    test(`should NOT be actionable with \`${key}\` keypress when the \`disabled-focusable\` attribute is present`, async ({
+      fastPage,
+      page,
+    }) => {
+      const { element } = fastPage;
+
+      await fastPage.setTemplate({
+        attributes: { 'disabled-focusable': true },
+      });
+
+      await element.focus();
+
+      const isActionable = await page.evaluate(
+        ([el, key]) => {
+          const event = new KeyboardEvent('keypress', {
+            key: key as string,
+            bubbles: true,
+            cancelable: true,
+            view: window,
+          });
+
+          // The return value of dispatchEvent will be false if any event listener called preventDefault, or true otherwise.
+          return (el as HTMLElement).dispatchEvent(event);
+        },
+        [await element.elementHandle(), key],
+      );
+
+      expect(isActionable).toBe(false);
+    });
+  }
+
+  test('should NOT receive focus when the `tabindex` is manually set to -1', async ({ fastPage, page }) => {
+    const element = page.locator(tagName, { hasText: 'Not Focusable' });
+    const focusable = page.locator(tagName, { hasText: 'Receives Focus' });
+
+    await fastPage.setTemplate(/* html */ `
+      <${tagName}>Receives Focus</${tagName}>
+      <${tagName} tabindex="-1">Not Focusable</${tagName}>
+    `);
+
+    await focusable.focus();
+
+    await expect(focusable).toBeFocused();
+
+    await focusable.press('Tab');
+
+    await expect(element).not.toBeFocused();
+  });
+
+  test('should focus the element when the `autofocus` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { autofocus: true } });
+
+    await expect(element).toBeFocused();
+  });
+
+  test('should submit the parent form when clicked and `type` attribute is set to "submit"', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(fastPage.page).toHaveURL(/foo/);
+  });
+
+  test('should reset the parent form when clicked and `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <input type="text" id="text-input" />
+        <${tagName} type="reset">Reset Button</${tagName}>
+      </form>
+    `);
+
+    await expect(input).toHaveValue('');
+
+    await input.fill('foo');
+
+    await expect(input).toHaveValue('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('');
+  });
+
+  test('should NOT reset the parent form when the `type` attribute is set to "reset" and the `disabled` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <input type="text" id="text-input" />
+        <${tagName} type="reset" disabled>Reset Button</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('foo');
+  });
+
+  test('should do nothing when clicked while not in a form and the `type` attribute is set to "submit"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">Unrelated Form</form>
+      <${tagName} type="submit">Submit Button</${tagName}>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should do nothing when clicked while not in a form and the `type` attribute is set to "reset"', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        Unrelated Form
+        <input type="text" id="text-input" />
+      </form>
+      <${tagName} type="reset">Submit Button</${tagName}>
+    `);
+
+    await expect(input).toHaveValue('');
+
+    await input.fill('foo');
+
+    await expect(input).toHaveValue('foo');
+
+    await element.click();
+
+    await expect(input).toHaveValue('foo');
+
+    await expect(page).not.toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when clicked and `disabled` attribute is present', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit" disabled>Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(fastPage.page).not.toHaveURL(/foo/);
+  });
+
+  test('should submit the parent form when clicked and the `form` attribute is provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo">
+        <input type="text" name="testinput" value="bar" />
+      </form>
+
+      <${tagName} type="submit" form="testform">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the form action when the `formaction` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo">
+        <${tagName} type="submit" formaction="bar">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await expect(page).toHaveURL(/bar/);
+  });
+
+  test('should override the action of the referenced form when the `formaction` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo">
+        <input type="text" name="testinput" value="baz" />
+      </form>
+      <${tagName} type="submit" form="testform" formaction="bar">Submit Button</${tagName}>
+    `);
+
+    await element.click();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await expect(page).toHaveURL(/bar/);
+  });
+
+  test('should override the form method when the `formmethod` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" formmethod="get">
+        <${tagName} type="submit" formmethod="post">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    const method = page.waitForRequest(request => request.method() === 'POST');
+
+    await element.click();
+
+    await expect(method).resolves.toBeTruthy();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the method of the referenced form when the `formmethod` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" method="get">
+        <input type="text" name="testinput" value="bar" />
+      </form>
+
+      <${tagName} type="submit" form="testform" formmethod="post">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    const method = page.waitForRequest(request => request.method() === 'POST');
+
+    await element.click();
+
+    await expect(method).resolves.toBeTruthy();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the form encoding when the `formenctype` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" enctype="application/x-www-form-urlencoded">
+        <input type="text" name="testinput" value="hello world" />
+        <${tagName} type="submit" formenctype="plain/text">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?testinput=hello\+world$/);
+  });
+
+  test('should override the encoding of the referenced form when the `formenctype` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" enctype="application/x-www-form-urlencoded">
+        <input type="text" name="testinput" value="hello world" />
+      </form>
+
+      <${tagName} type="submit" form="testform" formenctype="plain/text">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo\?testinput=hello\+world$/);
+  });
+
+  test('should override the form target when the `formtarget` attribute is provided', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form action="foo" target="_blank">
+        <${tagName} type="submit" formtarget="_self">Submit Button</${tagName}>
+      </form>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should override the target of the referenced form when the `formtarget` and `form` attributes are provided', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="testform" action="foo" target="_blank">
+        <input type="text" name="testinput" value="hello world" />
+      </form>
+
+      <${tagName} type="submit" form="testform" formtarget="_self">Submit Button</${tagName}>
+    `);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should submit the parent form when form validation errors are present and the `formnovalidate` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const form = page.locator('#test-form');
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <input id="text-input" name="input-field" type="email" />
+        <${tagName} type="submit" formnovalidate>Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    const validity = await form.evaluate((node: HTMLFormElement) => node.checkValidity());
+
+    expect(validity).toBe(false);
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should submit the referenced form when form validation errors are present and the `formnovalidate` and `form` attributes are present', async ({
+    fastPage,
+    page,
+  }) => {
+    const form = page.locator('#test-form');
+    const { element } = fastPage;
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="foo">
+        <input id="text-input" name="input-field" type="email" />
+      </form>
+
+      <${tagName} type="submit" form="test-form" formnovalidate>Toggle Menu</${tagName}>
+    `);
+
+    await input.fill('foo');
+
+    expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBeFalsy();
+
+    await expect(page).not.toHaveURL(/foo/);
+
+    await element.click();
+
+    await expect(page).toHaveURL(/foo/);
+  });
+
+  test('should NOT submit the parent form when form validation errors are present and the `formnovalidate` is NOT present', async ({
+    fastPage,
+    page,
+  }) => {
+    const button = page.locator(tagName);
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="#">
+        <input id="text-input" name="input-field" type="email" />
+        <${tagName} type="submit">Toggle Menu</${tagName}>
+      </form>
+    `);
+
+    await input.fill('foo');
+
+    const wasNotSubmitted = input.evaluate(
+      node =>
+        new Promise(resolve => {
+          node.addEventListener('invalid', () => resolve(true));
+        }),
+    );
+
+    await button.click();
+
+    await expect(wasNotSubmitted).resolves.toBeTruthy();
+  });
+
+  test('should NOT submit the referenced form when form validation errors are present and the `formnovalidate` attribute is NOT present and the `form` attribute is present', async ({
+    fastPage,
+    page,
+  }) => {
+    const button = page.locator(tagName);
+    const input = page.locator('#text-input');
+
+    await fastPage.setTemplate(/* html */ `
+      <form id="test-form" action="#">
+        <input id="text-input" name="input-field" type="email" />
+      </form>
+
+      <${tagName} type="submit" form="test-form">Toggle Menu</${tagName}>
+    `);
+
+    await input.fill('foo');
+
+    const wasInvalid = input.evaluate(
+      node =>
+        new Promise(resolve => {
+          node.addEventListener('invalid', () => resolve(true));
+        }),
+    );
+
+    await button.click();
+
+    await expect(wasInvalid).resolves.toBeTruthy();
+  });
+});
diff --git a/packages/web-components/src/menu-item/menu-item.spec.ts b/packages/web-components/src/menu-item/menu-item.spec.ts
new file mode 100644
index 00000000000000..be403e9c3e1b43
--- /dev/null
+++ b/packages/web-components/src/menu-item/menu-item.spec.ts
@@ -0,0 +1,40 @@
+import { expect, test } from '../../test/playwright/index.js';
+import { tagName } from './menu-item.options.js';
+
+test.describe('Menu Item', () => {
+  test.use({ tagName, innerHTML: 'Menu Item' });
+
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate('');
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(tagName => {
+      document.createElement(tagName);
+    }, tagName);
+
+    expect(hasError).toBe(false);
+  });
+
+  test('should render on the page', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate();
+
+    await expect(element).toBeAttached();
+
+    await expect(element).toContainText('Menu Item');
+  });
+
+  test("should have a default role of 'menuitem'", async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate();
+
+    await expect(element).toHaveAttribute('role', 'menuitem');
+  });
+});
diff --git a/packages/web-components/src/rating-display/rating-display.spec.ts b/packages/web-components/src/rating-display/rating-display.spec.ts
index d21bac63afafe8..c3e997c6f6738d 100644
--- a/packages/web-components/src/rating-display/rating-display.spec.ts
+++ b/packages/web-components/src/rating-display/rating-display.spec.ts
@@ -56,7 +56,6 @@ test.describe('Rating Display', () => {
 
   test('should display the correct number of filled icons and label text based on the `value` attribute', async ({
     fastPage,
-    browserName,
   }) => {
     const { element } = fastPage;
     const display = element.locator('.display');
@@ -67,9 +66,7 @@ test.describe('Rating Display', () => {
     await expect(display).toHaveCSS('inline-size', `${5 * (16 + 2) - 2 / 2}px`);
     await expect(display).toHaveCSS(
       'background-image',
-      browserName === 'chromium'
-        ? 'linear-gradient(90deg, rgb(234, 163, 0) calc(63px), rgb(249, 226, 174) calc(63.5px))'
-        : 'linear-gradient(90deg, rgb(234, 163, 0) 63px, rgb(249, 226, 174) 63.5px)',
+      'linear-gradient(90deg, rgb(234, 163, 0) 63px, rgb(249, 226, 174) 63.5px)',
     );
   });
 
diff --git a/yarn.lock b/yarn.lock
index 747a1e412521fe..39923c4738df9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3327,12 +3327,12 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
-"@playwright/test@1.55.1":
-  version "1.55.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.55.1.tgz#80f775d5f948cd3ef550fcc45ef99986d3ffb36c"
-  integrity sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==
+"@playwright/test@1.56.1":
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f"
+  integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==
   dependencies:
-    playwright "1.55.1"
+    playwright "1.56.1"
 
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.24"
@@ -16448,17 +16448,17 @@ pkg-up@^4.0.0:
   dependencies:
     find-up "^6.2.0"
 
-playwright-core@1.55.1:
-  version "1.55.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.55.1.tgz#5d3bb1846bc4289d364ea1a9dcb33f14545802e9"
-  integrity sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==
+playwright-core@1.56.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d"
+  integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==
 
-playwright@1.55.1, playwright@^1.34.3, playwright@^1.55.1:
-  version "1.55.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.55.1.tgz#8a9954e9e61ed1ab479212af9be336888f8b3f0e"
-  integrity sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==
+playwright@1.56.1, playwright@^1.34.3, playwright@^1.55.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf"
+  integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==
   dependencies:
-    playwright-core "1.55.1"
+    playwright-core "1.56.1"
   optionalDependencies:
     fsevents "2.3.2"