Add accessibility wiring for modals

js/ui/components/EditModal.js

@@ -1,4 +1,5 @@
 import { extractMagnetHints, normalizeAndAugmentMagnet } from "../../magnet.js";
+import { createModalAccessibility } from "./modalAccessibility.js";
 import { Nip71FormManager } from "./nip71FormManager.js";
 
 export class EditModal {
@@ -54,6 +55,7 @@ export class EditModal {
       container: null,
       buttons: [],
     };
+    this.modalAccessibility = null;
 
     this.activeVideo = null;
     this.isVisible = false;
@@ -124,6 +126,7 @@ export class EditModal {
       this.root = modal;
 
       this.cacheElements(modal);
+      this.setupModalAccessibility();
       if (!this.eventsBound) {
         this.bindEvents();
         this.eventsBound = true;
@@ -189,6 +192,23 @@ export class EditModal {
     this.nip71FormManager.registerSection(this.nip71SectionKey, nip71Context);
   }
 
+  setupModalAccessibility() {
+    if (!this.root) {
+      return;
+    }
+
+    if (this.modalAccessibility?.destroy) {
+      this.modalAccessibility.destroy();
+    }
+
+    this.modalAccessibility = createModalAccessibility({
+      root: this.root,
+      panel: this.panel || this.root,
+      backdrop: this.overlay || this.root,
+      onRequestClose: () => this.close({ emitCancel: true }),
+    });
+  }
+
   bindEvents() {
     if (this.form) {
       this.form.addEventListener("submit", (event) => {
@@ -349,7 +369,7 @@ export class EditModal {
     this.setSubmitState({ pending: false });
   }
 
-  async open(video) {
+  async open(video, { triggerElement } = {}) {
     await this.load();
 
     if (!video) {
@@ -395,20 +415,23 @@ export class EditModal {
     this.activeVideo = editContext;
 
     if (this.root) {
-      this.root.classList.remove("hidden");
-      this.root.setAttribute("aria-hidden", "false");
+      const wasHidden = this.root.classList.contains("hidden");
+      if (wasHidden) {
+        this.root.classList.remove("hidden");
+        this.root.setAttribute("aria-hidden", "false");
+        this.setGlobalModalState("editVideo", true);
+        const focusTarget =
+          this.form?.querySelector("[data-initial-focus]") ||
+          this.panel ||
+          this.root;
+        window.requestAnimationFrame(() => {
+          if (typeof focusTarget?.focus === "function") {
+            focusTarget.focus();
+          }
+        });
+      }
       this.isVisible = true;
-      this.setGlobalModalState("editVideo", true);
-
-      const focusTarget =
-        this.form?.querySelector("[data-initial-focus]") ||
-        this.panel ||
-        this.root;
-      window.requestAnimationFrame(() => {
-        if (typeof focusTarget?.focus === "function") {
-          focusTarget.focus();
-        }
-      });
+      this.modalAccessibility?.activate({ triggerElement });
     }
 
     return true;
@@ -554,6 +577,7 @@ export class EditModal {
       this.root.setAttribute("aria-hidden", "true");
     }
     this.isVisible = false;
+    this.modalAccessibility?.deactivate();
     this.setGlobalModalState("editVideo", false);
     const cancelledVideo = this.activeVideo;
     this.reset();
@@ -992,4 +1016,11 @@ export class EditModal {
       this.submitButton.removeAttribute("disabled");
     }
   }
+
+  destroy() {
+    if (this.modalAccessibility?.destroy) {
+      this.modalAccessibility.destroy();
+    }
+    this.modalAccessibility = null;
+  }
 }