From 292ba665afe5940224b3902ec80d17eac94e1679 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 21 Jun 2021 18:15:41 +0200
Subject: [PATCH] Associate Switch labels with their respective switches

---
 ts/deckoptions/Label.svelte        |  5 ++++-
 ts/deckoptions/Switch.svelte       |  9 ++++++++-
 ts/deckoptions/SwitchRow.svelte    |  9 ++++++---
 ts/deckoptions/TooltipLabel.svelte | 10 +++++++---
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/ts/deckoptions/Label.svelte b/ts/deckoptions/Label.svelte
index 8fe22ce6e..ff8d78eb2 100644
--- a/ts/deckoptions/Label.svelte
+++ b/ts/deckoptions/Label.svelte
@@ -5,6 +5,9 @@
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
 
+    let forId: string;
+    export { forId as for };
+
     const dispatch = createEventDispatcher();
 
     let spanRef: HTMLSpanElement;
@@ -14,4 +17,4 @@
     });
 </script>
 
-<span bind:this={spanRef}><slot /></span>
+<label bind:this={spanRef} for={forId}><slot /></label>
diff --git a/ts/deckoptions/Switch.svelte b/ts/deckoptions/Switch.svelte
index e503e1f67..1117e1f62 100644
--- a/ts/deckoptions/Switch.svelte
+++ b/ts/deckoptions/Switch.svelte
@@ -3,12 +3,19 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    export let id: string | undefined;
     export let value: boolean;
     export let disabled = false;
 </script>
 
 <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" bind:checked={value} {disabled} />
+    <input
+        {id}
+        class="form-check-input"
+        type="checkbox"
+        bind:checked={value}
+        {disabled}
+    />
 </div>
 
 <style lang="scss">
diff --git a/ts/deckoptions/SwitchRow.svelte b/ts/deckoptions/SwitchRow.svelte
index abde604e3..cfd4a722d 100644
--- a/ts/deckoptions/SwitchRow.svelte
+++ b/ts/deckoptions/SwitchRow.svelte
@@ -13,15 +13,18 @@
     export let value: boolean;
     export let defaultValue: boolean;
     export let markdownTooltip: string | undefined = undefined;
+
+    const id = Math.random().toString(36).substring(2);
 </script>
 
 <Row>
     <Col>
-        {#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
-            >{:else}<Label><slot /></Label>{/if}
+        {#if markdownTooltip}<TooltipLabel for={id} {markdownTooltip}
+                ><slot /></TooltipLabel
+            >{:else}<Label for={id}><slot /></Label>{/if}
     </Col>
     <Col grow={false}>
-        <Switch bind:value />
+        <Switch {id} bind:value />
         <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/TooltipLabel.svelte b/ts/deckoptions/TooltipLabel.svelte
index 914b54404..f67f14132 100644
--- a/ts/deckoptions/TooltipLabel.svelte
+++ b/ts/deckoptions/TooltipLabel.svelte
@@ -10,12 +10,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Badge from "./Badge.svelte";
 
     export let markdownTooltip: string;
+    let forId: string;
+    export { forId as for };
 </script>
 
-<Label
-    ><slot /><WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip
+<span
+    ><Label for={forId}><slot /></Label><WithTooltip
+        tooltip={marked(markdownTooltip)}
+        let:createTooltip
         ><Badge on:mount={(event) => createTooltip(event.detail.span)}
             >{@html infoCircle}</Badge
         ></WithTooltip
-    ></Label
+    ></span
 >