asdfg

js/ui_layout_dialogs.js

@@ -1,5 +1,77 @@
 "use strict";
 
+const managedDialogOrigins = new WeakMap();
+
+function managedDialogFocusable(dialog) {
+  if (!dialog) return [];
+  return [...dialog.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')]
+    .filter(el => !el.hidden && el.getClientRects().length > 0);
+}
+
+function openManagedDialog(dialog, opener = document.activeElement) {
+  if (!dialog) return;
+  if (opener instanceof HTMLElement && !dialog.contains(opener)) managedDialogOrigins.set(dialog, opener);
+  if (!dialog.hasAttribute("tabindex")) dialog.tabIndex = -1;
+  dialog.classList.remove("hidden");
+  dialog.setAttribute("aria-hidden", "false");
+  requestAnimationFrame(() => {
+    const focusables = managedDialogFocusable(dialog);
+    (focusables[0] || dialog).focus?.({ preventScroll: true });
+  });
+}
+
+function closeManagedDialog(dialog) {
+  if (!dialog) return;
+  dialog.classList.add("hidden");
+  dialog.setAttribute("aria-hidden", "true");
+  const origin = managedDialogOrigins.get(dialog);
+  managedDialogOrigins.delete(dialog);
+  if (origin?.isConnected) requestAnimationFrame(() => origin.focus?.({ preventScroll: true }));
+}
+
+function managedDialogVisible(dialog) {
+  if (!dialog || dialog.hidden || dialog.getAttribute("aria-hidden") === "true") return false;
+  if (dialog.classList.contains("hidden") || dialog.closest(".hidden")) return false;
+  return dialog.getClientRects().length > 0;
+}
+
+function topVisibleDialog() {
+  const dialogs = [...document.querySelectorAll('[role="dialog"], [role="alertdialog"]')].filter(managedDialogVisible);
+  return dialogs[dialogs.length - 1] || null;
+}
+
+document.addEventListener("keydown", (event) => {
+  const dialog = topVisibleDialog();
+  if (!dialog) return;
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    dialog.dispatchEvent(new CustomEvent("tarinai:dialog-close-request"));
+    return;
+  }
+  if (event.key !== "Tab") return;
+  const focusables = managedDialogFocusable(dialog);
+  if (!focusables.length) {
+    event.preventDefault();
+    dialog.focus?.();
+    return;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  } else if (!dialog.contains(document.activeElement)) {
+    event.preventDefault();
+    first.focus();
+  }
+}, true);
+
+window.TarinaiManagedDialogs = Object.freeze({ open: openManagedDialog, close: closeManagedDialog });
+
 function resizeCanvas() {
   const rect = canvas.getBoundingClientRect();
   const perfScale = window.TarinaiPerf.dprScale();
@@ -68,11 +140,11 @@ function openFieldDialog() {
   uiCache.resetFieldType = FIELD_TYPES?.[world?.fieldType]?.id || uiCache.resetFieldType || "garden";
   uiCache.resetPreset = normalizeResetPresetId(uiCache.resetPreset || "default");
   syncFieldDialogChoices();
-  ui.fieldDialog?.classList.remove("hidden");
+  openManagedDialog(ui.fieldDialog);
 }
 
 function closeFieldDialog() {
-  ui.fieldDialog?.classList.add("hidden");
+  closeManagedDialog(ui.fieldDialog);
 }
 
 function hydrateLazyImages(root) {
@@ -96,19 +168,19 @@ function renderEcologyCards() {
 function openEcologyDialog() {
   renderEcologyCards();
   hydrateLazyImages(ui.ecologyDialog);
-  ui.ecologyDialog?.classList.remove("hidden");
+  openManagedDialog(ui.ecologyDialog);
 }
 
 function closeEcologyDialog() {
-  ui.ecologyDialog?.classList.add("hidden");
+  closeManagedDialog(ui.ecologyDialog);
 }
 
 function openArchiveResetDialog() {
-  ui.archiveResetDialog?.classList.remove("hidden");
+  openManagedDialog(ui.archiveResetDialog);
 }
 
 function closeArchiveResetDialog() {
-  ui.archiveResetDialog?.classList.add("hidden");
+  closeManagedDialog(ui.archiveResetDialog);
 }
 
 function resetWithField(fieldType, presetId = uiCache.resetPreset || "default") {