Make edit panel work without dialog support

claims/templates/claims/dashboard.html

@@ -302,8 +302,12 @@
                 </div>
             {% endif %}
             {% if can_change %}
-                <dialog class="w-full max-w-2xl rounded-3xl border-0 bg-white p-6 text-left shadow-2xl"
+                <div class="fixed inset-0 z-40 hidden items-center justify-center bg-slate-900/80 p-4"
-                        data-edit-dialog="{{ claim.id }}">
+                     data-edit-panel="{{ claim.id }}"
+                     aria-hidden="true"
+                     role="dialog"
+                     aria-modal="true">
+                    <div class="w-full max-w-2xl rounded-3xl bg-white p-6 text-left shadow-2xl">
                         <div class="flex items-center justify-between">
                             <div>
                                 <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera utlägg" %}</p>
@@ -370,7 +374,8 @@
                                 {% trans "Aktivera JavaScript för att kunna redigera uppgifter direkt här." %}
                             </p>
                         </noscript>
-                </dialog>
+                    </div>
+                </div>
             {% endif %}
         </div>
 
@@ -425,32 +430,51 @@
         </aside>
     </div>
 </section>
-<style>
-    dialog[data-edit-dialog]::backdrop {
-        background-color: rgba(15, 23, 42, 0.75);
-    }
-</style>
 <script>
 document.addEventListener("DOMContentLoaded", () => {
     const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]"));
     const cards = Array.from(document.querySelectorAll("[data-claim-card]"));
     const emptyState = document.querySelector("[data-claim-empty]");
     const editButtons = Array.from(document.querySelectorAll("[data-open-edit]"));
-    const dialogs = Array.from(document.querySelectorAll("[data-edit-dialog]"));
+    const panels = Array.from(document.querySelectorAll("[data-edit-panel]"));
+
+    const openPanel = (id) => {
+        const panel = document.querySelector(`[data-edit-panel="${id}"]`);
+        if (!panel) return;
+        panel.classList.remove("hidden");
+        panel.classList.add("flex");
+        panel.setAttribute("aria-hidden", "false");
+    };
+
+    const closePanel = (panel) => {
+        panel.classList.add("hidden");
+        panel.classList.remove("flex");
+        panel.setAttribute("aria-hidden", "true");
+    };
+
     editButtons.forEach((button) => {
-        button.addEventListener("click", () => {
+        button.addEventListener("click", () => openPanel(button.dataset.openEdit));
-            const dialog = document.querySelector(`[data-edit-dialog="${button.dataset.openEdit}"]`);
+    });
-            if (dialog && typeof dialog.showModal === "function") {
+
-                dialog.showModal();
+    panels.forEach((panel) => {
-            } else if (dialog) {
+        panel.addEventListener("click", (event) => {
-                dialog.setAttribute("open", "open");
+            if (event.target === panel) {
+                closePanel(panel);
             }
         });
+        panel.querySelectorAll("[data-close-edit]").forEach((btn) => {
+            btn.addEventListener("click", () => closePanel(panel));
         });
-    dialogs.forEach((dialog) => {
-        dialog.querySelectorAll("[data-close-edit]").forEach((btn) => {
-            btn.addEventListener("click", () => dialog.close());
     });
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+            panels.forEach((panel) => {
+                if (!panel.classList.contains("hidden")) {
+                    closePanel(panel);
+                }
+            });
+        }
     });
 
     if (!filterButtons.length || !cards.length) {