From eb444ab84965ae75de0df12e638cbc67ef325e9c Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 30 Nov 2023 00:38:37 +0100
Subject: [PATCH] Accessibility: small improvements to make keyboard navigation
 easier. See #1181

---
 src/UI/Popup/TagRendering/Questionbox.svelte   |  1 -
 .../TagRendering/TagRenderingEditable.svelte   |  4 ++--
 .../TagRendering/TagRenderingQuestion.svelte   | 18 ++++++++++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/UI/Popup/TagRendering/Questionbox.svelte b/src/UI/Popup/TagRendering/Questionbox.svelte
index ff789eb76..6a1bcf8e7 100644
--- a/src/UI/Popup/TagRendering/Questionbox.svelte
+++ b/src/UI/Popup/TagRendering/Questionbox.svelte
@@ -8,7 +8,6 @@
   import type { Feature } from "geojson";
   import type { SpecialVisualizationState } from "../../SpecialVisualization";
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
-  import If from "../../Base/If.svelte";
   import TagRenderingQuestion from "./TagRenderingQuestion.svelte";
   import Tr from "../../Base/Tr.svelte";
   import Translations from "../../i18n/Translations.js";
diff --git a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte
index 27d6f09c4..a8c583e68 100644
--- a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte
@@ -11,7 +11,7 @@
   import Translations from "../../i18n/Translations.js"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import { Utils } from "../../../Utils"
-
+  import { twMerge } from "tailwind-merge"
   export let config: TagRenderingConfig
   export let tags: UIEventSource<Record<string, string>>
   export let selectedElement: Feature | undefined
@@ -71,7 +71,7 @@
   }
 </script>
 
-<div bind:this={htmlElem} class={clss}>
+<div bind:this={htmlElem} class={twMerge(clss, "tr-"+config.id)}>
   {#if config.question && (!editingEnabled || $editingEnabled)}
     {#if editMode}
       <TagRenderingQuestion {config} {tags} {selectedElement} {state} {layer}>
diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index 94f28218f..ab918974e 100644
--- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -88,6 +88,9 @@
         // TODO this has _to much_ values
         freeformInput.setData(unseenFreeformValues.join(";"))
         checkedMappings.push(unseenFreeformValues.length > 0)
+        freeformInput.addCallbackAndRun(freeformValue => {
+          checkedMappings[checkedMappings.length - 1] = !!freeformValue
+        })
       }
     }
     if (confg.freeform?.key) {
@@ -168,6 +171,12 @@
       .then((changes) => state.changes.applyChanges(changes))
       .catch(console.error)
   }
+  
+  function onInputKeypress(e: Event){
+      if (e.key === "Enter") {
+        onSave();
+      }
+  } 
 
   let featureSwitchIsTesting = state?.featureSwitchIsTesting ?? new ImmutableStore(false)
   let featureSwitchIsDebugging =
@@ -254,9 +263,8 @@
               bind:group={selectedMapping}
               name={"mappings-radio-" + config.id}
               value={i}
-              on:keypress={(e) => {
-                if (e.key === "Enter") onSave()
-              }}
+              on:keypress={onInputKeypress}
+             
             />
           </TagRenderingMappingInput>
         {/each}
@@ -267,6 +275,7 @@
               bind:group={selectedMapping}
               name={"mappings-radio-" + config.id}
               value={config.mappings?.length}
+              on:keypress={onInputKeypress}
             />
             <FreeformInput
               {config}
@@ -298,6 +307,7 @@
               type="checkbox"
               name={"mappings-checkbox-" + config.id + "-" + i}
               bind:checked={checkedMappings[i]}
+              on:keypress={onInputKeypress}
             />
           </TagRenderingMappingInput>
         {/each}
@@ -307,6 +317,7 @@
               type="checkbox"
               name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
               bind:checked={checkedMappings[config.mappings.length]}
+              on:keypress={onInputKeypress}
             />
             <FreeformInput
               {config}
@@ -315,7 +326,6 @@
               {unit}
               feature={selectedElement}
               value={freeformInput}
-              on:selected={() => (checkedMappings[config.mappings.length] = true)}
               on:submit={onSave}
             />
           </label>