@riebeckite/plugin-lightbox 0.0.13 → 0.0.15

package/README.md

@@ -36,6 +36,8 @@ the app calls on page initialization.
 - Adds `rr-lightbox-image` to the image
 - Skips images that have `data-lightbox-ignore="true"`, and images already
   inside an `<a>`, `<button>`, existing trigger, or the dialog
+- Uses `expandLabel` (default `"Expand image"`) for the trigger and dialog
+  accessible labels
 
 ### Client (`initLightbox`)
 
@@ -54,9 +56,11 @@ the app calls on page initialization.
 | Option | Type | Default | Description |
 | ------ | ---- | ------- | ----------- |
 | `selectorClass` | `string` | `"rr-lightbox-trigger"` | Trigger class (build and client) |
+| `expandLabel` | `string` | `"Expand image"` | Accessible label for triggers and the dialog |
+| `closeLabel` | `string` | `"Close"` | Accessible label for the dialog close button |
 | `autoWrapImages` | `boolean` | `true` | Client-only: wrap unhandled images on init |
 
-`LightboxOptions` = `{ selectorClass? }` (build),
+`LightboxOptions` = `{ selectorClass?, expandLabel?, closeLabel? }` (build),
 `LightboxInitOptions` = `LightboxOptions & { autoWrapImages? }` (client).
 
 ## Exports
@@ -65,8 +69,11 @@ the app calls on page initialization.
 - `rehypeLightbox(options?)` — rehype transform
 - `initLightbox(root?, options?)` — client initializer, returns a cleanup
   function
+- `initLightboxFromOptions(options?)` — option-first browser entry the plugin's
+  client script calls; wraps `initLightbox`
 - Types: `LightboxOptions`, `LightboxInitOptions`
 
 ## See also
 
-- [Plugin guide](../../../docs/en/reference/plugin-api.md)
+- [Plugin guide](../../../docs/en/docs/reference/plugin-api.md)
+

package/README_ja.md

@@ -30,6 +30,8 @@ export default defineConfig({
 | オプション | 型 | 既定値 | 内容 |
 | --- | --- | --- | --- |
 | `selectorClass` | `string` | `"rr-lightbox-trigger"` | トリガーに使う CSS クラス |
+| `expandLabel` | `string` | `"Expand image"` | トリガーとダイアログのアクセシブルラベル |
+| `closeLabel` | `string` | `"Close"` | 閉じるボタンのアクセシブルラベル |
 | `autoWrapImages` | `boolean` | `true` | 初期化時に未処理の画像も囲むか。クライアント側だけの設定 |
 
 `initLightbox()` はイベントリスナー、ダイアログ、追加したトリガーを解除する cleanup 関数を返します。
@@ -39,8 +41,10 @@ export default defineConfig({
 - `lightboxPlugin(options?)` — プラグインファクトリ
 - `rehypeLightbox(options?)` — Rehype 変換
 - `initLightbox(root?, options?)` — ブラウザ初期化関数
+- `initLightboxFromOptions(options?)` — プラグインのクライアントスクリプトが呼ぶ、オプションを先に取る初期化関数
 - `LightboxOptions`、`LightboxInitOptions` — 型
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
+- [プラグインシステム](../../../docs/ja/docs/reference/plugin-api.md)
+

package/dist/client.d.ts

@@ -1 +1,3 @@
+import type { LightboxInitOptions } from "./src/types.js";
 export { initLightbox } from "./src/init.js";
+export declare function initLightboxFromOptions(options?: LightboxInitOptions): () => void;

package/dist/client.js

@@ -1,10 +1,11 @@
 // src/dialog.ts
-function createDialog() {
+function createDialog(options) {
   const element = document.createElement("div");
   element.className = "rr-lightbox";
   element.setAttribute("role", "dialog");
   element.setAttribute("aria-modal", "true");
-  element.setAttribute("aria-label", "画像の拡大表示");
+  element.setAttribute("aria-label", options.expandLabel);
+  element.tabIndex = -1;
   element.setAttribute("hidden", "");
   const frame = document.createElement("figure");
   frame.className = "rr-lightbox__frame";
@@ -16,7 +17,7 @@ function createDialog() {
   const closeButton = document.createElement("button");
   closeButton.className = "rr-lightbox__close";
   closeButton.type = "button";
-  closeButton.setAttribute("aria-label", "閉じる");
+  closeButton.setAttribute("aria-label", options.closeLabel);
   closeButton.textContent = "×";
   frame.appendChild(image);
   frame.appendChild(caption);
@@ -27,11 +28,15 @@ function createDialog() {
 
 // src/types.ts
 var DEFAULT_TRIGGER_CLASS = "rr-lightbox-trigger";
+var DEFAULT_EXPAND_LABEL = "Expand image";
+var DEFAULT_CLOSE_LABEL = "Close";
 
 // src/init.ts
 function initLightbox(root = document, options = {}) {
   const triggerClass = options.selectorClass ?? DEFAULT_TRIGGER_CLASS;
-  const wrappedTriggers = options.autoWrapImages === false ? [] : wrapImages(root, triggerClass);
+  const expandLabel = options.expandLabel ?? DEFAULT_EXPAND_LABEL;
+  const closeLabel = options.closeLabel ?? DEFAULT_CLOSE_LABEL;
+  const wrappedTriggers = options.autoWrapImages === false ? [] : wrapImages(root, triggerClass, expandLabel);
   const triggers = Array.from(
     root.querySelectorAll(`.${triggerClass}`)
   );
@@ -41,7 +46,7 @@ function initLightbox(root = document, options = {}) {
     };
   }
   let previouslyFocused = null;
-  const dialog = createDialog();
+  const dialog = createDialog({ expandLabel, closeLabel });
   document.body.appendChild(dialog.element);
   const open = (trigger) => {
     const src = trigger.dataset.lightboxSrc ?? trigger.href;
@@ -73,7 +78,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,7 +103,34 @@ function initLightbox(root = document, options = {}) {
     for (const trigger of wrappedTriggers) unwrapImage(trigger);
   };
 }
-function wrapImages(root, triggerClass) {
+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, expandLabel) {
   const images = Array.from(
     root.querySelectorAll("img[src]")
   );
@@ -112,7 +149,7 @@ function wrapImages(root, triggerClass) {
     trigger.dataset.lightboxAlt = image.alt;
     trigger.setAttribute(
       "aria-label",
-      image.alt ? `画像を拡大表示: ${image.alt}` : "画像を拡大表示"
+      image.alt ? `${expandLabel}: ${image.alt}` : expandLabel
     );
     image.parentNode?.insertBefore(trigger, image);
     trigger.appendChild(image);
@@ -127,6 +164,12 @@ function unwrapImage(trigger) {
   trigger.parentNode.insertBefore(image, trigger);
   trigger.remove();
 }
+
+// client.ts
+function initLightboxFromOptions(options = {}) {
+  return initLightbox(document, options);
+}
 export {
-  initLightbox
+  initLightbox,
+  initLightboxFromOptions
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import type { LightboxOptions } from "./src/types.js";
+import { type LightboxOptions } from "./src/types.js";
+export { initLightboxFromOptions } from "./client.js";
 export { initLightbox } from "./src/init.js";
 export { rehypeLightbox } from "./src/rehype.js";
 export type { LightboxInitOptions, LightboxOptions } from "./src/types.js";

package/dist/index.js

@@ -38,10 +38,13 @@ function getChildren(node) {
 
 // src/types.ts
 var DEFAULT_TRIGGER_CLASS = "rr-lightbox-trigger";
+var DEFAULT_EXPAND_LABEL = "Expand image";
+var DEFAULT_CLOSE_LABEL = "Close";
 
 // src/rehype.ts
 function rehypeLightbox(options = {}) {
   const triggerClass = options.selectorClass ?? DEFAULT_TRIGGER_CLASS;
+  const expandLabel = options.expandLabel ?? DEFAULT_EXPAND_LABEL;
   return (tree) => {
     visitElements(tree, (node, parent, index) => {
       if (!parent || index === void 0 || node.tagName !== "img") return;
@@ -63,7 +66,7 @@ function rehypeLightbox(options = {}) {
           href: src,
           dataLightboxSrc: src,
           dataLightboxAlt: alt,
-          ariaLabel: alt ? `画像を拡大表示: ${alt}` : "画像を拡大表示"
+          ariaLabel: alt ? `${expandLabel}: ${alt}` : expandLabel
         },
         children: [
           {
@@ -80,12 +83,13 @@ function rehypeLightbox(options = {}) {
 }
 
 // src/dialog.ts
-function createDialog() {
+function createDialog(options) {
   const element = document.createElement("div");
   element.className = "rr-lightbox";
   element.setAttribute("role", "dialog");
   element.setAttribute("aria-modal", "true");
-  element.setAttribute("aria-label", "画像の拡大表示");
+  element.setAttribute("aria-label", options.expandLabel);
+  element.tabIndex = -1;
   element.setAttribute("hidden", "");
   const frame = document.createElement("figure");
   frame.className = "rr-lightbox__frame";
@@ -97,7 +101,7 @@ function createDialog() {
   const closeButton = document.createElement("button");
   closeButton.className = "rr-lightbox__close";
   closeButton.type = "button";
-  closeButton.setAttribute("aria-label", "閉じる");
+  closeButton.setAttribute("aria-label", options.closeLabel);
   closeButton.textContent = "×";
   frame.appendChild(image);
   frame.appendChild(caption);
@@ -109,7 +113,9 @@ function createDialog() {
 // src/init.ts
 function initLightbox(root = document, options = {}) {
   const triggerClass = options.selectorClass ?? DEFAULT_TRIGGER_CLASS;
-  const wrappedTriggers = options.autoWrapImages === false ? [] : wrapImages(root, triggerClass);
+  const expandLabel = options.expandLabel ?? DEFAULT_EXPAND_LABEL;
+  const closeLabel = options.closeLabel ?? DEFAULT_CLOSE_LABEL;
+  const wrappedTriggers = options.autoWrapImages === false ? [] : wrapImages(root, triggerClass, expandLabel);
   const triggers = Array.from(
     root.querySelectorAll(`.${triggerClass}`)
   );
@@ -119,7 +125,7 @@ function initLightbox(root = document, options = {}) {
     };
   }
   let previouslyFocused = null;
-  const dialog = createDialog();
+  const dialog = createDialog({ expandLabel, closeLabel });
   document.body.appendChild(dialog.element);
   const open = (trigger) => {
     const src = trigger.dataset.lightboxSrc ?? trigger.href;
@@ -151,7 +157,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,7 +182,34 @@ function initLightbox(root = document, options = {}) {
     for (const trigger of wrappedTriggers) unwrapImage(trigger);
   };
 }
-function wrapImages(root, triggerClass) {
+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, expandLabel) {
   const images = Array.from(
     root.querySelectorAll("img[src]")
   );
@@ -190,7 +228,7 @@ function wrapImages(root, triggerClass) {
     trigger.dataset.lightboxAlt = image.alt;
     trigger.setAttribute(
       "aria-label",
-      image.alt ? `画像を拡大表示: ${image.alt}` : "画像を拡大表示"
+      image.alt ? `${expandLabel}: ${image.alt}` : expandLabel
     );
     image.parentNode?.insertBefore(trigger, image);
     trigger.appendChild(image);
@@ -206,20 +244,35 @@ function unwrapImage(trigger) {
   trigger.remove();
 }
 
+// client.ts
+function initLightboxFromOptions(options = {}) {
+  return initLightbox(document, options);
+}
+
 // index.ts
 function lightboxPlugin(options = {}) {
   return definePlugin({
     name: "lightbox",
+    processedContentCache: {
+      version: "lightbox-v2",
+      dependencyMode: "none"
+    },
     options,
     extendHtmlPipeline: (pipeline) => {
       pipeline.use(rehypeLightbox, options);
     },
     assets: [createStyleAsset("lightbox")],
-    clientEntries: [createClientEntry("lightbox", "initLightbox")]
+    clientEntries: [
+      createClientEntry("lightbox", "initLightboxFromOptions", {
+        expandLabel: options.expandLabel ?? DEFAULT_EXPAND_LABEL,
+        closeLabel: options.closeLabel ?? DEFAULT_CLOSE_LABEL
+      })
+    ]
   });
 }
 export {
   initLightbox,
+  initLightboxFromOptions,
   lightboxPlugin,
   rehypeLightbox
 };

package/dist/src/dialog.d.ts

@@ -1,4 +1,7 @@
-export declare function createDialog(): {
+export declare function createDialog(options: {
+    expandLabel: string;
+    closeLabel: string;
+}): {
     element: HTMLDivElement;
     image: HTMLImageElement;
     caption: HTMLElement;

package/dist/src/types.d.ts

@@ -10,8 +10,12 @@ export type HastNode = ElementNode | {
 };
 export type LightboxOptions = {
     selectorClass?: string;
+    expandLabel?: string;
+    closeLabel?: string;
 };
 export type LightboxInitOptions = LightboxOptions & {
     autoWrapImages?: boolean;
 };
 export declare const DEFAULT_TRIGGER_CLASS = "rr-lightbox-trigger";
+export declare const DEFAULT_EXPAND_LABEL = "Expand image";
+export declare const DEFAULT_CLOSE_LABEL = "Close";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-lightbox",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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.15"
   },
   "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\""
   }
 }