split into content sections add links and images (#42)

Neofonie · May 16, 2024 · b2b5cc0 · b2b5cc0
1 parent fd2c72b
commit b2b5cc0
Show file tree

Hide file tree

Showing 15 changed files with 182 additions and 139 deletions.
diff --git a/src/lib/components/checkbox.svelte b/src/lib/components/checkbox.svelte
@@ -23,13 +23,12 @@
 
 <div class="flex items-start gap-2">
     <input bind:this={elmCheckbox} {id} type="checkbox" class="mt-1 h-4 w-4 shrink-0" bind:checked={value} on:click={handleChange} />
-    <div>
-        <label for={id}>
+    <div class="flex gap-1">
+        <label for={id} class="flex gap-1">
             {#if label}
                 <SvelteMarkdown source={label} />
-            {:else}
-                <slot />
             {/if}
+            <slot />
         </label>
 
         <slot name="show-code" />

diff --git a/src/lib/components/stored-checkbox.svelte b/src/lib/components/stored-checkbox.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
     import Checkbox from './checkbox.svelte';
     import StoredInput from './stored-input.svelte';
+    import {randomId} from "$lib/helpers/random-id";
 
     export let key: string = '';
     export let label: string = '';
-    export let id: string = '';
+    export let id: string = randomId();
 </script>
 
 <StoredInput {key} let:value let:handleChange>
-    <Checkbox {id} {value} on:change={handleChange} {label}>
+    <Checkbox id="checkbox-{id}" {value} on:change={handleChange} {label}>
         <slot />
         <div slot="show-code">
             <slot name="show-code" />

diff --git a/src/lib/content/common.svelte b/src/lib/content/common.svelte
@@ -0,0 +1,23 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import Link from "$lib/components/link.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+
+<Headline tag="h2">Allgemein</Headline>
+
+<StoredCheckbox key="auto-tests">
+    Alle automatischen Accessibility-Tests laufen durch
+</StoredCheckbox>
+
+<StoredCheckbox key="axe-chrome-extension" label="Axe Chrome Extension">
+    <Link href="https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">Link</Link>
+</StoredCheckbox>
+<StoredCheckbox key="wave-chrome-extension" label="Wave Chrome Extension">
+    <Link href="https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=de">Link</Link>
+</StoredCheckbox>
+<StoredCheckbox key="lighthouse" label="Lighthouse (Accessibility)">
+    <Link href="assets/chrome-devtools.png">
+        <img src="assets/chrome-devtools.png" alt="Dev Console im Chrome" class="w-20" />
+    </Link>
+</StoredCheckbox>
diff --git a/src/lib/content/content.svelte b/src/lib/content/content.svelte
@@ -0,0 +1,9 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+<Headline tag="h2">Content</Headline>
+
+<StoredCheckbox key="button-a-label"
+                label="`<button>`, `<a>` und `<label>` sind eindeutig und selbsterklärend" />
+<StoredCheckbox key="h1-per-page" label="Es gibt nur eine `<h1>` pro Seite" />
diff --git a/src/lib/content/forms.svelte b/src/lib/content/forms.svelte
@@ -0,0 +1,10 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+
+<Headline tag="h2">Formulare</Headline>
+
+<StoredCheckbox key="inputs-labels" label="Alle Inputs sind mit einem entsprechenden Label verbunden" />
+<StoredCheckbox key="form-input-autocomplete" label="Form-Inputs unterstützen grundsätzlich Autovervollständigung" />
+<StoredCheckbox key="input-errors" label="Eingabefehler werden direkt mit den entsprechenden Feldern assoziiert" />
diff --git a/src/lib/content/images.svelte b/src/lib/content/images.svelte
@@ -0,0 +1,10 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+<Headline tag="h2">Bilder</Headline>
+
+<StoredCheckbox key="img-alt" label="Alle `<img>-Elemente` haben ein Alt-Attribut" />
+<StoredCheckbox key="svg-aria-hidden" label="rein dekorative SVGs haben `aria-hidden=&quot;true&quot;`" />
+<StoredCheckbox key="img-svg-role"
+                label="`<img>-Elemente` mit source SVG haben das role-Attribut `role=&quot;img&quot;`" />
diff --git a/src/lib/content/keyboard.svelte b/src/lib/content/keyboard.svelte
@@ -0,0 +1,13 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+<Headline tag="h2">Tastatur</Headline>
+
+<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" />
diff --git a/src/lib/content/links.svelte b/src/lib/content/links.svelte
@@ -0,0 +1,13 @@
+<script>
+import Link from "$lib/components/link.svelte";
+import Headline from "$lib/components/headline.svelte";
+</script>
+
+<Headline tag="h2">Links</Headline>
+
+<Link href="https://www.w3schools.com/accessibility/index.php">W3School Accessibility Tutorial</Link><br/>
+<Link href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">MDN Dev Docs: Accessibility</Link><br/>
+<Link href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG)</Link><br/>
+<Link href="https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/digitale-barrierefreiheit/digitale-barrierefreiheit-node.html">
+    Digitale Barrierefreiheit (Bundesministerium des Innern und für Heimat)
+</Link><br/>
diff --git a/src/lib/content/markup.svelte b/src/lib/content/markup.svelte
@@ -0,0 +1,34 @@
+<script>
+import dedent from "dedent";
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+import ShowCode from "$lib/components/show-code.svelte";
+</script>
+<Headline tag="h2">Markup</Headline>
+
+<StoredCheckbox key="html-lang" label="`<html>-Tag` hat korrektes lang-Attribut">
+    <ShowCode slot="show-code" title="HTML mit 'lang-Attribute'">{@html dedent`
+        <!doctype html>
+        <!-- lang="language-COUNTRY" -->
+        <html lang="de-DE">
+            <head></head>
+            <body>
+            ...
+            </body>
+        </html>
+    `}</ShowCode>
+</StoredCheckbox>
+
+<StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1">
+    <ShowCode slot="show-code" title="'tabindex' mit 0 oder -1">{@html dedent`
+        <a href="url" tabindex="-1">Ich bin ein Link</a><br />
+        <input type="text" tabindex="0" />
+    `}</ShowCode>
+</StoredCheckbox>
+<StoredCheckbox key="a-tag" label="`<a>-Tag` wird für alle Links verwendet -> Seitenwechseln" />
+<StoredCheckbox key="button-tag"
+                label="`<button>-Tag` wird für alle Buttons, Klick- und Action-Flächen genutzt (kein div mit onclick etc.)" />
+<StoredCheckbox
+        key="ul-ol-tags"
+        label="Wenn ein `<ol>`- oder `<ul>-Element` vorhanden ist, sollte es mindestens ein `<li>-Element` enthalten. Wenn ein `<dl>-Element` vorhanden ist, sollte es mindestens ein `<dt>-Element` enthalten."
+/>
diff --git a/src/lib/content/media.svelte b/src/lib/content/media.svelte
@@ -0,0 +1,11 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+
+<Headline tag="h2">Video & Audio</Headline>
+
+<StoredCheckbox
+        key="videos-audios-playable"
+        label="Die automatische Wiedergabefunktion für Video (sowie für Audio oder andere Multimedia) ist entfernt. Benutzer können die Wiedergabe  starten, anhalten und stoppen."
+/>
diff --git a/src/lib/content/mobile.svelte b/src/lib/content/mobile.svelte
@@ -0,0 +1,11 @@
+<script>
+import Headline from "$lib/components/headline.svelte";
+import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+</script>
+
+<Headline tag="h2">Mobil</Headline>
+
+<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 Klick-Flächen mind. `44x44px`, außer bei Inline-Elementen wie Links" />
diff --git a/src/lib/helpers/random-id.js b/src/lib/helpers/random-id.js
@@ -0,0 +1,7 @@
+let n = Date.now();
+
+// pretty much a sequence, used to number html elements in the same app
+
+export function randomId() {
+    return (++n).toString(36);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,4 +2,8 @@
     import '../app.css';
 </script>
 
+<svelte:head>
+    <script type="module" src="https://google.github.io/playground-elements/playground-configurator.js"></script>
+</svelte:head>
+
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
-  import dedent from 'dedent';
-
-  import A11yInspector from '$lib/components/a11y-inspector.svelte';
-  import A11yListView from '$lib/components/a11y-list-view.svelte';
-  import BuildDate from '$lib/components/build-date.svelte';
-  import Github from '$lib/components/github.svelte';
-  import Headline from '$lib/components/headline.svelte';
-  import Link from '$lib/components/link.svelte';
-  import ShowCode from '$lib/components/show-code.svelte';
-  import SplitPane from '$lib/components/split-pane.svelte';
-  import StoredCheckbox from '$lib/components/stored-checkbox.svelte';
-  import Tooltip from '$lib/components/tooltip.svelte';
+    import Github from '$lib/components/github.svelte';
+    import SplitPane from '$lib/components/split-pane.svelte';
+    import Headline from '$lib/components/headline.svelte';
+    import Tooltip from '$lib/components/tooltip.svelte';
+    import BuildDate from '$lib/components/build-date.svelte';
+    import Links from '$lib/content/links.svelte';
+    import Common from '$lib/content/common.svelte';
+    import Markup from '$lib/content/markup.svelte';
+    import Content from '$lib/content/content.svelte';
+    import Images from '$lib/content/images.svelte';
+    import Media from '$lib/content/media.svelte';
+    import Forms from '$lib/content/forms.svelte';
+    import Mobile from '$lib/content/mobile.svelte';
+    import Keyboard from '$lib/content/keyboard.svelte';
+    import A11yListView from '$lib/components/a11y-list-view.svelte';
+    import A11yInspector from '$lib/components/a11y-inspector.svelte';
 </script>
 
-<svelte:head>
-    <script type="module" src="https://google.github.io/playground-elements/playground-configurator.js"></script>
-</svelte:head>
-
 <Github/>
 
 <SplitPane
-    style="width: 100%; height: 100%;"
-    initialPosition="50%"
+    class="w-full h-full"
+    initialPosition="60%"
 >
-    <div slot="first">
+    <div slot="first" class="w-full h-full box-border overflow-y-auto p-1">
         <div class="container mx-auto px-4 py-4">
             <Headline tag="h1">
-                Test Accessibility „A11y“ <Tooltip label="'11' steht für 11 Buchstaben, ergo für eine Abkürzung" />
+                Neofonie Accessibility „A11y“ Tool <Tooltip label="'11' steht für 11 Buchstaben, ergo für eine Abkürzung" />
             </Headline>
 
             <p>
@@ -36,124 +36,22 @@
 
             <BuildDate />
 
-            <Headline tag="h2">Links</Headline>
-
-            <Link href="https://www.w3schools.com/accessibility/index.php">W3School Accessibility Tutorial</Link><br/>
-            <Link href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">MDN Dev Docs: Accessibility</Link><br/>
-            <Link href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG)</Link><br/>
-            <Link href="https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/digitale-barrierefreiheit/digitale-barrierefreiheit-node.html">
-                Digitale Barrierefreiheit (Bundesministerium des Innern und für Heimat)
-            </Link><br/>
-
-            <Headline tag="h2">Allgemein</Headline>
-
-            <StoredCheckbox key="auto-tests">
-                Alle automatischen Accessibility-Tests laufen durch
-            </StoredCheckbox>
-
-            <StoredCheckbox key="axe-chrome-extension" label="Axe Chrome Extension" />
-            <StoredCheckbox key="wave-chrome-extension" label="Wave Chrome Extension" />
-            <StoredCheckbox key="lighthouse" label="Lighthouse (Accessibility)" />
-
-            <Headline tag="h2">Markup</Headline>
-
-            <StoredCheckbox key="html-lang" label="`<html>-Tag` hat korrektes lang-Attribut">
-                <ShowCode slot="show-code" title="HTML mit 'lang-Attribute'">{@html dedent`
-                    <!doctype html>
-                    <!-- lang="language-COUNTRY" -->
-                    <html lang="de-DE">
-                        <head></head>
-                        <body>
-                        ...
-                        </body>
-                    </html>
-                `}</ShowCode>
-            </StoredCheckbox>
-
-            <StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1">
-                <ShowCode slot="show-code" title="'tabindex' mit 0 oder -1">{@html dedent`
-                    <a href="url" tabindex="-1">Ich bin ein Link</a><br />
-                    <input type="text" tabindex="0" />
-                `}</ShowCode>
-            </StoredCheckbox>
-            <StoredCheckbox key="a-tag" label="`<a>-Tag` wird für alle Links verwendet -> Seitenwechseln" />
-            <StoredCheckbox key="button-tag"
-                label="`<button>-Tag` wird für alle Buttons, Klick- und Action-Flächen genutzt (kein div mit onclick etc.)" />
-            <StoredCheckbox
-                key="ul-ol-tags"
-                label="Wenn ein `<ol>`- oder `<ul>-Element` vorhanden ist, sollte es mindestens ein `<li>-Element` enthalten. Wenn ein `<dl>-Element` vorhanden ist, sollte es mindestens ein `<dt>-Element` enthalten."
-            />
-
-            <Headline tag="h2">Content</Headline>
-
-            <StoredCheckbox key="button-a-label"
-                label="`<button>`, `<a>` und `<label>` sind eindeutig und selbsterklärend" />
-            <StoredCheckbox key="h1-per-page" label="Es gibt nur eine `<h1>` pro Seite" />
-
-            <Headline tag="h2">Bilder</Headline>
-
-            <StoredCheckbox key="img-alt" label="Alle `<img>-Elemente` haben ein Alt-Attribut" />
-            <StoredCheckbox key="svg-aria-hidden" label="rein dekorative SVGs haben `aria-hidden=&quot;true&quot;`" />
-            <StoredCheckbox key="img-svg-role"
-                label="`<img>-Elemente` mit source SVG haben das role-Attribut `role=&quot;img&quot;`" />
-
-            <Headline tag="h2">Video & Audio</Headline>
-
-            <StoredCheckbox
-                key="videos-audios-playable"
-                label="Die automatische Wiedergabefunktion für Video (sowie für Audio oder andere Multimedia) ist entfernt. Benutzer können die Wiedergabe  starten, anhalten und stoppen."
-            />
-
-            <Headline tag="h2">Formulare</Headline>
-
-            <StoredCheckbox key="inputs-labels" label="Alle Inputs sind mit einem entsprechenden Label verbunden" />
-            <StoredCheckbox key="form-input-autocomplete" label="Form-Inputs unterstützen grundsätzlich Autovervollständigung" />
-            <StoredCheckbox key="input-errors" label="Eingabefehler werden direkt mit den entsprechenden Feldern assoziiert" />
-
-            <Headline tag="h2">Mobil</Headline>
-
-            <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 Klick-Flächen mind. `44x44px`, außer bei Inline-Elementen wie Links" />
-
-            <Headline tag="h2">Tastatur</Headline>
-
-            <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" />
+            <Links />
+            <Common />
+            <Markup />
+            <Content />
+            <Images />
+            <Media />
+            <Forms />
+            <Mobile />
+            <Keyboard />
         </div>
 
         <hr />
 
         <A11yListView />
     </div>
-    <div slot="second">
-        <A11yInspector></A11yInspector>
+    <div slot="second" class="w-full h-full flex justify-center items-center">
+        <A11yInspector />
     </div>
 </SplitPane>
-
-<style>
-    /*
-     * Splitpane adjustments.
-     */
-    div[slot=first],
-    div[slot=second] {
-        width: 100%;
-        height: 100%;
-    }
-    div[slot=first] {
-        padding: 1em;
-        box-sizing: border-box;
-        overflow-y: auto;
-    }
-    div[slot=second] {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-</style>
diff --git a/static/assets/chrome-devtools.png b/static/assets/chrome-devtools.png