Close image modals with Escape (#415)

e2e/specs/content-rendering.spec.ts

@@ -142,6 +142,15 @@ test("US-062 see images and video inline", async ({seed, as}) => {
 
   await expect(lightbox).toBeVisible()
 
+  await page.keyboard.press("Escape")
+
+  await expect(page.locator(".dialog")).toHaveCount(0)
+  await expect(inlineImage).toBeVisible()
+
+  await inlineImage.click()
+
+  await expect(lightbox).toBeVisible()
+
   await lightbox.click()
 
   await expect(page.locator(".dialog")).toHaveCount(0)

e2e/specs/people.spec.ts

@@ -590,6 +590,14 @@ test("US-080 preview a profile from anywhere", async ({seed, as}) => {
   await expect(dialog(page).getByText("Deckhand, dockside cook")).toBeVisible()
   await expect(dialog(page).getByText(/Last active/)).toBeVisible()
 
+  await page.keyboard.press("Escape")
+
+  await expect(page.locator(".dialog")).toHaveCount(0)
+  await expect(page).toHaveURL(new RegExp(`${spacePath(url)}/directory$`))
+  await expect(preview).toBeVisible()
+
+  await preview.click()
+
   await dialog(page).getByRole("button", {name: "Go back"}).click()
 
   // Closed, and alice is exactly where she opened it from.

src/app/components/ModalContainer.svelte

@@ -10,8 +10,14 @@
     }
   }
 
-  const onKeyDown = (e: any) => {
+  const onKeyDown = (event: KeyboardEvent) => {
-    if (e.code === "Escape" && e.target === document.body) {
+    const target = event.target
+
+    if (
+      event.code === "Escape" &&
+      target instanceof Element &&
+      !target.closest("input, textarea, [contenteditable]")
+    ) {
       closeModal()
     }
   }