@projektemacher/storymapjs 0.10.7 → 0.11.0

package/src/slider/SlideNav.ts

@@ -1,9 +1,10 @@
-import { mergeData } from "../core/Util";
+import { mergeData, prefersReducedMotion } from "../core/Util";
 import { DomMixed, Evented, type EventedInstance } from "../core/mixins";
 import Dom from "../dom/Dom";
-import Animate from "morpheus";
+import Animate from "../animation/tween";
 import { DomEvent } from "../dom/DomEvent";
 import { Browser } from "../core/Browser";
+import { sanitizeSlideText } from "../media/EmbedUtil";
 import { AnimateOptions, AnimationHandle } from "../types";
 /*	SlideNav
 	Navigation for Slideshows
@@ -21,6 +22,13 @@ interface SlideNavOptions {
     [key: string]: unknown;
 }
 
+export interface SlideNavEvents {
+    clicked: SlideNavOptions;
+    loaded: SlideNavData;
+    added: SlideNavData;
+    removed: SlideNavData;
+}
+
 class SlideNavBase {
     declare "_el": Record<string, HTMLElement>;
     declare "mediatype": unknown;
@@ -28,7 +36,7 @@ class SlideNavBase {
     declare "options": SlideNavOptions;
     declare "animator": AnimationHandle | null;
     declare "animator_position": AnimationHandle | null;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<SlideNavEvents>["fire"];
 
     //_el: {},
 
@@ -111,7 +119,7 @@ class SlideNavBase {
         return_to_default: boolean,
     ) {
         const ani: AnimateOptions = {
-            duration: duration,
+            duration: prefersReducedMotion() ? 0 : duration,
             easing: ease,
             complete: () => {
                 this._onUpdatePositionComplete(return_to_default);
@@ -169,18 +177,27 @@ class SlideNavBase {
         // update data
         this.data = mergeData(this.data, d);
 
-        // Title
+        // Title and date are the slide's own headline/date — sanitized like
+        // the slide body. They were the reachable twin of an already-sanitized
+        // field: a hostile headline executed as soon as a nav arrow rendered.
         if (this.data.title !== "") {
-            this._el.title.innerHTML = this.data.title;
+            this._el.title.replaceChildren(sanitizeSlideText(this.data.title));
         }
 
         // Date
-        if (this.data.date !== "") {
-            this._el.description.innerHTML = this.data.description;
+        if (this.data.date) {
+            this._el.description.replaceChildren(sanitizeSlideText(this.data.date));
         }
     }
 
     _initLayout() {
+        // Accessibility (issue #385 wave): the nav container is operable by
+        // keyboard — focusable, announced as a button, Enter/Space activate
+        this._el.container.setAttribute("role", "button");
+        this._el.container.setAttribute("tabindex", "0");
+        const label = this.options.direction === "next" ? "Next slide" : "Previous slide";
+        this._el.container.setAttribute("aria-label", label);
+
         // Create Layout
         this._el.content_container = Dom.create(
             "div",
@@ -188,6 +205,7 @@ class SlideNavBase {
             this._el.container,
         );
         this._el.icon = Dom.create("div", "vco-slidenav-icon", this._el.content_container);
+        this._el.icon.setAttribute("aria-hidden", "true");
         this._el.title = Dom.create("div", "vco-slidenav-title", this._el.content_container);
         this._el.description = Dom.create(
             "div",
@@ -202,10 +220,37 @@ class SlideNavBase {
 
     _initEvents() {
         DomEvent.addListener(this._el.container, "click", this._onMouseClick, this);
+        DomEvent.addListener(this._el.container, "keydown", this._onKeyDown, this);
+    }
+
+    _onKeyDown(e: Event) {
+        const key = (e as KeyboardEvent).key;
+        if (key === "Enter" || key === " " || key === "Spacebar") {
+            e.preventDefault();
+            this._onMouseClick();
+        }
+    }
+
+    /**
+     * Release the listeners and the position animation. Called by
+     * `StorySlider.dispose()`; the nav must not be used afterwards.
+     */
+    dispose() {
+        if (this.animator_position) {
+            this.animator_position.stop();
+            this.animator_position = null;
+        }
+        DomEvent.removeListener(this._el.container, "click", this._onMouseClick, this);
+        DomEvent.removeListener(this._el.container, "keydown", this._onKeyDown, this);
+        this._el.container.remove();
     }
 }
 
-export default class SlideNav extends DomMixed(Evented(SlideNavBase)) {
+const EventedSlideNavBase = Evented<SlideNavEvents, typeof SlideNavBase>(SlideNavBase);
+
+export default class SlideNav extends DomMixed<SlideNavEvents, typeof EventedSlideNavBase>(
+    EventedSlideNavBase,
+) {
     constructor(...args: ConstructorParameters<typeof SlideNavBase>) {
         super(...args);
     }