Create Accessible Checkboxes

src/lib/components/checkbox.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  export let label: string;
+  export let value: string;
+  export let group: string[];
+  export let checked = false;
+
+  $: updateChekbox(group);
+  $: updateGroup(checked);
+
+  function updateChekbox(group: string[]) {
+    checked = group.indexOf(value) >= 0;
+  }
+
+  function updateGroup(checked: boolean) {
+    const index = group.indexOf(value);
+    if (checked) {
+      if (index < 0) {
+        group.push(value);
+        group = group;
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+        group = group;
+      }
+    }
+  }
+</script>
+
+<div class="flex items-center">
+  <input
+    bind:checked
+    {value}
+    id={label}
+    class="absolute cursor-pointer opacity-0"
+    type="checkbox"
+  />
+  <label for={label} class="flex cursor-pointer items-center whitespace-nowrap">{label}</label>
+</div>
+
+<style lang="postcss">
+  label::before {
+    @apply mr-2 h-4 w-4 rounded-sm border border-gray-500;
+    content: '';
+  }
+
+  label:hover::before,
+  input[type='checkbox']:hover + label::before {
+    @apply cursor-pointer;
+  }
+
+  input[type='checkbox']:focus + label::before {
+    @apply ring-2 ring-blue-500;
+  }
+
+  input[type='checkbox']:checked + label::before {
+    @apply flex items-center justify-center bg-skin-primary text-white;
+    content: '\002713';
+  }
+</style>

src/lib/components/filter.svelte

@@ -1,26 +1,21 @@
 <script lang="ts">
   import { selectedLabels } from '$lib/stores/selected-labels.store';
+  import Checkbox from './checkbox.svelte';
   export let tags: string[];
   let selection: string[] = [];
 
+  $: tags = tags.sort((a, b) => a.localeCompare(b));
+
   $: selection, run();
   const run = () => {
     selectedLabels.set(selection);
   };
 </script>
 
-<div class="mt-4 text-center">
+<ul class="mt-8 grid w-full grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
   {#each tags as tag}
-    <input class="hidden" value={tag} bind:group={selection} type="checkbox" id={tag} />
-    <label
-      class="my-1 mr-2 inline-block cursor-pointer select-none rounded-xl border-[1px] border-gray-500 py-1 px-2 text-sm transition-all duration-200"
-      for={tag}>{@html tag}</label
-    >
+    <li>
+      <Checkbox bind:group={selection} label={tag} value={tag} />
+    </li>
   {/each}
-</div>
-
-<style lang="postcss">
-  input:checked + label {
-    @apply border-skin-primary bg-skin-primary text-white;
-  }
-</style>
+</ul>

src/routes/+page.svelte

@@ -80,7 +80,6 @@
     </div>
   </div>
   <Search bind:searchTerm={searchString} on:keyup={() => performSearch()} />
-
   <Filter tags={githubData.labels} />
 </div>
 {#if intersectedArray.length > 0}

src/routes/api/get-issues/+server.ts

@@ -65,11 +65,11 @@ export const POST: RequestHandler = async ({ request }) => {
     },
   );
   const labels = search.edges.map((el) => el.node.labels.edges.map((label) => label.node.name));
-  const merged = [].concat(...labels);
-  const labelSet = new Set<string>(merged);
-  const normalizedLabels: string[] = Array.from(labelSet);
-
-  const returnBody = { ...search, ...{ labels: normalizedLabels } };
+  const merged = labels.reduce((acc, val) => {
+    return acc.concat(val);
+  });
+  const uniqueLabels = [...new Set(merged)];
+  const returnBody = { ...search, ...{ labels: uniqueLabels } };
 
   return json$1(returnBody, { status: 200 });
 };