feat(client): close vite-error-overlay with Escape key (#13795)

Author: chaejunlee

packages/vite/src/client/overlay.ts

@@ -140,6 +140,7 @@ const codeframeRE = /^(?:>?\s+\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm
 const { HTMLElement = class {} as typeof globalThis.HTMLElement } = globalThis
 export class ErrorOverlay extends HTMLElement {
   root: ShadowRoot
+  closeOnEsc: (e: KeyboardEvent) => void
 
   constructor(err: ErrorPayload['err'], links = true) {
     super()
@@ -171,9 +172,18 @@ export class ErrorOverlay extends HTMLElement {
     this.root.querySelector('.window')!.addEventListener('click', (e) => {
       e.stopPropagation()
     })
+
     this.addEventListener('click', () => {
       this.close()
     })
+
+    this.closeOnEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' || e.code === 'Escape') {
+        this.close()
+      }
+    }
+
+    document.addEventListener('keydown', this.closeOnEsc)
   }
 
   text(selector: string, text: string, linkFiles = false): void {
@@ -201,9 +211,9 @@ export class ErrorOverlay extends HTMLElement {
       }
     }
   }
-
   close(): void {
     this.parentNode?.removeChild(this)
+    document.removeEventListener('keydown', this.closeOnEsc)
   }
 }
 

playground/html/__tests__/html.spec.ts

@@ -245,6 +245,26 @@ describe.runIf(isServe)('invalid', () => {
     expect(message).toMatch(/^Unable to parse HTML/)
   })
 
+  test('should close overlay when clicked away', async () => {
+    await page.goto(viteTestUrl + '/invalid.html')
+    const errorOverlay = await page.waitForSelector('vite-error-overlay')
+    expect(errorOverlay).toBeTruthy()
+
+    await page.click('html')
+    const isVisbleOverlay = await errorOverlay.isVisible()
+    expect(isVisbleOverlay).toBeFalsy()
+  })
+
+  test('should close overlay when escape key is pressed', async () => {
+    await page.goto(viteTestUrl + '/invalid.html')
+    const errorOverlay = await page.waitForSelector('vite-error-overlay')
+    expect(errorOverlay).toBeTruthy()
+
+    await page.keyboard.press('Escape')
+    const isVisbleOverlay = await errorOverlay.isVisible()
+    expect(isVisbleOverlay).toBeFalsy()
+  })
+
   test('should reload when fixed', async () => {
     await page.goto(viteTestUrl + '/invalid.html')
     await editFile('invalid.html', (content) => {