fix: harden admin UX and accessibility

app/static/admin.js

@@ -40,18 +40,26 @@
     if (!document.querySelector("[data-directory-table]")) return;
     let columns = readColumns();
     const modal = document.querySelector("[data-columns-modal]");
+    const trigger = document.querySelector("[data-columns-open]");
     applyColumns(columns);
 
-    document.querySelectorAll("[data-columns-open]").forEach((button) => {
-      button.addEventListener("click", () => {
-        modal.hidden = false;
-      });
+    trigger.addEventListener("click", () => {
+      modal.showModal();
+      trigger.setAttribute("aria-expanded", "true");
+      modal.querySelector("input")?.focus();
     });
     document.querySelectorAll("[data-columns-close]").forEach((button) => {
       button.addEventListener("click", () => {
-        modal.hidden = true;
+        modal.close();
       });
     });
+    modal.addEventListener("click", (event) => {
+      if (event.target === modal) modal.close();
+    });
+    modal.addEventListener("close", () => {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.focus();
+    });
     document.querySelectorAll("[data-column-toggle]").forEach((checkbox) => {
       checkbox.addEventListener("change", () => {
         columns = Array.from(document.querySelectorAll("[data-column-toggle]:checked")).map((item) => item.value);
@@ -62,25 +70,6 @@
     });
   }
 
-  function setupClickableRows() {
-    const openRow = (row) => {
-      window.location.href = row.dataset.rowHref;
-    };
-
-    document.querySelectorAll("[data-row-href]").forEach((row) => {
-      row.addEventListener("click", (event) => {
-        if (event.target.closest("a, button, input, select, label")) return;
-        openRow(row);
-      });
-      row.addEventListener("keydown", (event) => {
-        if (!["Enter", " "].includes(event.key)) return;
-        if (event.target.closest("a, button, input, select, label")) return;
-        event.preventDefault();
-        openRow(row);
-      });
-    });
-  }
-
   function setupProgress() {
     const panel = document.querySelector("[data-progress-panel]");
     if (!panel) return;
@@ -94,6 +83,7 @@
       const errors = document.querySelector("[data-progress-errors]");
       const fill = document.querySelector("[data-progress-fill]");
       const percent = document.querySelector("[data-progress-percent]");
+      const error = document.querySelector("[data-progress-error]");
       if (status) status.textContent = run.status_display || run.status;
       if (processed) processed.textContent = run.processed_count;
       if (found) found.textContent = run.found_count;
@@ -101,17 +91,24 @@
       if (errors) errors.textContent = run.error_count;
       if (fill) fill.style.width = `${run.progress_percent}%`;
       if (percent) percent.textContent = run.progress_percent;
+      if (fill) {
+        fill.parentElement.setAttribute("aria-valuenow", run.progress_percent);
+        fill.parentElement.setAttribute("aria-valuetext", `${run.progress_percent}%`);
+      }
+      if (error) error.hidden = true;
     };
 
     const poll = async () => {
       try {
         const response = await fetch("/api/crawl-runs/latest", { credentials: "same-origin" });
-        if (!response.ok) return false;
+        if (!response.ok) throw new Error("progress request failed");
         const data = await response.json();
         const run = data.running || data.latest;
         update(run);
         return Boolean(data.running);
       } catch (_error) {
+        const error = document.querySelector("[data-progress-error]");
+        if (error) error.hidden = false;
         return false;
       }
     };
@@ -123,6 +120,5 @@
   }
 
   setupColumns();
-  setupClickableRows();
   setupProgress();
 })();