fix(vertical-menu-full-screen): ensure the call to action element is …

…focused on close

src/components/vertical-menu/components.test-pw.tsx

@@ -186,10 +186,11 @@ export const VerticalMenuTriggerCustom = (
   );
 };
 
-export const VerticalMenuFullScreenCustom = (
-  props: Partial<VerticalMenuFullScreenProps>,
-) => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+export const VerticalMenuFullScreenCustom = ({
+  isOpen = false,
+  ...props
+}: Partial<VerticalMenuFullScreenProps> & { isOpen?: boolean }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(isOpen);
 
   const fullscreenViewBreakPoint = useMediaQuery("(max-width: 1200px)");
 

src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx

@@ -61,6 +61,7 @@ export const VerticalMenuFullScreen = ({
     closeModal: handleKeyDown,
     modalRef: menuWrapperRef,
     topModalOverride: true,
+    focusCallToActionElement: document.activeElement as HTMLElement,
   });
 
   // TODO remove this as part of FE-5650

src/components/vertical-menu/vertical-menu.pw.tsx

@@ -20,6 +20,7 @@ import {
   checkGoldenOutline,
   assertCssValueIsApproximately,
   checkAccessibility,
+  waitForAnimationEnd,
 } from "../../../playwright/support/helper";
 import {
   verticalMenuComponent,
@@ -316,6 +317,44 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await expect(verticalMenuItem(page).first()).toBeVisible();
   });
 
+  test("when a Vertical Menu Fullscreen is opened and then closed, the call to action element should be focused", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<VerticalMenuFullScreenCustom />);
+
+    const item = page.getByRole("button").filter({ hasText: "Menu" });
+    await item.click();
+    const verticalMenuFulScreen = verticalMenuFullScreen(page);
+    await waitForAnimationEnd(verticalMenuFulScreen);
+    const closeButton = page.getByLabel("Close");
+    await closeButton.click();
+    await expect(item).toBeFocused();
+  });
+
+  test("when Vertical Menu Fullscreen is open on render, then closed, opened and then closed again, the call to action element should be focused", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<VerticalMenuFullScreenCustom isOpen />);
+
+    const verticalMenuFulScreen = verticalMenuFullScreen(page);
+    await waitForAnimationEnd(verticalMenuFulScreen);
+    await expect(verticalMenuFulScreen).toBeVisible();
+    const closeButton = page.getByLabel("Close");
+    await closeButton.click();
+
+    const item = page.getByRole("button").filter({ hasText: "Menu" });
+    await expect(item).not.toBeFocused();
+    await expect(verticalMenuFulScreen).not.toBeVisible();
+
+    await item.click();
+    await waitForAnimationEnd(verticalMenuFulScreen);
+    await expect(verticalMenuFulScreen).toBeVisible();
+    await closeButton.click();
+    await expect(item).toBeFocused();
+  });
+
   test(`should verify that Vertical Menu Fullscreen has no effect on the tab order when isOpen prop is false`, async ({
     mount,
     page,