Improve accessibility

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,
     }
-    
+
+    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 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;
-    export let lang: LanguageConfig = LanguageConfig.None;
+    let langPlugin = null;
+
     switch (lang) {
         case LanguageConfig.None:
-        case LanguageConfig.None:
+            langPlugin = null;
             break;
         case LanguageConfig.JavaScript:
-        case LanguageConfig.JavaScript:
+            langPlugin = javascript();
             break;
-            break;
+
-    
         default:
             break;
     }
-    }
+    let extensions: Extension[] = [
-    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";
-    // import * as eslint from "eslint-linter-browserify";
-    
-        // lintGutter(),
 
+    // lintGutter(),
+    // linter(esLint(new eslint.Linter(), config)),
 </script>
 
-
+<div class="editor-wrapper card" class:no-header={!$$slots.header}>
-<div class="editor-wrapper card " 
+    {#if $$slots.header}
-class:no-header={!$$slots.header}>
+        <div class="header">
-
+            <slot name="header" />
-{#if $$slots.header}
+        </div>
-	<div class="header">
+    {/if}
-		<slot name="header"/>
+    <CodeMirror
-	</div>
+        {value}
-{/if}
+        class="editor"
-<CodeMirror
+        theme={$theme == "dark" ? githubDark : githubLight}
-    {value}
+        {extensions}
-
+        {readonly}
-    class="editor"
+        on:change
-    theme={$theme == "dark" ? githubDark : githubLight}
+    />
-    {extensions}
-    {readonly}
-    on:change
 </div>
+<!-- <CodeMirror basic={true} bind:value lang={javascript({})}   class="editor" /> -->
+
 <style>
-<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
+        ) {
         border-radius: var(--border-radius);
     }
     :global(pre.cm-editor) {
         margin: 0;
     }
-    }
 </style>
-</style>

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>