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();

server/public/styles.css

@@ -395,10 +395,17 @@
 
 .u-nav .tree-caret,
 .u-nav .tree-label {
+  appearance: none;
   background: transparent;
   border: 0;
   border-radius: 6px;
+  box-shadow: none;
+  cursor: pointer;
+  letter-spacing: normal !important;
+  margin: 0 !important;
   min-height: 26px;
+  text-transform: none !important;
+  user-select: none;
 }
 
 .u-nav .tree-caret {
@@ -406,6 +413,7 @@
   display: inline-flex;
   flex: 0 0 24px;
   justify-content: center;
+  line-height: 1;
   padding: 0;
   width: 24px;
 }
@@ -415,7 +423,8 @@
   width: 13px;
 }
 
-.u-nav .tree-caret:disabled {
+.u-nav .tree-caret.disabled {
+  cursor: default;
   opacity: 0.22;
 }
 
@@ -424,11 +433,12 @@
   color: inherit;
   display: flex;
   flex: 1;
+  font: 500 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
   gap: 5px !important;
   justify-content: flex-start !important;
   min-width: 0;
   overflow: hidden;
-  padding: 0 5px 0 2px;
+  padding: 0 5px 0 0 !important;
   text-align: left !important;
 }
 
@@ -443,6 +453,12 @@
   border-color: transparent;
 }
 
+.u-nav .tree-label:focus-visible,
+.u-nav .tree-caret:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
+  outline-offset: -2px;
+}
+
 .u-nav .tree-label.drop-target {
   background: var(--accent-soft);
   box-shadow: inset 0 0 0 1px var(--accent);