From e85183b6f1c2963850faf62af8da39a90adbe8d0 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 17 Jan 2023 09:18:27 +0100
Subject: [PATCH] Attempt to make context menu more accessible

---
 frontend/src/components/contextmenu.svelte | 65 +++++++++++++++++-----
 1 file changed, 51 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/contextmenu.svelte b/frontend/src/components/contextmenu.svelte
index ae4e266..cd7c736 100644
--- a/frontend/src/components/contextmenu.svelte
+++ b/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">
-    {#each items as item}
-      {#if item.separator}
-        <hr />
-      {:else}
-        <li>
-          <button class="item" on:click={() => click(item.fn)}>
-            {item.label}
-          </button>
-        </li>
-      {/if}
-    {/each}
-  </ul>
+  <nav>
+    <ul class="contextmenu" role="" style:left="{position[0]}px" style:top="{position[1]}px">
+      {#each items as item, index}
+        {#if item.separator}
+          <hr />
+        {:else}
+          <li>
+            <button
+              class="item"
+              class:selected={selected === index}
+              bind:this={buttons[index]}
+              on:mouseenter={() => selected = index}
+              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;
   }