From b0f48a9e924b05b2a92421d7b5531e1d79838f89 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 17 Sep 2025 18:09:29 -0500
Subject: [PATCH] CORE-1247: close dialogs by pressing Escape

[CORE-1247]
---
 src/app/components/dialog/dialog.tsx | 14 ++++++++++++++
 test/src/components/dialog.test.tsx  | 11 +++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/app/components/dialog/dialog.tsx b/src/app/components/dialog/dialog.tsx
index d132b9030..fb6182641 100644
--- a/src/app/components/dialog/dialog.tsx
+++ b/src/app/components/dialog/dialog.tsx
@@ -11,6 +11,20 @@ function PutAway({
     noTitle?: boolean;
     onClick?: () => void;
 }) {
+    React.useEffect(() => {
+        if (onClick) {
+            const closeOnEsc = (event: KeyboardEvent) => {
+                if (event.key === 'Escape') {
+                    onClick();
+                }
+            };
+
+            document.addEventListener('keydown', closeOnEsc);
+            return () => document.removeEventListener('keydown', closeOnEsc);
+        }
+        return () => null;
+    }, [onClick]);
+
     return (
         <button
             className={cn('put-away', {'no-title-bar': noTitle})}
diff --git a/test/src/components/dialog.test.tsx b/test/src/components/dialog.test.tsx
index a8415f583..256c6fca7 100644
--- a/test/src/components/dialog.test.tsx
+++ b/test/src/components/dialog.test.tsx
@@ -31,6 +31,17 @@ describe('components/dialog', () => {
 
         await user.click(pa);
     });
+    it('pressing Escape is the same as pressing close button', async () => {
+        render(<Component />);
+        const b = screen.getByRole('button');
+
+        await user.click(b);
+        await screen.findByRole('button', {name: 'close'});
+        await userEvent.type(document.body, '{Enter}');
+        expect(screen.queryByRole('button', {name: 'close'})).toBeTruthy();
+        await userEvent.type(document.body, '{Escape}');
+        expect(screen.queryByRole('button', {name: 'close'})).not.toBeTruthy();
+    });
     it('Handles nonmodal and no put-away', async () => {
         render(<Component showPutAway={false} modal={false} />);
         const b = screen.getByRole('button');