enhanced nav tree

src/lib/components/nav-item.svelte

@@ -1,4 +1,29 @@
-<li><slot /></li>
+<script lang="ts">
+  import { pane, type Pane } from '$lib/stores/nav';
+
+  export let destination: Pane;
+
+  function handleKey({ key }: KeyboardEvent) {
+    if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
+      navigate();
+    }
+  }
+
+  function navigate() {
+    pane.set(destination);
+  }
+</script>
+
+<li
+  aria-controls="nav-tree"
+  aria-selected={$pane === destination}
+  role="tab"
+  tabindex="0"
+  on:click={navigate}
+  on:keyup={handleKey}
+>
+  <slot />
+</li>
 
 <style lang="less">
   li {

src/lib/components/nav-tree.svelte

@@ -1,5 +1,5 @@
 <nav>
-  <ul>
+  <ul id="nav-tree" role="tablist">
     <slot />
   </ul>
 </nav>