From 2ac73de27060e465fdfa2094aec917ed71c13263 Mon Sep 17 00:00:00 2001
From: Afsal K <makafsal@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:58:05 +0530
Subject: [PATCH] test(AboutModal): AVT test (#6063)

* test(aboutModal): avt test

* test(aboutModal): implement avt test
---
 .../AboutModal/AboutModal-test.avt.e2e.js     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/e2e/components/AboutModal/AboutModal-test.avt.e2e.js b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
index 78fe39a1b0..7e0044e546 100644
--- a/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
+++ b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
@@ -54,4 +54,71 @@ test.describe('AboutModal @avt', () => {
 
     await expect(closeButton).toBeFocused();
   });
+
+  test('@avt-open-close-with-focus-trap', async ({ page }) => {
+    await visitStory(page, {
+      component: 'AboutModal',
+      id: 'ibm-products-components-about-modal-aboutmodal--about-modal-with-all-props-set',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+
+    const modalElement = page.locator(`.${carbon.prefix}--modal`);
+    const openButton = page.getByText(
+      'Open the About modal with all props set'
+    );
+    const closeIcon = page.getByLabel('Close');
+    const linkActions = page.getByText('Link action');
+
+    // Focus the open button
+    await page.keyboard.press('Tab');
+    // Expect open button to be focused
+    await expect(openButton).toBeFocused();
+    // Open modal by pressing 'Enter' key
+    await page.keyboard.press('Enter');
+
+    // Opening modal
+    await modalElement.evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished)
+      )
+    );
+
+    await expect(page).toHaveNoACViolations(
+      'AboutModal @avt-open-close-with-focus-trap'
+    );
+
+    // Initial focus should be on close button
+    await expect(closeIcon).toBeFocused();
+    // Press tab to move focus to first link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.first()).toBeFocused();
+
+    // Press tab to move focus to second link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.nth(1)).toBeFocused();
+
+    // Press tab to move focus to last link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.last()).toBeFocused();
+
+    // Press tab to move focus back to close button
+    await page.keyboard.press('Tab');
+    await expect(closeIcon).toBeFocused();
+
+    // Press escape to twise
+    // first to close tooltip then close modal
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
+
+    // Opening modal
+    await modalElement.evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished)
+      )
+    );
+
+    await expect(modalElement).toHaveAttribute('aria-hidden', 'true');
+  });
 });