Merge pull request #1227 from marekdedic/html-dialog

Using HTML dialog element for image view
marekdedic · Feb 3, 2025 · 97d145b · 97d145b
2 parents 1b2d685 + b867656
commit 97d145b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/lib/container.css b/src/lib/container.css
@@ -1,12 +1,11 @@
 #ilb-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- inset is not supported by all browsers */
-  top: 0;
+  border: none;
+  height: 100%;
+  margin: 0;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100%;
   opacity: 0;
-  z-index: 9998;
 }
 
 .ilb-overlay {

diff --git a/src/lib/container.ts b/src/lib/container.ts
@@ -1,7 +1,8 @@
 import "./container.css";
 
-const container = document.createElement("div");
+const container = document.createElement("dialog");
 container.setAttribute("id", "ilb-container");
+document.body.appendChild(container);
 
 let wrappedOnclick: ((e: Event) => void) | null = null;
 
@@ -12,7 +13,7 @@ export function addContainerToDOM(
 ): void {
   container.classList.remove("ilb-overlay");
   document.body.classList.add("ilb-body");
-  document.body.appendChild(container);
+  container.showModal();
   if (attachOnclick) {
     wrappedOnclick = (e): void => {
       e.stopPropagation();
@@ -31,7 +32,7 @@ export function darkenOverlay(): void {
   container.classList.add("ilb-overlay");
 }
 
-export function getContainer(): HTMLDivElement {
+export function getContainer(): HTMLDialogElement {
   return container;
 }
 
@@ -40,7 +41,7 @@ export function removeContainerFromDOM(): void {
     container.removeEventListener("click", wrappedOnclick);
     container.removeEventListener("touchend", wrappedOnclick);
   }
-  container.remove();
+  container.close();
   container.textContent = "";
   document.body.classList.remove("ilb-body");
 }

diff --git a/tests/navigation.spec.ts b/tests/navigation.spec.ts
@@ -86,6 +86,23 @@ test("can be controlled with keyboard", async ({ page }) => {
   await expect(page.locator("#ilb-image")).toBeHidden();
 });
 
+test("captures keyboard focus", async ({ page }) => {
+  await page.goto("/");
+  await page.keyboard.press("Tab");
+  await page.keyboard.press("Tab");
+  await page.keyboard.press("Tab");
+  await page.keyboard.press("Tab");
+  await page.keyboard.press("Enter");
+  await expect(page.locator("#ilb-image")).toBeVisible();
+  await expect(page.locator("#ilb-image")).toHaveAttribute(
+    "src",
+    "images/demo1.jpg",
+  );
+  await page.keyboard.press("Tab");
+  await page.keyboard.press("Enter");
+  await expect(page.locator("#ilb-image")).toBeHidden();
+});
+
 test("can be controlled with arrows", async ({ page }) => {
   await page.goto("/");
   await page.getByTestId("quit").getByRole("link").first().click();