Isolate compact folder tree controls

server/public/app.js

@@ -456,13 +456,13 @@ function renderTreeBranch(win, path, label, level) {
   return `
     <div class="tree-branch">
       <div class="tree-row ${active ? 'active' : ''}" style="--tree-level:${level}">
-        <button class="tree-caret" data-tree-toggle="${escapeAttr(path)}" title="${expanded ? 'Zuklappen' : 'Aufklappen'}" aria-label="${expanded ? 'Zuklappen' : 'Aufklappen'}" ${mayExpand ? '' : 'disabled'}>
+        <span class="tree-caret ${mayExpand ? '' : 'disabled'}" ${mayExpand ? `data-tree-toggle="${escapeAttr(path)}" tabindex="0" role="button"` : ''} title="${expanded ? 'Zuklappen' : 'Aufklappen'}" aria-label="${expanded ? 'Zuklappen' : 'Aufklappen'}" aria-disabled="${mayExpand ? 'false' : 'true'}">
           ${loading ? '<span class="tree-spinner"></span>' : iconSvg(expanded ? 'chevronDown' : 'chevronRight')}
-        </button>
-        <button class="tree-label" data-tree-open="${escapeAttr(path)}" title="${escapeAttr(path)}">
+        </span>
+        <span class="tree-label" data-tree-open="${escapeAttr(path)}" title="${escapeAttr(path)}" tabindex="0" role="button">
           <span class="tree-folder">${iconSvg('folder')}</span>
           <span>${escapeHtml(label)}</span>
-        </button>
+        </span>
       </div>
       ${childMarkup}
     </div>
@@ -476,6 +476,7 @@ function bindFolderTree(body, win) {
   });
   for (const button of body.querySelectorAll('[data-tree-open]')) {
     button.addEventListener('click', () => loadExplorer(win, button.dataset.treeOpen));
+    bindTreeKeyboard(button);
   }
   for (const button of body.querySelectorAll('[data-tree-toggle]')) {
     button.addEventListener('click', async () => {
@@ -491,9 +492,18 @@ function bindFolderTree(body, win) {
       win.data.treeExpanded = [...expanded];
       await loadTreeChildren(win, path);
     });
+    bindTreeKeyboard(button);
   }
 }
 
+function bindTreeKeyboard(element) {
+  element.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    element.click();
+  });
+}
+
 function startTreeResize(event, win, body) {
   if (event.button !== 0) return;
   event.preventDefault();