From 664f34489d2dcbac54b69417dd3e8d3e11569ea6 Mon Sep 17 00:00:00 2001
From: bonartm <17472848+bonartm@users.noreply.github.com>
Date: Thu, 4 Nov 2021 13:05:14 +0100
Subject: [PATCH] enable keyboard navigation #15

---
 src/components/ChoiceView.svelte | 59 ++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/components/ChoiceView.svelte b/src/components/ChoiceView.svelte
index 7219beb..bbc6dcc 100644
--- a/src/components/ChoiceView.svelte
+++ b/src/components/ChoiceView.svelte
@@ -3,34 +3,41 @@
     export let question: BaseQuestion;
 </script>
 
-{#if question.quizType === 'MultipleChoice'}
-    {#each question.answers as answer, i}
-        <label>
-            <input
-                type="checkbox"
-                bind:group="{question.selected}"
-                value="{i}"
-            />
-            <span>{@html answer.html}</span>
-        </label>
-    {/each}
-{:else}
-    {#each question.answers as answer, i}
-        <label>
-            <input
-                type="radio"
-                bind:group="{question.selected[0]}"
-                value="{i}"
-            />
-            <span>{@html answer.html}</span>
-        </label>
-    {/each}
-{/if}
+<fieldset>
+    {#if question.questionType === 'MultipleChoice'}
+        {#each question.answers as answer, i}
+            <label>
+                <input
+                    type="checkbox"
+                    bind:group="{question.selected}"
+                    value="{i}"
+                />
+                <span>{@html answer.html}</span>
+            </label>
+        {/each}
+    {:else}
+        {#each question.answers as answer, i}
+            <label>
+                <input
+                    type="radio"
+                    bind:group="{question.selected[0]}"
+                    value="{i}"
+                />
+                <span>{@html answer.html}</span>
+            </label>
+        {/each}
+    {/if}
+</fieldset>
 
 <style>
+    fieldset {
+        border: 0;
+    }
+
     [type='checkbox'],
     [type='radio'] {
-        display: none;
+        position: absolute;
+        opacity: 0;
     }
 
     [type='radio'] + span {
@@ -54,7 +61,9 @@
     }
 
     [type='checkbox']:hover + span,
-    [type='radio']:hover + span {
+    [type='checkbox']:focus + span,
+    [type='radio']:hover + span,
+    [type='radio']:focus + span {
         filter: brightness(0.9);
     }