fix some accessibility issues in preferences form

* link label with input using explicit labels
* use separate fieldset for form section

src/sass/index.scss

@@ -83,7 +83,6 @@ a {
 fieldset {
     border: 0;
     padding: 0;
-    margin-top: -0.6em;
 }
 
 legend {
@@ -96,6 +95,10 @@ legend {
     margin-bottom: 8px;
 }
 
+.preferences > form:first-of-type {
+    margin-top: -.6em;
+}
+
 .preferences .note {
     border-top: 1px solid var(--border_grey);
     border-bottom: 1px solid var(--border_grey);

src/sass/inputs.scss

@@ -88,22 +88,6 @@ input::-webkit-datetime-edit-year-field:focus {
     }
 }
 
-.checkbox {
-    position: absolute;
-    top: 1px;
-    right: 0;
-    height: 17px;
-    width: 17px;
-    background-color: var(--bg_elements);
-    border: 1px solid var(--accent_border);
-
-    &:after {
-        content: "";
-        position: absolute;
-        display: none;
-    }
-}
-
 .checkbox-container {
     display: block;
     position: relative;
@@ -114,31 +98,38 @@ input::-webkit-datetime-edit-year-field:focus {
 
     input {
         position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
+        right: 0;
+        height: 19px;
+        width: 19px;
+        background-color: var(--bg_elements);
+        border: 1px solid var(--accent_border);
+        appearance: none;
+        box-sizing: border-box;
+        cursor: inherit;
 
-        &:checked ~ .checkbox:after {
+        &:after {
+            left: 2px;
+            bottom: 0;
+            font-size: 13px;
+            font-family: $font_4;
+            content: '\e803';
+            position: absolute;
+            display: none;
+            bottom: 2px;
+        }
+
+        &:checked:after {
             display: block;
         }
     }
 
-    &:hover input ~ .checkbox {
+    &:hover input {
         border-color: var(--accent);
     }
 
-    &:active input ~ .checkbox {
+    &:active input {
         border-color: var(--accent_light);
     }
-
-    .checkbox:after {
-        left: 2px;
-        bottom: 0;
-        font-size: 13px;
-        font-family: $font_4;
-        content: '\e803';
-    }
 }
 
 .pref-group {

src/sass/search.scss

@@ -64,13 +64,14 @@
         margin-left: 23px;
     }
 
-    .checkbox {
+    input[type=checkbox] {
         right: unset;
         left: -22px;
+        top: 1px;
     }
 
-    .checkbox-container .checkbox:after {
-        top: -4px;
+    .checkbox-container input[type=checkbox]:after {
+        top: 1px;
     }
 }
 

src/views/preferences.nim

@@ -10,7 +10,8 @@ macro renderPrefs*(): untyped =
     ident("buildHtml"), ident("tdiv"), nnkStmtList.newTree())
 
   for header, options in prefList:
-    result[2].add nnkCall.newTree(
+    var prefGroup = nnkCall.newTree(ident("fieldset"), nnkStmtList.newTree())
+    prefGroup[1].add nnkCall.newTree(
       ident("legend"),
       nnkStmtList.newTree(
         nnkCommand.newTree(ident("text"), newLit(header))))
@@ -30,20 +31,21 @@ macro renderPrefs*(): untyped =
         else:
           stmt[0].add newLit(pref.options)
 
-      result[2].add stmt
+      prefGroup[1].add stmt
+
+    result[2].add prefGroup
 
 proc renderPreferences*(prefs: Prefs; path: string; themes: seq[string]): VNode =
-  buildHtml(tdiv(class="overlay-panel")):
-    fieldset(class="preferences"):
-      form(`method`="post", action="/saveprefs", autocomplete="off"):
-        refererField path
+  buildHtml(tdiv(class="overlay-panel preferences")):
+    form(`method`="post", action="/saveprefs", autocomplete="off"):
+      refererField path
 
-        renderPrefs()
+      renderPrefs()
 
-        h4(class="note"):
-          text "Preferences are stored client-side using cookies without any personal information."
+      h4(class="note"):
+        text "Preferences are stored client-side using cookies without any personal information."
 
-        button(`type`="submit", class="pref-submit"):
-          text "Save preferences"
+      button(`type`="submit", class="pref-submit"):
+        text "Save preferences"
 
-      buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset"
+    buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset"

src/views/renderutils.nim

@@ -57,22 +57,21 @@ proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNod
       text text
 
 proc genCheckbox*(pref, label: string; state: bool): VNode =
-  buildHtml(label(class="pref-group checkbox-container")):
-    text label
-    input(name=pref, `type`="checkbox", checked=state)
-    span(class="checkbox")
+  buildHtml(tdiv(class="pref-group checkbox-container")):
+    label(`for`=pref): text label
+    input(id=pref, name=pref, `type`="checkbox", checked=state)
 
 proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=true): VNode =
   let p = placeholder
   buildHtml(tdiv(class=("pref-group pref-input " & class))):
     if label.len > 0:
       label(`for`=pref): text label
-    input(name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
+    input(id=pref, name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
 
 proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
   buildHtml(tdiv(class="pref-group pref-input")):
     label(`for`=pref): text label
-    select(name=pref):
+    select(id=pref, name=pref):
       for opt in options:
         option(value=opt, selected=(opt == state)):
           text opt