Accessibility: small improvements to make keyboard navigation easier. See #1181

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";

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}>

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) {
@@ -169,6 +172,12 @@
       .catch(console.error)
   }
   
+  function onInputKeypress(e: Event){
+      if (e.key === "Enter") {
+        onSave();
+      }
+  } 
+
   let featureSwitchIsTesting = state?.featureSwitchIsTesting ?? new ImmutableStore(false)
   let featureSwitchIsDebugging =
     state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
@@ -254,9 +263,8 @@
               bind:group={selectedMapping}
               name={"mappings-radio-" + config.id}
               value={i}
-              on:keypress={(e) => {
+              on:keypress={onInputKeypress}
-                if (e.key === "Enter") onSave()
+             
-              }}
             />
           </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>