diff --git a/client/src/templates/Challenges/components/completion-modal.tsx b/client/src/templates/Challenges/components/completion-modal.tsx index 9394248098f..fc47764ed02 100644 --- a/client/src/templates/Challenges/components/completion-modal.tsx +++ b/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 diff --git a/e2e/completion-modal.spec.ts b/e2e/completion-modal.spec.ts index 05b242faef4..60fc38d50e8 100644 --- a/e2e/completion-modal.spec.ts +++ b/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,