@riebeckite/plugin-lightbox 0.0.13 → 0.0.14

package/dist/client.js

@@ -5,6 +5,7 @@ function createDialog() {
   element.setAttribute("role", "dialog");
   element.setAttribute("aria-modal", "true");
   element.setAttribute("aria-label", "画像の拡大表示");
+  element.tabIndex = -1;
   element.setAttribute("hidden", "");
   const frame = document.createElement("figure");
   frame.className = "rr-lightbox__frame";
@@ -73,7 +74,12 @@ function initLightbox(root = document, options = {}) {
     }
   };
   const handleKeyDown = (event) => {
-    if (dialog.element.hidden || event.key !== "Escape") return;
+    if (dialog.element.hidden) return;
+    if (event.key === "Tab") {
+      trapFocus(event, dialog.element);
+      return;
+    }
+    if (event.key !== "Escape") return;
     event.preventDefault();
     close();
   };
@@ -93,6 +99,33 @@ function initLightbox(root = document, options = {}) {
     for (const trigger of wrappedTriggers) unwrapImage(trigger);
   };
 }
+function trapFocus(event, container) {
+  const focusableElements = getFocusableElements(container);
+  if (focusableElements.length === 0) {
+    event.preventDefault();
+    container.focus();
+    return;
+  }
+  const first = focusableElements[0];
+  const last = focusableElements[focusableElements.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && active === first) {
+    event.preventDefault();
+    last.focus();
+    return;
+  }
+  if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
 function wrapImages(root, triggerClass) {
   const images = Array.from(
     root.querySelectorAll("img[src]")

package/dist/index.js

@@ -86,6 +86,7 @@ function createDialog() {
   element.setAttribute("role", "dialog");
   element.setAttribute("aria-modal", "true");
   element.setAttribute("aria-label", "画像の拡大表示");
+  element.tabIndex = -1;
   element.setAttribute("hidden", "");
   const frame = document.createElement("figure");
   frame.className = "rr-lightbox__frame";
@@ -151,7 +152,12 @@ function initLightbox(root = document, options = {}) {
     }
   };
   const handleKeyDown = (event) => {
-    if (dialog.element.hidden || event.key !== "Escape") return;
+    if (dialog.element.hidden) return;
+    if (event.key === "Tab") {
+      trapFocus(event, dialog.element);
+      return;
+    }
+    if (event.key !== "Escape") return;
     event.preventDefault();
     close();
   };
@@ -171,6 +177,33 @@ function initLightbox(root = document, options = {}) {
     for (const trigger of wrappedTriggers) unwrapImage(trigger);
   };
 }
+function trapFocus(event, container) {
+  const focusableElements = getFocusableElements(container);
+  if (focusableElements.length === 0) {
+    event.preventDefault();
+    container.focus();
+    return;
+  }
+  const first = focusableElements[0];
+  const last = focusableElements[focusableElements.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && active === first) {
+    event.preventDefault();
+    last.focus();
+    return;
+  }
+  if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter((element) => !element.hasAttribute("disabled"));
+}
 function wrapImages(root, triggerClass) {
   const images = Array.from(
     root.querySelectorAll("img[src]")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-lightbox",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.13"
+    "@riebeckite/core": "0.0.14"
   },
   "publishConfig": {
     "access": "public"
@@ -56,6 +56,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }