From 5ed392a2d4358dec1312b0796cfa5d12507c1668 Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 20:52:44 -0400
Subject: [PATCH] fix: template literal quotes in fetch calls; a11y roles on
 drag elements

---
 src/routes/admin/+page.svelte | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 246c5fa..c694f1a 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -115,7 +115,7 @@
     dragGroupId = null;
     dragOverGroupId = null;
     // Persist
-    fetch('${api}/order', {
+    fetch(`${api}/order`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ groups: groups.map((g) => g.id) })
@@ -169,7 +169,7 @@
     // Build ordered IDs for this group
     const groupKey = groupId ?? 'null';
     const groupUnitIds = units.filter((u) => (u.group ?? null) === groupId).map((u) => u.id);
-    fetch('${api}/order', {
+    fetch(`${api}/order`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ units: { [groupKey]: groupUnitIds } })
@@ -185,8 +185,8 @@
   // ── Load data ────────────────────────────────────────────────────────────────
   async function loadData() {
     const [res, gres] = await Promise.all([
-      fetch('${api}/units'),
-      fetch('${api}/groups')
+      fetch(`${api}/units`),
+      fetch(`${api}/groups`)
     ]);
     if (!res.ok) return;
     const units: Unit[] = await res.json();
@@ -291,7 +291,7 @@
       }
       try {
         const res = unitFormNew
-          ? await fetch('${api}/units', {
+          ? await fetch(`${api}/units`, {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(unitForm)
@@ -322,7 +322,7 @@
       }
       try {
         const res = groupFormNew
-          ? await fetch('${api}/groups', {
+          ? await fetch(`${api}/groups`, {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(groupForm)
@@ -459,7 +459,7 @@
     }
     try {
       const res = unitFormNew
-        ? await fetch('${api}/units', {
+        ? await fetch(`${api}/units`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(unitForm)
@@ -509,7 +509,7 @@
     }
     try {
       const res = groupFormNew
-        ? await fetch('${api}/groups', {
+        ? await fetch(`${api}/groups`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(groupForm)
@@ -666,6 +666,7 @@
       <div
         class="tree-group"
         class:drag-over-group={dragOverGroupId === group.id}
+        role="listitem"
         draggable="true"
         ondragstart={(e) => onGroupDragStart(e, group.id)}
         ondragover={(e) => onGroupDragOver(e, group.id)}
@@ -713,6 +714,7 @@
                 class="tree-unit-row"
                 class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
                 class:drag-over-unit={dragOverUnitId === unit.id}
+                role="listitem"
                 draggable="false"
                 ondragover={(e) => onUnitDragOver(e, unit.id, unit.group ?? null)}
                 ondragleave={() => onUnitDragLeave(unit.id)}
@@ -721,6 +723,8 @@
                 <!-- Drag handle -->
                 <span
                   class="drag-handle"
+                  role="button"
+                  tabindex="0"
                   draggable="true"
                   ondragstart={(e) => onUnitDragStart(e, unit.id, unit.group ?? null)}
                   ondragend={onUnitDragEnd}
@@ -769,12 +773,15 @@
               class="tree-unit-row"
               class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
               class:drag-over-unit={dragOverUnitId === unit.id}
+              role="listitem"
               ondragover={(e) => onUnitDragOver(e, unit.id, null)}
               ondragleave={() => onUnitDragLeave(unit.id)}
               ondrop={(e) => onUnitDrop(e, unit.id, null)}
             >
               <span
                 class="drag-handle"
+                role="button"
+                tabindex="0"
                 draggable="true"
                 ondragstart={(e) => onUnitDragStart(e, unit.id, null)}
                 ondragend={onUnitDragEnd}