Add delay before keyboard/click events to ensure event listeners are attached

Author: kylecarbs

src/components/Modal.stories.tsx

@@ -205,6 +205,9 @@ export const EscapeKeyCloses: Story = {
     const modal = document.querySelector('[role="dialog"]');
     await expect(modal).toBeInTheDocument();
 
+    // Wait for modal to be fully mounted and event listeners attached
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
     // Press Escape key
     await userEvent.keyboard("{Escape}");
 
@@ -243,6 +246,9 @@ export const OverlayClickCloses: Story = {
     const modal = document.querySelector('[role="dialog"]');
     await expect(modal).toBeInTheDocument();
 
+    // Wait for modal to be fully mounted and event listeners attached
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
     // Click on overlay (role="presentation")
     const overlay = document.querySelector('[role="presentation"]');
     await expect(overlay).toBeInTheDocument();