From 6c03ee7f59d3d9741f5ef65a15d559868bc5fc9d Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Wed, 10 Apr 2024 15:38:59 +0100
Subject: [PATCH] Improve accessibility

---
 packages/website/src/lib/Editor.svelte        | 80 ++++++++++---------
 .../routes/(tools)/bookmarklets/+page.svelte  |  6 +-
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/packages/website/src/lib/Editor.svelte b/packages/website/src/lib/Editor.svelte
index cfd38669..1064f95a 100644
--- a/packages/website/src/lib/Editor.svelte
+++ b/packages/website/src/lib/Editor.svelte
@@ -1,66 +1,73 @@
-<script lang="ts" context="module"> 
-    
+<script lang="ts" context="module">
     export enum LanguageConfig {
         None,
-        JavaScript
+        JavaScript,
     }
-    </script>
+
+    type Attrs = {
+        [name: string]: string;
+    };
+    type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
+</script>
+
 <script lang="ts">
+    // look at https://github.com/sveltejs/learn.svelte.dev/blob/main/src/routes/tutorial/%5Bslug%5D/Editor.svelte
     import CodeMirror from "svelte-codemirror-editor";
     import { javascript } from "@codemirror/lang-javascript";
     import { theme } from "$lib/theme";
     import { githubLight, githubDark } from "$lib/themes/github";
     import type { Extension } from "@codemirror/state";
-
+    import { EditorView } from "@codemirror/view";
 
     export let value = "";
+    export let contentAttributes: AttrSource | null = null;
     export let readonly = false;
     export let lang: LanguageConfig = LanguageConfig.None;
-    let langPlugin = null
+    let langPlugin = null;
+
     switch (lang) {
         case LanguageConfig.None:
-            langPlugin = null
+            langPlugin = null;
             break;
         case LanguageConfig.JavaScript:
-            langPlugin = javascript()
+            langPlugin = javascript();
             break;
-    
-    
+
         default:
             break;
     }
-    let extensions :Extension[] = [];
-    if (langPlugin) extensions.push(langPlugin)
+    let extensions: Extension[] = [
+    ];
+    if (langPlugin !== null) extensions.push(langPlugin);
+    if (contentAttributes !== null) extensions.push(EditorView.contentAttributes.of(contentAttributes));
+
     // $: console.log(value)
 
     // import { linter, lintGutter } from "@codemirror/lint";
     // import * as eslint from "eslint-linter-browserify";
-    
-        // lintGutter(),
-        // linter(esLint(new eslint.Linter(), config)),
 
+    // lintGutter(),
+    // linter(esLint(new eslint.Linter(), config)),
 </script>
 
-<div class="editor-wrapper card " 
-class:no-header={!$$slots.header}>
-
-{#if $$slots.header}
-	<div class="header">
-		<slot name="header"/>
-	</div>
-{/if}
-<CodeMirror
-    {value}
-
-    class="editor"
-    theme={$theme == "dark" ? githubDark : githubLight}
-    {extensions}
-    {readonly}
-    on:change
-/>
+<div class="editor-wrapper card" class:no-header={!$$slots.header}>
+    {#if $$slots.header}
+        <div class="header">
+            <slot name="header" />
+        </div>
+    {/if}
+    <CodeMirror
+        {value}
+        class="editor"
+        theme={$theme == "dark" ? githubDark : githubLight}
+        {extensions}
+        {readonly}
+        on:change
+    />
 </div>
+<!-- <CodeMirror basic={true} bind:value lang={javascript({})}   class="editor" /> -->
+
 <style>
-    
     .editor-wrapper {
         min-height: 200px;
         position: relative;
@@ -74,12 +81,13 @@ class:no-header={!$$slots.header}>
         /* box-shadow: var(--shadow);
         background-color: var(--surface-color); */
     }
-    :global(.editor-wrapper.no-header .cm-scroller, .editor-wrapper.no-header .cm-editor) {
+    :global(
+            .editor-wrapper.no-header .cm-scroller,
+            .editor-wrapper.no-header .cm-editor
+        ) {
         border-radius: var(--border-radius);
     }
     :global(pre.cm-editor) {
         margin: 0;
     }
-    
 </style>
-<!-- <CodeMirror basic={true} bind:value lang={javascript({})}   class="editor" /> -->
diff --git a/packages/website/src/routes/(tools)/bookmarklets/+page.svelte b/packages/website/src/routes/(tools)/bookmarklets/+page.svelte
index 61310e08..6de2cc51 100644
--- a/packages/website/src/routes/(tools)/bookmarklets/+page.svelte
+++ b/packages/website/src/routes/(tools)/bookmarklets/+page.svelte
@@ -21,6 +21,8 @@
         }
     }
 
+    let contentAttributes = {"aria-label": "Bookmarklet editor"}
+
     $: progress = process(value);
 </script>
 
@@ -34,6 +36,7 @@
     {value}
     on:change={(e) => (value = e.detail)}
     lang={LanguageConfig.JavaScript}
+    {contentAttributes}
 >
     <div slot="header" class="code-header">Input</div>
 </Editor>
@@ -44,6 +47,7 @@
 {:catch error}
     <p style="color: red">{error.message}</p>
 {/await}
+<label for="output">Bookmarklet code</label>
 <textarea name="output" class="output card" rows="1" value={output} readonly
 ></textarea>
 
@@ -53,7 +57,7 @@
 </p>
 <p>
     Either drag the link to your bookmarlets bar or, on FireFox, right click and
-    select "Bookmark Link"
+    select "Bookmark Link".
 </p>
 
 <style>