Fixed #192 More accessible checkboxes.

wordplaydev · Oct 14, 2023 · 1b6e01c · 1b6e01c
1 parent 74daab7
commit 1b6e01c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/src/components/palette/BindCheckbox.svelte b/src/components/palette/BindCheckbox.svelte
@@ -28,4 +28,9 @@
     }
 </script>
 
-<Checkbox on={values.getBool()} changed={handleChange} {editable} />
+<Checkbox
+    on={values.getBool()}
+    changed={handleChange}
+    {editable}
+    id={property.getName()}
+/>
diff --git a/src/components/palette/PaletteProperty.svelte b/src/components/palette/PaletteProperty.svelte
@@ -169,6 +169,7 @@
         align-items: baseline;
         gap: var(--wordplay-spacing);
         row-gap: var(--wordplay-spacing);
+        user-select: none;
     }
 
     .name {

diff --git a/src/components/widgets/Checkbox.svelte b/src/components/widgets/Checkbox.svelte
@@ -3,6 +3,8 @@
     export let changed: undefined | ((value: boolean | undefined) => void) =
         undefined;
     export let editable = true;
+    /** Mandatory id for label */
+    export let id: string | null;
 
     function handleInput() {
         if (changed) changed(on);
@@ -11,6 +13,7 @@
 
 <input
     type="checkbox"
+    {id}
     disabled={!editable}
     bind:checked={on}
     on:change={handleInput}
@@ -27,11 +30,6 @@
         cursor: pointer;
     }
 
-    input:focus {
-        outline: none;
-        border-color: var(--wordplay-highlight-color);
-    }
-
     [type='checkbox']:checked {
         background: var(--wordplay-foreground);
     }

diff --git a/src/routes/moderate/+page.svelte b/src/routes/moderate/+page.svelte
@@ -56,6 +56,7 @@
         try {
             await nextBatch();
         } catch (_) {
+            lastBatch = undefined;
             moderator = false;
         }
     });
@@ -64,7 +65,10 @@
     setContext(ConceptPathSymbol, writable([]));
 
     async function nextBatch() {
-        if (firestore === undefined) return firestore;
+        if (firestore === undefined) {
+            lastBatch = undefined;
+            return firestore;
+        }
         const unmoderated = query(
             collection(firestore, 'projects'),
             // Construct a query for each flag to find any project that has a null flag.
@@ -133,16 +137,19 @@
                     <div class="flag">
                         <Checkbox
                             on={state === null ? undefined : state}
+                            id={flag}
                             changed={(value) =>
                                 (newFlags = withFlag(
                                     newFlags,
                                     flag,
                                     value === true
                                 ))}
                         />
-                        <MarkupHtmlView
-                            markup={getFlagDescription(flag, $locale) ?? ''}
-                        />
+                        <label for={flag}>
+                            <MarkupHtmlView
+                                markup={getFlagDescription(flag, $locale) ?? ''}
+                            /></label
+                        >
                     </div>
                 {/each}
                 <div class="controls">
@@ -196,11 +203,12 @@
         overflow-x: hidden;
         overflow-y: auto;
     }
+
     .flag {
         display: flex;
         flex-direction: row;
         gap: var(--wordplay-spacing);
-        align-items: center;
+        align-items: normal;
         font-size: medium;
     }