Merge branch 'main' into dialogHeading

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');
+  });
 });