Feature/localstorage statekeeper (#11)

* init * added event dispatcher / change handler * added exemplary usage * Add slot support to checkbox component * Add stored-input component * Update checkbox component to use value instead of checked * Update +page.svelte to use StoredInput component for auto-tests checkbox * Refactor +page.svelte to use StoredInput component for auto-tests checkbox * added ignore * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor stored-checkbox.svelte to wrap Checkbox component in StoredInput * Refactor checkbox.svelte and stored-checkbox.svelte components * Refactor +page.svelte to remove duplicate h1 tag * Refactor +page.svelte to use StoredCheckbox component for auto-tests checkbox and add label slot * Refactor checkbox and stored-checkbox components, and update +page.svelte to use StoredCheckbox component for auto-tests checkbox * Refactor stored-checkbox.svelte to fix named slot issue * Remove deprecated checkbox component --------- Co-authored-by: Vincent G <> Co-authored-by: Willy Woitas <[email protected]>
Neofonie · May 2, 2024 · b610771 · b610771
1 parent 4f93ab4
commit b610771
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,4 +11,5 @@ vite.config.ts.timestamp-*
 # intellij
 /.idea/
 # env
-.ghsecrets
+.ghsecrets
+bak/
diff --git a/src/lib/components/checkbox.svelte b/src/lib/components/checkbox.svelte
@@ -1,21 +1,35 @@
-<script type="ts">
-    export let test = "456";
+<!-- checkbox.svelte -->
+<script lang="ts">
+  export let label: string = "";
+  export let value: boolean = false;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange() {
+    value = !value;
+    dispatch("change", { checked: value });
+  }
 </script>
 
+<div class="checkbox">
+  <input type="checkbox" bind:checked={value} on:click={handleChange} />
+  {#if label}
+    <label for="checkbox">{label}</label>
+  {:else}
+    <slot />
+  {/if}
+
+  <div class="checkbox slot">
+    <slot name="named" />
+  </div>
+</div>
+
 <style>
-    .checkbox {
-      &.slot {
-        background: red;
-      }
+  .checkbox {
+    &.slot {
+      background: red;
+    }
     }
 </style>
-
-<label class="checkbox">
-    <input type="checkbox" />
-    {test}
-    <div><slot /></div>
-
-    <div class="checkbox slot">
-    <slot name="named" />
-    </div>
-</label>
diff --git a/src/lib/components/stored-checkbox.svelte b/src/lib/components/stored-checkbox.svelte
@@ -0,0 +1,18 @@
+<!-- stored-checkbox.svelte -->
+<script>
+  import Checkbox from "./checkbox.svelte";
+  import StoredInput from "./stored-input.svelte";
+
+  export let key = "";
+  export let label = "";
+</script>
+
+<div>
+  <StoredInput {key} let:value let:handleChange>
+    <Checkbox {value} on:change={handleChange} {label}>
+      <slot></slot>
+      <div slot="named"><slot name="named" /></div>
+    </Checkbox>
+
+  </StoredInput>
+</div>
diff --git a/src/lib/components/stored-input.svelte b/src/lib/components/stored-input.svelte
@@ -0,0 +1,23 @@
+<!-- StoredInput.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let key: string;
+
+  let value = false;
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      value = localStorage.getItem(key) === 'true';
+    }
+  });
+
+  function handleChange(event: CustomEvent) {
+    value = event.detail.checked;
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(key, value ? 'true' : 'false');
+    }
+  }
+</script>
+
+<slot {value} {handleChange}></slot>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
-<script type="ts">
-    import Checkbox from '$lib/components/checkbox.svelte';;
-    import Github from '$lib/components/github.svelte';
+<script lang="ts">
+  import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+  import Github from "$lib/components/github.svelte";
 </script>
 
 <svelte:head>
@@ -12,14 +12,33 @@
 
 <Github/>
 
-<h1>Test Accessibility „A11y“ (11 stehen für 11 Buchstaben ergo eine abkürzung)</h1>
+<h1>
+  Test Accessibility „A11y“ (11 stehen für 11 Buchstaben ergo eine abkürzung)
+</h1>
 
-<p>Diese Checkliste wird von unseren Entwicklern genutzt um eine gewisse Barriere-Freiheit für unsere Endkunden zu gewährleisten.
-Jede Komponente/Seite sollte gegen diese Checkliste geprüft werden.</p>
+<p>
+  Diese Checkliste wird von unseren Entwicklern genutzt um eine gewisse
+  Barriere-Freiheit für unsere Endkunden zu gewährleisten. Jede Komponente/Seite
+  sollte gegen diese Checkliste geprüft werden.
+</p>
+
+<h2>Allgemein</h2>
+
+<StoredCheckbox key="auto-tests"
+  >Alle automatischen Accessibility-Tests laufen durch
+  <div slot="named">huhu</div>
+</StoredCheckbox>
+
+<StoredCheckbox key="axe-chrome-extension" label="Axe Chrome extension" />
+<StoredCheckbox key="wave-chrome-extension" label="Wave Chrome Erweiterung" />
+<StoredCheckbox key="lighthouse" label="Lighthouse (Accessibility)" />
 
 <h2>Markup</h2>
 
-<label><input type="checkbox">`&lt;html />` hat korrektes lang-attribut</label> <br />
+<StoredCheckbox
+  key="html-lang"
+  label="`&lt;html />` hat korrektes lang-attribut"
+/>
 
 <playground-ide editable-file-system line-numbers resizable>
   <script type="sample/html" filename="index.html">
@@ -35,41 +54,94 @@ Jede Komponente/Seite sollte gegen diese Checkliste geprüft werden.</p>
   </script>
 </playground-ide>
 
-<label><input type="checkbox">Es gibt bei tabindex nur 0 oder -1</label> <br />
-<label><input type="checkbox">`&lt;a />-Tag` wird für alle Links verwendet -> Seitenwechseln</label> <br />
-<label><input type="checkbox">`&lt;button />-Tag` wird für alle Buttons/Klick/Actionflächen genutzt (kein div mit onclick etc.)</label> <br />
+<StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1" />
+<StoredCheckbox
+  key="a-tag"
+  label="`&lt;a />-Tag` wird für alle Links verwendet -> Seitenwechseln"
+/>
+<StoredCheckbox
+  key="button-tag"
+  label="`&lt;button />-Tag` wird für alle Buttons/Klick/Actionflächen genutzt (kein div mit onclick etc.)"
+/>
 
 <h2>Content</h2>
 
-<label><input type="checkbox">`&lt;button />`, `&lt;a />` und `&lt;label />` sind eindeutig und selbsterklärend</label> <br />
-<label><input type="checkbox">Es gibt nur eine `&lt;h1 />` pro Seite</label> <br />
+<StoredCheckbox
+  key="button-a-label"
+  label="`&lt;button />`, `&lt;a />` und `&lt;label />` sind eindeutig und selbsterklärend"
+/>
+<StoredCheckbox
+  key="h1-per-page"
+  label="Es gibt nur eine `&lt;h1 />` pro Seite"
+/>
 
 <h2>Bilder</h2>
 
-<label><input type="checkbox">Alle `&lt;img />-Elemente` haben ein Alt-Attribut</label> <br />
-<label><input type="checkbox">rein dekorative SVGs haben `aria-hidden="true"`</label> <br />
-<label><input type="checkbox">`&lt;img />-Elemente` mit source SVG haben das role Attribut `role="img"`</label> <br />
+<StoredCheckbox
+  key="img-alt"
+  label="Alle `&lt;img />-Elemente` haben ein Alt-Attribut"
+/>
+<StoredCheckbox
+  key="svg-aria-hidden"
+  label="rein dekorative SVGs haben `aria-hidden='true'`"
+/>
+<StoredCheckbox
+  key="img-svg-role"
+  label="`&lt;img />-Elemente` mit source SVG haben das role Attribut `role='img'`"
+/>
 
 <h2>Formulare</h2>
 
-<label><input type="checkbox">Alle Inputs sind mit entsprechenden Label verbunden</label> <br />
-<label><input type="checkbox">Form Input unterstützen grundsätzlich autocomplete</label> <br />
-<label><input type="checkbox">Input Errors werden direkt mit den entsprechenden Feldern assoziiert</label> <br />
+<StoredCheckbox
+  key="inputs-labels"
+  label="Alle Inputs sind mit entsprechenden Label verbunden"
+/>
+<StoredCheckbox
+  key="form-input-autocomplete"
+  label="Form Input unterstützen grundsätzlich autocomplete"
+/>
+<StoredCheckbox
+  key="input-errors"
+  label="Input Errors werden direkt mit den entsprechenden Feldern assoziiert"
+/>
 
 <h2>Mobile</h2>
 
-<label><input type="checkbox">Die Seite kann nicht horizontal gescrollt werden</label> <br />
-<label><input type="checkbox">Viewport Zoom ist deaktiviert</label> <br />
-<label><input type="checkbox">Alle Klickflächen mind. `44x44px`, außer bei Inline-Elementen wie Links</label> <br />
+<StoredCheckbox
+  key="no-horizontal-scroll"
+  label="Die Seite kann nicht horizontal gescrollt werden"
+/>
+<StoredCheckbox key="viewport-zoom" label="Viewport Zoom ist deaktiviert" />
+<StoredCheckbox
+  key="click-areas-size"
+  label="Alle Klickflächen mind. `44x44px`, außer bei Inline-Elementen wie Links"
+/>
 
 <h2>Tastatur</h2>
 
-<label><input type="checkbox">Tastatursteuerung muss komplett möglich sein</label> <br />
-<label><input type="checkbox">Alle interaktiven Elemente müssen einen sichtbaren focustyle haben</label> <br />
-<label><input type="checkbox">Keyboard-Focus Reihenfolge gleicht der des visuellen Layouts</label> <br />
-<label><input type="checkbox">Es gibt keine unsichtbaren fokusierbaren Elemente</label> <br />
-<label><input type="checkbox">Buttons können über Leertaste und Eingabetaste betätigt werden</label> <br />
-<label><input type="checkbox">Menüs und Overlays können via ESC-Taste wieder geschlossen werden</label> <br />
-
+<StoredCheckbox
+  key="keyboard-control"
+  label="Tastatursteuerung muss komplett möglich sein"
+/>
+<StoredCheckbox
+  key="interactive-elements-focus"
+  label="Alle interaktiven Elemente müssen einen sichtbaren focustyle haben"
+/>
+<StoredCheckbox
+  key="keyboard-focus-order"
+  label="Keyboard-Focus Reihenfolge gleicht der des visuellen Layouts"
+/>
+<StoredCheckbox
+  key="no-invisible-focusable"
+  label="Es gibt keine unsichtbaren fokusierbaren Elemente"
+/>
+<StoredCheckbox
+  key="buttons-space-enter"
+  label="Buttons können über Leertaste und Eingabetaste betätigt werden"
+/>
+<StoredCheckbox
+  key="menus-overlays-esc"
+  label="Menüs und Overlays können via ESC-Taste wieder geschlossen werden"
+/>
 
 <p><strong>Stand 02.2024</strong></p>