Isolate compact folder tree controls

build-plugin.sh

@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="2026.07.14.r014"
+VERSION="2026.07.14.r015"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"

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>
+        </span>
-        <button class="tree-label" data-tree-open="${escapeAttr(path)}" title="${escapeAttr(path)}">
+        <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);

u-navigator.plg

@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "Michael Roll">
-<!ENTITY version "2026.07.14.r014">
+<!ENTITY version "2026.07.14.r015">
 <!ENTITY package "&name;-&version;.tgz">
 <!ENTITY pluginURL "https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
 <!ENTITY support "https://git.casaderoll.de/michael/Unraid-Navigator">
@@ -24,7 +24,7 @@
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>b4fd1637ca533afc55dbff96903fc53a</MD5>
+<MD5>e7bd64a4dda7a5915d9ef73657dec517</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">