chore(web-components): add test for complex focus management (#32009)

Co-authored-by: Chris Holt <[email protected]>

Author: davatron5000

packages/web-components/src/menu/menu.spec.ts

@@ -15,6 +15,33 @@ const menuFixture = `
 </fluent-menu>
 `;
 
+const complexMenuFixture = `
+<fluent-menu>
+  <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
+  <fluent-menu-list>
+    <fluent-menu-item>
+      Item 1
+      <fluent-menu-list slot="submenu">
+        <fluent-menu-item> Subitem 1 </fluent-menu-item>
+        <fluent-menu-item> Subitem 2 </fluent-menu-item>
+      </fluent-menu-list>
+    </fluent-menu-item>
+
+    <fluent-menu-item role="menuitemcheckbox"> Item 2 </fluent-menu-item>
+    <fluent-menu-item role="menuitemcheckbox"> Item 3 </fluent-menu-item>
+
+    <fluent-divider role="separator" aria-orientation="horizontal" orientation="horizontal"></fluent-divider>
+
+    <fluent-menu-item>Menu item 4</fluent-menu-item>
+    <fluent-menu-item>Menu item 5</fluent-menu-item>
+    <fluent-menu-item>Menu item 6</fluent-menu-item>
+
+    <fluent-menu-item>Menu item 7</fluent-menu-item>
+    <fluent-menu-item>Menu item 8</fluent-menu-item>
+  </fluent-menu-list>
+</fluent-menu>
+`;
+
 test.describe('Menu', () => {
   let page: Page;
   let element: Locator;
@@ -162,4 +189,27 @@ test.describe('Menu', () => {
     await menuButton.dispatchEvent('contextmenu');
     await expect(menuList).toBeVisible();
   });
+
+  test('should focus first item after closing a submenu', async () => {
+    page.setContent(complexMenuFixture);
+
+    await menuButton.click();
+
+    await expect(menuList.first()).toBeVisible();
+    await expect(menuList.last()).toBeHidden();
+
+    await menuItems.first().focus();
+
+    await page.keyboard.press('ArrowRight');
+
+    await expect(menuList.last()).toBeVisible();
+
+    await page.keyboard.press('ArrowLeft');
+
+    await expect(menuList.last()).toBeHidden();
+
+    await expect(menuList.first()).toBeVisible();
+
+    await expect(menuItems.first()).toBeFocused();
+  });
 });