fix(client): completion modal cannot be closed using Escape key (#55431)

client/src/templates/Challenges/components/completion-modal.tsx

@@ -128,6 +128,10 @@ class CompletionModal extends Component<
   }
 
   handleKeypress(e: React.KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      this.props.close();
+    }
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
       // Since Hotkeys also listens to Ctrl + Enter we have to stop this event

e2e/completion-modal.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
+import { authedRequest } from './utils/request';
 
 const nextChallengeURL =
   '/learn/data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer';
@@ -33,6 +34,12 @@ test.describe('Challenge Completion Modal Tests (Signed Out)', () => {
     await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
   });
 
+  test('should close the modal after user presses escape', async ({ page }) => {
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).not.toBeVisible();
+  });
+
   test('should display the text of go to next challenge button accordingly based on device type', async ({
     page,
     isMobile,
@@ -96,6 +103,40 @@ test.describe('Challenge Completion Modal Tests (Signed In)', () => {
     await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
   });
 
+  test('should close the modal after user presses escape while having keyboard shortcuts disabled', async ({
+    page,
+    request
+  }) => {
+    await authedRequest({
+      request,
+      endpoint: 'update-my-keyboard-shortcuts',
+      method: 'put',
+      data: {
+        keyboardShortcuts: false
+      }
+    });
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).not.toBeVisible();
+  });
+
+  test('should close the modal after user presses escape while having keyboard shortcuts enabled', async ({
+    page,
+    request
+  }) => {
+    await authedRequest({
+      request,
+      endpoint: 'update-my-keyboard-shortcuts',
+      method: 'put',
+      data: {
+        keyboardShortcuts: true
+      }
+    });
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).toBeVisible();
+  });
+
   test('should display the text of go to next challenge button accordingly based on device type', async ({
     page,
     isMobile,