Added test cases to verify that the parent menu item remains inactive…

… when a submenu item is opened.

packages/react/src/menu/submenu-trigger/MenuSubmenuTrigger.test.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { fireEvent, waitFor, screen } from '@mui/internal-test-utils';
+import { createRenderer } from '#test-utils';
+import { DirectionProvider } from '@base-ui-components/react/direction-provider';
+import { Menu } from '@base-ui-components/react/menu';
+
+type TextDirection = 'ltr' | 'rtl';
+
+describe('<Menu.SubmenuTrigger />', () => {
+  const { render } = createRenderer();
+
+  function TestComponent({ direction = 'ltr' }: { direction: TextDirection }) {
+    return (
+      <DirectionProvider direction={direction}>
+        <Menu.Root open>
+          <Menu.Portal>
+            <Menu.Positioner>
+              <Menu.Popup>
+                <Menu.Item>1</Menu.Item>
+                <Menu.Root>
+                  <Menu.SubmenuTrigger>2</Menu.SubmenuTrigger>
+                  <Menu.Portal>
+                    <Menu.Positioner>
+                      <Menu.Popup>
+                        <Menu.Item>2.1</Menu.Item>
+                        <Menu.Item>2.2</Menu.Item>
+                      </Menu.Popup>
+                    </Menu.Positioner>
+                  </Menu.Portal>
+                </Menu.Root>
+              </Menu.Popup>
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>
+      </DirectionProvider>
+    );
+  }
+
+  const testCases = [
+    { direction: 'ltr', openKey: 'ArrowRight', closeKey: 'ArrowLeft' },
+    { direction: 'rtl', openKey: 'ArrowLeft', closeKey: 'ArrowRight' },
+  ];
+
+  testCases.forEach(({ direction, openKey }) => {
+    it(`opens the submenu with ${openKey} and highlights a single item in ${direction.toUpperCase()} direction`, async () => {
+      await render(<TestComponent direction={direction as TextDirection} />);
+      const submenuTrigger = screen.getByText('2');
+
+      fireEvent.focus(submenuTrigger);
+      fireEvent.keyDown(submenuTrigger, { key: openKey });
+
+      const submenuItems = await screen.findAllByRole('menuitem');
+      const submenuItem1 = submenuItems.find((item) => item.textContent === '2.1');
+
+      await waitFor(() => {
+        expect(submenuItem1).toHaveFocus();
+      });
+
+      submenuItems.forEach((item) => {
+        if (item === submenuItem1) {
+          expect(item).to.have.attribute('tabindex', '0');
+        } else {
+          expect(item).to.have.attribute('tabindex', '-1');
+        }
+      });
+
+      // Check that parent menu items are not active
+      const parentMenuItems = screen
+        .getAllByRole('menuitem')
+        .filter((item) => item.textContent !== '2.1' && item.textContent !== '2.2');
+      parentMenuItems.forEach((item) => {
+        expect(item).not.to.have.attribute('tabindex', '0');
+      });
+    });
+  });
+});