From 3a9e9f55d3060b3b966571f4c239d9b431a351ec Mon Sep 17 00:00:00 2001
From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Sat, 28 Dec 2024 14:48:35 -0500
Subject: [PATCH] Add more keyboard handling to KeyValue widget

---
 .../widgets/key-value/key-value-editor.svelte | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte b/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte
index 8da86468..01926c9b 100644
--- a/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte
+++ b/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte
@@ -169,32 +169,41 @@
     <tbody>
       {#each pairs as pair, index}
         <tr bind:this={rowElements[index]}>
-          <td>
+          <td class="key">
             <TextInput
               {readonly}
               flex
               bind:value={pair[0]}
               invalid={!!validations[index]}
+              aria-label={keyLabel}
               aria-errormessage={validations[index] ? `${fieldId}-kv-error` : undefined}
               oninput={() => {
                 edited[index] = true;
               }}
+              onkeydown={(event) => {
+                // Move focus with Enter key
+                if (event.key === 'Enter' && !event.isComposing) {
+                  /** @type {HTMLInputElement} */ (
+                    rowElements[index].querySelector('td.value input')
+                  )?.focus();
+                }
+              }}
             />
           </td>
-          <td>
+          <td class="value">
             <TextInput
               {readonly}
               flex
               bind:value={pair[1]}
+              aria-label={valueLabel}
               onkeydown={(event) => {
-                // Add new pair with Enter key
-                if (
-                  !event.isComposing &&
-                  event.key === 'Enter' &&
-                  index === pairs.length - 1 &&
-                  pairs.length < max
-                ) {
-                  addPair();
+                // Move focus or add a new pair with Enter key
+                if (event.key === 'Enter' && !event.isComposing) {
+                  if (index < pairs.length - 1) {
+                    rowElements[index + 1].querySelector('input')?.focus();
+                  } else if (pairs.length < max) {
+                    addPair();
+                  }
                 }
               }}
             />