Attempt to make context menu more accessible

frontend/src/components/contextmenu.svelte

@@ -5,6 +5,8 @@
   export let position = undefined;
 
   const dispatch = createEventDispatcher();
+  let selected = -1;
+  const buttons = [];
 
   function close() {
     dispatch('close');
@@ -14,23 +16,58 @@
     fn?.();
     close();
   }
+
+  function keydown(evt) {
+    if (evt.key === 'Escape') {
+      close();
+      return;
+    }
+    else if (!items?.length) {
+      return;
+    }
+
+    let delta = 0;
+    (evt.key === 'ArrowDown') && delta++;
+    (evt.key === 'ArrowUp') && delta--;
+
+    selected += delta;
+    if (selected >= items.length) {
+      selected = 0;
+    }
+    else if (items[selected].separator) {
+      selected += delta;
+    }
+
+    buttons[selected]?.focus?.();
+  }
 </script>
 
+<svelte:window on:keydown={keydown} />
+
 {#if items && position}
   <div class="backdrop" on:pointerdown={close}></div>
-  <ul class="contextmenu" role="" style:left="{position[0]}px" style:top="{position[1]}px">
+  <nav>
-    {#each items as item}
+    <ul class="contextmenu" role="" style:left="{position[0]}px" style:top="{position[1]}px">
-      {#if item.separator}
+      {#each items as item, index}
-        <hr />
+        {#if item.separator}
-      {:else}
+          <hr />
-        <li>
+        {:else}
-          <button class="item" on:click={() => click(item.fn)}>
+          <li>
-            {item.label}
+            <button
-          </button>
+              class="item"
-        </li>
+              class:selected={selected === index}
-      {/if}
+              bind:this={buttons[index]}
-    {/each}
+              on:mouseenter={() => selected = index}
-  </ul>
+              on:mouseleave={() => selected = -1}
+              on:click={() => click(item.fn)}
+            >
+              {item.label}
+            </button>
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  </nav>
 {/if}
 
 <style>
@@ -58,7 +95,7 @@
     width: 100%;
     text-align: left;
   }
-  button:hover {
+  button.selected {
     background-color: #00008b;
     color: #fff;
   }