From f336a342286e23b00c480142f21690a22fc3b739 Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Wed, 11 Dec 2024 16:45:26 +0000
Subject: [PATCH] fix(vertical-menu-full-screen): ensure the call to action
 element is focused on close

---
 .../vertical-menu/components.test-pw.tsx      |  9 +++--
 .../vertical-menu-full-screen.component.tsx   |  1 +
 .../vertical-menu/vertical-menu.pw.tsx        | 39 +++++++++++++++++++
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/vertical-menu/components.test-pw.tsx b/src/components/vertical-menu/components.test-pw.tsx
index 450730ed32..e1ce6a1c74 100644
--- a/src/components/vertical-menu/components.test-pw.tsx
+++ b/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)");
 
diff --git a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx b/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx
index c3aab8cee9..214c3e3ef8 100644
--- a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx
+++ b/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
diff --git a/src/components/vertical-menu/vertical-menu.pw.tsx b/src/components/vertical-menu/vertical-menu.pw.tsx
index cd85830f48..e30c546f30 100644
--- a/src/components/vertical-menu/vertical-menu.pw.tsx
+++ b/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,